From cd132e40efaab29103c387fa87fae2caaff8ab2b Mon Sep 17 00:00:00 2001
From: Sebastian Helzle <sebastian@helzle.it>
Date: Fri, 21 Jul 2023 11:07:24 +0200
Subject: [PATCH] FEATURE: Show error details and allow clearing the config
 when the app crashes

---
 .../src/components/ErrorBoundary.tsx          | 32 +++++++++++++++----
 1 file changed, 25 insertions(+), 7 deletions(-)

diff --git a/Resources/Private/JavaScript/media-module/src/components/ErrorBoundary.tsx b/Resources/Private/JavaScript/media-module/src/components/ErrorBoundary.tsx
index 787eae075..957b2d313 100644
--- a/Resources/Private/JavaScript/media-module/src/components/ErrorBoundary.tsx
+++ b/Resources/Private/JavaScript/media-module/src/components/ErrorBoundary.tsx
@@ -4,13 +4,13 @@ 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() {
@@ -18,19 +18,37 @@ class ErrorBoundary extends React.Component<
     }
 
     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>
             );
         }