feat: add ErrorBoundary

Author: Je

app.ts

@@ -1,6 +1,6 @@
 import React, { ComponentType, createContext, useCallback, useEffect, useState } from 'https://esm.sh/react'
 import { DataContext } from './data.ts'
-import { E404Page, E501 } from './error.ts'
+import { E404Page, E501App, E501Page } from './error.ts'
 import events from './events.ts'
 import route from './route.ts'
 import { RouterContext } from './router.ts'
@@ -35,15 +35,15 @@ export function ALEPH({ initial }: {
     const [app, setApp] = useState(() => {
         const { App } = initial.components
         return {
-            Component: App ? (util.isLikelyReactComponent(App) ? App : E501.App) : null
+            Component: App ? (util.isLikelyReactComponent(App) ? App : E501App) : null
         }
     })
     const [page, setPage] = useState(() => {
         const { components, url } = initial
         const { Page } = components
         return {
             url,
-            Component: Page ? (util.isLikelyReactComponent(Page) ? Page : E501.Page) : null
+            Component: Page ? (util.isLikelyReactComponent(Page) ? Page : E501Page) : null
         }
     })
     const onpopstate = useCallback(async () => {
@@ -64,7 +64,7 @@ export function ALEPH({ initial }: {
             } else {
                 setPage({
                     url,
-                    Component: E501.Page
+                    Component: E501Page
                 })
             }
         } else {
@@ -103,7 +103,7 @@ export function ALEPH({ initial }: {
                 } else {
                     setPage(({ url }) => ({
                         url,
-                        Component: E501.App
+                        Component: E501App
                     }))
                 }
             } else if (moduleId === './data.js' || moduleId === './data/index.js') {

bootstrap.ts

@@ -1,6 +1,7 @@
 import React from 'https://esm.sh/react'
 import { hydrate, render } from 'https://esm.sh/react-dom'
 import { ALEPH, getModuleImportUrl } from './app.ts'
+import { ErrorBoundary } from './error.ts'
 import route from './route.ts'
 import type { AppManifest, Module, RouterURL } from './types.ts'
 import util from './util.ts'
@@ -51,17 +52,22 @@ export default async function bootstrap({
         pageModule ? import(getModuleImportUrl(baseUrl, pageModule)) : Promise.resolve({}),
     ])
     const el = React.createElement(
-        ALEPH,
-        {
-            initial: {
-                manifest: { baseUrl, defaultLocale, locales },
-                pageModules,
-                url,
-                data,
-                components: { E404, App, Page }
+        ErrorBoundary,
+        null,
+        React.createElement(
+            ALEPH,
+            {
+                initial: {
+                    manifest: { baseUrl, defaultLocale, locales },
+                    pageModules,
+                    url,
+                    data,
+                    components: { E404, App, Page }
+                }
             }
-        }
+        )
     )
+
     if (dataEl) {
         hydrate(el, mainEl)
         // remove ssr head elements, set a timmer to avoid tab title flash

error.ts

@@ -19,13 +19,40 @@ const e501PageEl = React.createElement(
 )
 const e404PageEl = React.createElement(ErrorPage, { status: 404 })
 
-export const E501 = {
-    App: () => e501AppEl,
-    Page: () => e501PageEl
-}
+export const E501App = () => e501AppEl
+export const E501Page = () => e501PageEl
+export const E404Page = () => e404PageEl
+
+export class ErrorBoundary extends React.Component {
+    state: { stack: string | null }
+
+    constructor(props: any) {
+        super(props)
+        this.state = { stack: null }
+    }
+
+    static getDerivedStateFromError(error: Error) {
+        // Update state so the next render will show the fallback UI.
+        return { stack: error.stack }
+    }
+
+    componentDidCatch(error: any, errorInfo: any) {
+        this.state = { stack: error.stack }
+    }
 
-export function E404Page() {
-    return e404PageEl
+    render() {
+        if (this.state.stack) {
+            return (
+                React.createElement(
+                    'pre',
+                    null,
+                    this.state.stack
+                )
+            )
+        }
+
+        return this.props.children
+    }
 }
 
 export function ErrorPage({ status, text = getStatusText(status), refreshButton }: { status: number, text?: string, refreshButton?: boolean }) {

renderer.ts

@@ -1,7 +1,7 @@
 import React, { ComponentType } from 'https://esm.sh/react'
 import { renderToString } from 'https://esm.sh/react-dom/server'
 import { DataContext } from './data.ts'
-import { E501 } from './error.ts'
+import { E501App, E501Page, ErrorBoundary } from './error.ts'
 import { RouterContext } from './router.ts'
 import type { RouterURL } from './types.ts'
 import util from './util.ts'
@@ -13,15 +13,21 @@ export function renderPage(
     App: ComponentType<any> | undefined,
     Page: ComponentType<any>,
 ) {
-    const pageEl = React.createElement(util.isLikelyReactComponent(Page) ? Page : E501.Page)
-    const appEl = App ? (util.isLikelyReactComponent(App) ? React.createElement(App, null, pageEl) : React.createElement(E501.App)) : pageEl
-    return renderToString(React.createElement(
-        DataContext.Provider,
-        { value: data },
+    const pageEl = React.createElement(util.isLikelyReactComponent(Page) ? Page : E501Page)
+    const appEl = App ? (util.isLikelyReactComponent(App) ? React.createElement(App, null, pageEl) : React.createElement(E501App)) : pageEl
+    return renderToString(
         React.createElement(
-            RouterContext.Provider,
-            { value: url },
-            appEl
+            ErrorBoundary,
+            null,
+            React.createElement(
+                DataContext.Provider,
+                { value: data },
+                React.createElement(
+                    RouterContext.Provider,
+                    { value: url },
+                    appEl
+                )
+            )
         )
-    ))
+    )
 }