Add react error handler

2 files changed, 58 insertions, 16 deletions

diff --git a/modern/src/ErrorBoundary.js b/modern/src/ErrorBoundary.js
new file mode 100644
index 00000000..5a24435f
--- /dev/null
+++ b/modern/src/ErrorBoundary.js
@@ -0,0 +1,39 @@
+import React from 'react';
+import { Alert } from '@mui/material';
+
+class ErrorBoundary extends React.Component {
+  constructor(props) {
+    super(props);
+    this.state = {
+      error: null,
+    };
+  }
+
+  static getDerivedStateFromError(error) {
+    return { error };
+  }
+
+  componentDidCatch(error, errorInfo) {
+    console.log(error);
+    console.log(errorInfo);
+  }
+
+  render() {
+    const { error } = this.state;
+    if (error) {
+      return (
+        <Alert severity="error">
+          <code
+            dangerouslySetInnerHTML={{
+              __html: error.stack.replaceAll('\n', '<br>').replaceAll(' ', '&nbsp;'),
+            }}
+          />
+        </Alert>
+      );
+    }
+    const { children } = this.props;
+    return children;
+  }
+}
+
+export default ErrorBoundary;
diff --git a/modern/src/index.js b/modern/src/index.js
index d89d917e..e5457789 100644
--- a/modern/src/index.js
+++ b/modern/src/index.js
@@ -13,27 +13,30 @@ import preloadImages from './map/core/preloadImages';
 import * as serviceWorkerRegistration from './serviceWorkerRegistration';
 import NativeInterface from './common/components/NativeInterface';
 import ServerProvider from './ServerProvider';
+import ErrorBoundary from './ErrorBoundary';
 
 preloadImages();
 
 const root = createRoot(document.getElementById('root'));
 root.render(
-  <Provider store={store}>
-    <LocalizationProvider>
-      <StyledEngineProvider injectFirst>
-        <ThemeProvider theme={theme}>
-          <CssBaseline />
-          <ServerProvider>
-            <BrowserRouter>
-              <Navigation />
-            </BrowserRouter>
-          </ServerProvider>
-          <ErrorHandler />
-          <NativeInterface />
-        </ThemeProvider>
-      </StyledEngineProvider>
-    </LocalizationProvider>
-  </Provider>,
+  <ErrorBoundary>
+    <Provider store={store}>
+      <LocalizationProvider>
+        <StyledEngineProvider injectFirst>
+          <ThemeProvider theme={theme}>
+            <CssBaseline />
+            <ServerProvider>
+              <BrowserRouter>
+                <Navigation />
+              </BrowserRouter>
+            </ServerProvider>
+            <ErrorHandler />
+            <NativeInterface />
+          </ThemeProvider>
+        </StyledEngineProvider>
+      </LocalizationProvider>
+    </Provider>
+  </ErrorBoundary>,
 );
 
 serviceWorkerRegistration.register();