fix: function calls in wasm, add error state to pyodide bootstrap

CONTRIBUTING.md

@@ -15,7 +15,7 @@ Before sending a pull request, make sure to do the following:
 
 _Please reach out to the marimo team before starting work on a large
 contribution._ Get in touch at
-[Github issues](https://github.com/marimo-team/marimo/issues)
+[GitHub issues](https://github.com/marimo-team/marimo/issues)
 or [on Discord](https://discord.gg/JE7nhX6mD8).
 
 ## Building from source

docs/getting_started/index.md

@@ -58,7 +58,7 @@ A tutorial notebook should open in your browser.
 
 ```{admonition} Installation issues?
 
-Having installation issues? Reach out to us [at Github](https://github.com/marimo-team/marimo/issues) or [on Discord](https://discord.gg/JE7nhX6mD8).
+Having installation issues? Reach out to us [at GitHub](https://github.com/marimo-team/marimo/issues) or [on Discord](https://discord.gg/JE7nhX6mD8).
 ```
 
 ## Tutorials

frontend/public/files/wasm-intro.py

@@ -346,7 +346,7 @@ def __(mo):
         ```
 
         In addition to tutorials, we have examples in our
-        [our Github repo](https://www.github.com/marimo-team/marimo/tree/main/examples).
+        [our GitHub repo](https://www.github.com/marimo-team/marimo/tree/main/examples).
         """
     )
     return

frontend/src/components/editor/boundary/ErrorBoundary.tsx

@@ -5,6 +5,7 @@ import {
   FallbackProps,
 } from "react-error-boundary";
 import { Button } from "../../ui/button";
+import { Constants } from "@/core/constants";
 
 export const ErrorBoundary: React.FC<PropsWithChildren> = (props) => {
   return (
@@ -14,14 +15,25 @@ export const ErrorBoundary: React.FC<PropsWithChildren> = (props) => {
   );
 };
 
-export const container =
-  "flex-1 flex items-center justify-center flex-col space-y-4";
-
 const FallbackComponent: React.FC<FallbackProps> = (props) => {
   return (
-    <div className={container}>
-      <h1>Something went wrong</h1>
-      <p>{props.error?.message}</p>
+    <div className="flex-1 flex items-center justify-center flex-col space-y-4 max-w-2xl mx-auto">
+      <h1 className="text-2xl font-bold">Something went wrong</h1>
+      <pre className="text-xs bg-muted/40 border rounded-md p-4">
+        {props.error?.message}
+      </pre>
+      <div>
+        If this is an issue with marimo, please report it on{" "}
+        <a
+          href={Constants.issuesPage}
+          target="_blank"
+          rel="noreferrer"
+          className="underline"
+        >
+          GitHub
+        </a>
+        .
+      </div>
       <Button onClick={props.resetErrorBoundary} variant="outline">
         Try again
       </Button>

frontend/src/core/MarimoApp.tsx

@@ -84,7 +84,7 @@ export const PyodideLoader: React.FC<PropsWithChildren> = ({ children }) => {
 
   // isPyodide() is constant, so this is safe
   // eslint-disable-next-line react-hooks/rules-of-hooks
-  const { loading } = useAsyncData(async () => {
+  const { loading, error } = useAsyncData(async () => {
     await PyodideBridge.INSTANCE.initialized.promise;
     return true;
   }, []);
@@ -93,5 +93,10 @@ export const PyodideLoader: React.FC<PropsWithChildren> = ({ children }) => {
     return <LargeSpinner />;
   }
 
+  // Propagate back up to our error boundary
+  if (error) {
+    throw error;
+  }
+
   return children;
 };

frontend/src/core/pyodide/bridge.ts

@@ -110,6 +110,9 @@ export class PyodideBridge implements RunRequests, EditRequests {
     if (event.data.type === "initialized") {
       this.initialized.resolve();
     }
+    if (event.data.type === "initialized-error") {
+      this.initialized.reject(new Error(event.data.error));
+    }
     if (event.data.type === "message") {
       this.messageConsumer?.(event.data.message);
     }
@@ -286,9 +289,7 @@ export class PyodideBridge implements RunRequests, EditRequests {
   };
 
   sendFunctionRequest = async (request: SendFunctionRequest): Promise<null> => {
-    await this.putControlRequest({
-      function_call: request,
-    });
+    await this.putControlRequest(request);
     return null;
   };
 

frontend/src/core/pyodide/worker/types.ts

@@ -77,6 +77,10 @@ export type WorkerClientPayload =
   | {
       type: "initialized";
     }
+  | {
+      type: "initialized-error";
+      error: string;
+    }
   | {
       type: "error";
       id: RequestId;

frontend/src/core/pyodide/worker/worker.ts

@@ -12,6 +12,7 @@ import { invariant } from "../../../utils/invariant";
 import { Deferred } from "../../../utils/Deferred";
 import { syncFileSystem } from "./fs";
 import { MessageBuffer } from "./message-buffer";
+import { prettyError } from "../../../utils/errors";
 
 declare const self: Window & {
   pyodide: PyodideInterface;
@@ -21,7 +22,12 @@ declare const self: Window & {
 async function loadPyodideAndPackages() {
   // @ts-expect-error ehh TypeScript
   await import("https://cdn.jsdelivr.net/pyodide/v0.25.0/full/pyodide.js");
-  self.pyodide = await bootstrap();
+  try {
+    self.pyodide = await bootstrap();
+  } catch (error) {
+    console.error("Error bootstrapping", error);
+    postMessage({ type: "initialized-error", error: prettyError(error) });
+  }
 }
 const pyodideReadyPromise = loadPyodideAndPackages();
 const messageBuffer = new MessageBuffer((m: string) =>

frontend/src/plugins/impl/common/error-banner.tsx

@@ -37,11 +37,13 @@ export const ErrorBanner = ({
         <span className="line-clamp-4">{message}</span>
       </Banner>
       <AlertDialog open={open} onOpenChange={setOpen}>
-        <AlertDialogContent className="max-w-[80%]">
+        <AlertDialogContent className="max-w-[80%] max-h-[80%] overflow-hidden flex flex-col">
           <AlertDialogHeader>
             <AlertDialogTitle className="text-error">Error</AlertDialogTitle>
           </AlertDialogHeader>
-          <div className="text-error text-sm p-2 font-mono">{message}</div>
+          <pre className="text-error text-sm p-2 font-mono overflow-auto">
+            {message}
+          </pre>
           <AlertDialogFooter>
             <AlertDialogAction autoFocus={true} onClick={() => setOpen(false)}>
               Ok

marimo/_messaging/ops.py

@@ -105,7 +105,7 @@ def maybe_truncate_output(
                 Increasing the max output size may cause performance issues.
                 If you run into problems, please reach out
                 to us on [Discord](https://discord.gg/JE7nhX6mD8) or
-                [Github](https://github.com/marimo-team/marimo/issues).
+                [GitHub](https://github.com/marimo-team/marimo/issues).
                 """
 
             warning = callout(

marimo/_server/sessions.py

@@ -605,7 +605,7 @@ def start(self) -> Optional[Alert]:
         if binpath is None:
             LOGGER.error("Node.js not found; cannot start LSP server.")
             return Alert(
-                title="Github Copilot: Connection Error",
+                title="GitHub Copilot: Connection Error",
                 description="<span><a class='hyperlink' href='https://docs.marimo.io/getting_started/index.html#github-copilot'>Install Node.js</a> to use copilot.</span>",  # noqa: E501
                 variant="danger",
             )

marimo/_tutorials/intro.py

@@ -298,7 +298,7 @@ def __(mo):
         ```
 
         In addition to tutorials, we have examples in our
-        [our Github repo](https://www.github.com/marimo-team/marimo/tree/main/examples).
+        [our GitHub repo](https://www.github.com/marimo-team/marimo/tree/main/examples).
         """
     )
     return