FEATURE: Show error details and allow clearing the config when the ap…

…p crashes
Flowpack · Jul 21, 2023 · cd132e4 · cd132e4
1 parent 97dfc85
commit cd132e4
Showing 1 changed file with 25 additions and 7 deletions.
diff --git a/Resources/Private/JavaScript/media-module/src/components/ErrorBoundary.tsx b/Resources/Private/JavaScript/media-module/src/components/ErrorBoundary.tsx
@@ -4,33 +4,51 @@ import { NotifyContext } from '@media-ui/core/src/provider/Notify';
 
 class ErrorBoundary extends React.Component<
     { children: React.ReactElement | React.ReactElement[] },
-    { hasError: boolean }
+    { hasError: boolean; error: Error | null }
 > {
     static contextType = NotifyContext;
 
     constructor(props) {
         super(props);
-        this.state = { hasError: false };
+        this.state = { hasError: false, error: null };
     }
 
     static getDerivedStateFromError() {
         return { hasError: true };
     }
 
     componentDidCatch(error) {
+        this.setState({ error });
         this.context.error(error.name, error.message);
     }
 
+    reload() {
+        window.location.reload();
+    }
+
+    clearConfigAndReload = () => {
+        // TODO: Only clear media ui specific entries from localstorage
+        localStorage.clear();
+        this.reload();
+    };
+
     render() {
-        if (this.state.hasError) {
+        const { hasError, error } = this.state;
+        if (hasError) {
             return (
-                <>
-                    <p style={{ color: 'red' }}>Something went wrong.</p>
+                <div>
+                    <p style={{ color: 'red' }}>The media application encountered an unexpected error:</p>
                     <br />
-                    <button className="neos-button" onClick={() => window.location.reload()}>
+                    {error && <pre>{error.message}</pre>}
+                    <br />
+                    <button className="neos-button" onClick={this.reload}>
                         Reload
                     </button>
-                </>
+                    {' or '}
+                    <button className="neos-button" onClick={this.clearConfigAndReload}>
+                        Clear configuration &amp; reload
+                    </button>
+                </div>
             );
         }