updated errorboundary logging

wheattoast11 · Nov 30, 2024 · 216a276 · 216a276
1 parent f2655ca
commit 216a276
Showing 1 changed file with 38 additions and 3 deletions.
diff --git a/src/components/ErrorBoundary.jsx b/src/components/ErrorBoundary.jsx
@@ -3,16 +3,26 @@ import React from 'react';
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false };
+    this.state = { 
+      hasError: false,
+      error: null,
+      errorInfo: null
+    };
   }
 
   static getDerivedStateFromError(error) {
     return { hasError: true };
   }
 
   componentDidCatch(error, errorInfo) {
-    console.error('Error:', error);
+    // Log error to console for debugging
+    console.error('ErrorBoundary caught an error:', error);
     console.error('Error Info:', errorInfo);
+
+    this.setState({
+      error: error,
+      errorInfo: errorInfo
+    });
   }
 
   render() {
@@ -25,12 +35,37 @@ class ErrorBoundary extends React.Component {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
+          flexDirection: 'column',
           background: '#000000',
-          color: 'white'
+          color: 'white',
+          fontFamily: 'system-ui, -apple-system, sans-serif'
         }}>
           <div>
             <h1>Something went wrong</h1>
             <p>Please refresh the page or try again later.</p>
+            {process.env.NODE_ENV === 'development' && (
+              <div style={{ 
+                marginTop: '2rem',
+                textAlign: 'left',
+                maxWidth: '800px'
+              }}>
+                <details>
+                  <summary style={{ cursor: 'pointer', marginBottom: '1rem' }}>
+                    Error Details
+                  </summary>
+                  <pre style={{ 
+                    whiteSpace: 'pre-wrap',
+                    wordBreak: 'break-word',
+                    background: '#111',
+                    padding: '1rem',
+                    borderRadius: '4px'
+                  }}>
+                    {this.state.error && this.state.error.toString()}
+                    {this.state.errorInfo && this.state.errorInfo.componentStack}
+                  </pre>
+                </details>
+              </div>
+            )}
           </div>
         </div>
       );