fix up top level errorboundary

solidjs · May 29, 2024 · e0af541 · LukasGerm · May 30, 2024 · e0af541
1 parent 0ac15a2
commit e0af541
Show file tree

Hide file tree

Showing 4 changed files with 58 additions and 29 deletions.
diff --git a/.changeset/metal-swans-reflect.md b/.changeset/metal-swans-reflect.md
@@ -0,0 +1,5 @@
+---
+"@solidjs/start": patch
+---
+
+fix up top level errorboundary
diff --git a/packages/start/src/server/StartServer.tsx b/packages/start/src/server/StartServer.tsx
@@ -10,7 +10,7 @@ import {
   ssr,
   useAssets
 } from "solid-js/web";
-import { ErrorBoundary } from "../shared/ErrorBoundary";
+import { ErrorBoundary, TopErrorBoundary } from "../shared/ErrorBoundary";
 import { renderAsset } from "./renderAsset";
 import type { Asset, DocumentComponentProps, PageEvent } from "./types";
 
@@ -74,7 +74,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
   return (
     <NoHydration>
       {docType as unknown as any}
-      <ErrorBoundary>
+      <TopErrorBoundary>
         <props.document
           assets={
             <>
@@ -128,7 +128,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
             </ErrorBoundary>
           )}
         </props.document>
-      </ErrorBoundary>
+      </TopErrorBoundary>
     </NoHydration>
   );
 }
diff --git a/packages/start/src/server/spa/StartServer.tsx b/packages/start/src/server/spa/StartServer.tsx
@@ -2,9 +2,9 @@
 // @ts-ignore
 import type { Component } from "solid-js";
 import { NoHydration, getRequestEvent, ssr } from "solid-js/web";
+import { TopErrorBoundary } from "../../shared/ErrorBoundary";
 import { renderAsset } from "../renderAsset";
 import type { DocumentComponentProps, PageEvent } from "../types";
-import { ErrorBoundary } from "../../shared/ErrorBoundary";
 
 const docType = ssr("<!DOCTYPE html>");
 
@@ -19,7 +19,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
   return (
     <NoHydration>
       {docType as unknown as any}
-      <ErrorBoundary>
+      <TopErrorBoundary>
         <props.document
           assets={<>{context.assets.map((m: any) => renderAsset(m))}</>}
           scripts={
@@ -53,7 +53,7 @@ export function StartServer(props: { document: Component<DocumentComponentProps>
             )
           }
         />
-      </ErrorBoundary>
+      </TopErrorBoundary>
     </NoHydration>
   );
 }
diff --git a/packages/start/src/shared/ErrorBoundary.tsx b/packages/start/src/shared/ErrorBoundary.tsx
@@ -1,28 +1,52 @@
 // @refresh skip
-import { ErrorBoundary as DefaultErrorBoundary, type ParentProps } from "solid-js";
+import { ErrorBoundary as DefaultErrorBoundary, catchError, type ParentProps } from "solid-js";
 import { isServer } from "solid-js/web";
 import { HttpStatusCode } from "./HttpStatusCode";
 import { DevOverlay } from "./dev-overlay";
 
-export const ErrorBoundary = import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY
-  ? (props: ParentProps) => <DevOverlay>{props.children}</DevOverlay>
-  : (props: ParentProps) => {
-    const message = isServer ? "500 | Internal Server Error" : "Error | Uncaught Client Exception";
-    return (
-      <DefaultErrorBoundary
-        fallback={error => {
-          console.error(error);
-          return (
-            <>
-              <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
-                {message}
-              </span>
-              <HttpStatusCode code={500} />
-            </>
-          );
-        }}
-      >
-        {props.children}
-      </DefaultErrorBoundary>
-    )
-  };
+export const ErrorBoundary =
+  import.meta.env.DEV && import.meta.env.START_DEV_OVERLAY
+    ? (props: ParentProps) => <DevOverlay>{props.children}</DevOverlay>
+    : (props: ParentProps) => {
+        const message = isServer
+          ? "500 | Internal Server Error"
+          : "Error | Uncaught Client Exception";
+        return (
+          <DefaultErrorBoundary
+            fallback={error => {
+              console.error(error);
+              return (
+                <>
+                  <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
+                    {message}
+                  </span>
+                  <HttpStatusCode code={500} />
+                </>
+              );
+            }}
+          >
+            {props.children}
+          </DefaultErrorBoundary>
+        );
+      };
+
+export const TopErrorBoundary = (props: ParentProps) => {
+  let isError = false;
+  const res = catchError(
+    () => props.children,
+    err => {
+      console.error(err);
+      isError = !!err;
+    }
+  );
+  return isError ? (
+    <>
+      <span style="font-size:1.5em;text-align:center;position:fixed;left:0px;bottom:55%;width:100%;">
+        500 | Internal Server Error
+      </span>
+      <HttpStatusCode code={500} />
+    </>
+  ) : (
+    res
+  );
+};