Refactor error boundary (#9040)

* Refactor error boundary

* add debug menu system errors and reactor error boundaries

* license

---------

Co-authored-by: Gheric Speiginer <[email protected]>

packages/client-core/src/common/components/ErrorBoundary.tsx

@@ -25,41 +25,9 @@ Ethereal Engine. All Rights Reserved.
 
 import React from 'react'
 
-type Props = {
-  children: React.ReactNode
-}
+import { createErrorBoundary } from '@etherealengine/common/src/utils/createErrorBoundary'
 
-type ErrorHandler = (error: Error, info: React.ErrorInfo) => void
-type ErrorHandlingComponent<Props> = (props: Props, error?: Error) => React.ReactNode
-
-type ErrorState = { error?: Error }
-
-function Catch<Props extends object>(
-  component: ErrorHandlingComponent<Props>,
-  errorHandler?: ErrorHandler
-): React.ComponentType<Props> {
-  return class extends React.Component<Props, ErrorState> {
-    state: ErrorState = {
-      error: undefined
-    }
-
-    static getDerivedStateFromError(error: Error) {
-      return { error }
-    }
-
-    componentDidCatch(error: Error, info: React.ErrorInfo) {
-      if (errorHandler) {
-        errorHandler(error, info)
-      }
-    }
-
-    render() {
-      return component(this.props, this.state.error)
-    }
-  }
-}
-
-const ErrorBoundary = Catch(function error(props: Props, error?: Error) {
+const ErrorBoundary = createErrorBoundary(function error(props, error?: Error) {
   if (error) {
     return (
       <div className="error-screen">

packages/client-core/src/components/Debug/index.tsx

@@ -299,14 +299,13 @@ export const Debug = ({ showingStateRef }: { showingStateRef: React.MutableRefOb
           data={dag}
           labelRenderer={(raw, ...keyPath) => {
             const label = raw[0]
-            if (label === 'preSystems') return <span style={{ color: 'red' }}>{t('common:debug.preSystems')}</span>
-            if (label === 'simulation') return <span style={{ color: 'green' }}>{t('common:debug.simulation')}</span>
-            if (label === 'subSystems') return <span style={{ color: 'red' }}>{t('common:debug.subSystems')}</span>
-            if (label === 'postSystems') return <span style={{ color: 'red' }}>{t('common:debug.postSystems')}</span>
+            if (label === 'preSystems' || label === 'simulation' || label === 'subSystems' || label === 'postSystems')
+              return <span style={{ color: 'green' }}>{t(`common:debug.${label}`)}</span>
             return <span style={{ color: 'black' }}>{label}</span>
           }}
           valueRenderer={(raw, value, ...keyPath) => {
             const system = SystemDefinitions.get((keyPath[0] === 'enabled' ? keyPath[1] : keyPath[0]) as SystemUUID)!
+            const systemReactor = system ? Engine.instance.activeSystemReactors.get(system.uuid) : undefined
             return (
               <>
                 <input
@@ -320,6 +319,11 @@ export const Debug = ({ showingStateRef }: { showingStateRef: React.MutableRefOb
                     }
                   }}
                 ></input>
+                {systemReactor?.error && (
+                  <span style={{ color: 'red' }}>
+                    {systemReactor.error.name}: {systemReactor.error.message}
+                  </span>
+                )}
               </>
             )
           }}

packages/common/src/utils/createErrorBoundary.ts

@@ -0,0 +1,60 @@
+/*
+CPAL-1.0 License
+
+The contents of this file are subject to the Common Public Attribution License
+Version 1.0. (the "License"); you may not use this file except in compliance
+with the License. You may obtain a copy of the License at
+https://github.com/EtherealEngine/etherealengine/blob/dev/LICENSE.
+The License is based on the Mozilla Public License Version 1.1, but Sections 14
+and 15 have been added to cover use of software over a computer network and 
+provide for limited attribution for the Original Developer. In addition, 
+Exhibit A has been modified to be consistent with Exhibit B.
+
+Software distributed under the License is distributed on an "AS IS" basis,
+WITHOUT WARRANTY OF ANY KIND, either express or implied. See the License for the
+specific language governing rights and limitations under the License.
+
+The Original Code is Ethereal Engine.
+
+The Original Developer is the Initial Developer. The Initial Developer of the
+Original Code is the Ethereal Engine team.
+
+All portions of the code written by the Ethereal Engine team are Copyright © 2021-2023 
+Ethereal Engine. All Rights Reserved.
+*/
+
+import React from 'react'
+
+type Props = {
+  children: React.ReactNode
+}
+
+type ErrorHandler = (error: Error, info: React.ErrorInfo) => void
+type ErrorHandlingComponent<Props> = (props: Props, error?: Error) => React.ReactNode
+
+type ErrorState = { error?: Error }
+
+export function createErrorBoundary<P extends Props>(
+  component: ErrorHandlingComponent<P>,
+  errorHandler?: ErrorHandler
+): React.ComponentType<P> {
+  return class extends React.Component<P, ErrorState> {
+    state: ErrorState = {
+      error: undefined
+    }
+
+    static getDerivedStateFromError(error: Error) {
+      return { error }
+    }
+
+    componentDidCatch(error: Error, info: React.ErrorInfo) {
+      if (errorHandler) {
+        errorHandler(error, info)
+      }
+    }
+
+    render() {
+      return component(this.props, this.state.error)
+    }
+  }
+}

packages/hyperflux/functions/ReactorFunctions.tsx

@@ -29,6 +29,8 @@ import { ConcurrentRoot, DefaultEventPriority } from 'react-reconciler/constants
 
 import { isDev } from '@etherealengine/common/src/config'
 
+import { createErrorBoundary } from '@etherealengine/common/src/utils/createErrorBoundary'
+
 import { HyperFlux } from './StoreFunctions'
 
 const ReactorReconciler = Reconciler({
@@ -75,9 +77,11 @@ ReactorReconciler.injectIntoDevTools({
   version: '18.2.0'
 })
 
-export interface ReactorRoot {
+export type ReactorRoot = {
   fiber: any
   isRunning: boolean
+  Reactor: React.FC
+  error: Error | null
   promise: Promise<void>
   cleanupFunctions: Set<() => void>
   run: (force?: boolean) => Promise<void>
@@ -90,6 +94,18 @@ export function useReactorRootContext(): ReactorRoot {
   return React.useContext(ReactorRootContext)
 }
 
+export const ReactorErrorBoundary = createErrorBoundary<{ children: React.ReactNode; reactorRoot: ReactorRoot }>(
+  function error(props, error?: Error) {
+    if (error) {
+      props.reactorRoot.error = error
+      props.reactorRoot.stop()
+      return null
+    } else {
+      return <React.Fragment>{props.children}</React.Fragment>
+    }
+  }
+)
+
 export function startReactor(Reactor: React.FC): ReactorRoot {
   const isStrictMode = false
   const concurrentUpdatesByDefaultOverride = true
@@ -113,6 +129,7 @@ export function startReactor(Reactor: React.FC): ReactorRoot {
     fiber: fiberRoot,
     isRunning: false,
     Reactor,
+    error: null as Error | null,
     promise: null! as Promise<void>,
     run() {
       if (reactorRoot.isRunning) return Promise.resolve()
@@ -121,7 +138,9 @@ export function startReactor(Reactor: React.FC): ReactorRoot {
         HyperFlux.store.activeReactors.add(reactorRoot)
         ReactorReconciler.updateContainer(
           <ReactorRootContext.Provider value={reactorRoot}>
-            <Reactor />
+            <ReactorErrorBoundary key="reactor-error-boundary" reactorRoot={reactorRoot}>
+              <Reactor />
+            </ReactorErrorBoundary>
           </ReactorRootContext.Provider>,
           fiberRoot,
           null,

packages/ui/package.json

@@ -96,7 +96,7 @@
     "jest-scss-transform": "^1.0.3",
     "path-browserify": "^1.0.1",
     "postcss": "^8.4.23",
-    "react": "^18.2.0",
+    "react": "18.2.0",
     "react-dom": "18.2.0",
     "sass": "1.59.3",
     "storybook": "^7.1.0-alpha.37",