Add react error handler

1 files changed, 39 insertions, 0 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;