Collect structured errors from parsing/executing KCL (#187)

Currently, syntax/semantic errors in the user's source code result in vanilla JS exceptions being thrown, so they show up in the console. Instead, this PR:

- Adds a new type KCLError
- KCL syntax/semantic errors when parsing/executing the source code now throw KCLErrors instead of vanilla JS exceptions.
- KCL errors are caught and logged to a new "Errors" panel, instead of the browser console.

src/components/Logs.tsx

@@ -38,3 +38,36 @@ export const Logs = () => {
     </div>
   )
 }
+
+export const KCLErrors = () => {
+  const { kclErrors } = useStore(({ kclErrors }) => ({
+    kclErrors,
+  }))
+  useEffect(() => {
+    const element = document.querySelector('.console-tile')
+    if (element) {
+      element.scrollTop = element.scrollHeight - element.clientHeight
+    }
+  }, [kclErrors])
+  return (
+    <div>
+      <PanelHeader title="KCL Errors" />
+      <div className="h-full relative">
+        <div className="absolute inset-0 flex flex-col items-start">
+          <ReactJsonTypeHack
+            src={kclErrors}
+            collapsed={1}
+            collapseStringsAfterLength={60}
+            enableClipboard={false}
+            displayArrayKey={false}
+            displayDataTypes={false}
+            displayObjectSize={true}
+            indentWidth={2}
+            quotesOnKeys={false}
+            name={false}
+          />
+        </div>
+      </div>
+    </div>
+  )
+}