feat(ErrorBoundary): add theme-aware colors and component stack to error details

Signed-off-by: Harshit Kumar <10harshitkumar@gmail.com>

Author: 23harshitkumar

src/components/ErrorBoundary.tsx

@@ -1,4 +1,5 @@
 import { Component, ErrorInfo, ReactNode } from 'react';
+import useAppStore from '../store/store';
 
 interface Props {
   children: ReactNode;
@@ -7,24 +8,30 @@ interface Props {
 interface State {
   hasError: boolean;
   error: Error | null;
+  errorInfo: ErrorInfo | null;
 }
 
 class ErrorBoundary extends Component<Props, State> {
   constructor(props: Props) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { hasError: false, error: null, errorInfo: null };
   }
 
   static getDerivedStateFromError(error: Error): State {
-    return { hasError: true, error };
+    return { hasError: true, error, errorInfo: null };
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
     console.error('ErrorBoundary caught an error:', error, errorInfo);
+    this.setState({ errorInfo });
   }
 
   render() {
     if (this.state.hasError) {
+      // Get theme colors from store
+      const { backgroundColor, textColor } = useAppStore.getState();
+      const isDarkMode = backgroundColor === '#1e1e1e';
+      
       return (
         <div style={{
           display: 'flex',
@@ -34,12 +41,12 @@ class ErrorBoundary extends Component<Props, State> {
           height: '100vh',
           padding: '2rem',
           textAlign: 'center',
-          backgroundColor: '#f5f5f5'
+          backgroundColor: backgroundColor
         }}>
           <h1 style={{ fontSize: '2rem', marginBottom: '1rem', color: '#d32f2f' }}>
             Something went wrong
           </h1>
-          <p style={{ fontSize: '1rem', marginBottom: '2rem', color: '#666', maxWidth: '600px' }}>
+          <p style={{ fontSize: '1rem', marginBottom: '2rem', color: textColor, maxWidth: '600px', opacity: 0.8 }}>
             We apologize for the inconvenience. An unexpected error has occurred.
           </p>
           <button
@@ -59,19 +66,26 @@ class ErrorBoundary extends Component<Props, State> {
           </button>
           {this.state.error && import.meta.env.DEV && (
             <details style={{ marginTop: '2rem', maxWidth: '800px', textAlign: 'left' }}>
-              <summary style={{ cursor: 'pointer', color: '#666', fontSize: '0.9rem' }}>
+              <summary style={{ cursor: 'pointer', color: textColor, opacity: 0.8, fontSize: '0.9rem' }}>
                 Error details
               </summary>
               <pre style={{
                 marginTop: '1rem',
                 padding: '1rem',
-                backgroundColor: '#fff',
-                border: '1px solid #ddd',
+                backgroundColor: isDarkMode ? '#2d2d2d' : '#fff',
+                color: textColor,
+                border: `1px solid ${isDarkMode ? '#444' : '#ddd'}`,
                 borderRadius: '4px',
                 overflow: 'auto',
                 fontSize: '0.85rem'
               }}>
                 {this.state.error.toString()}
+                {this.state.errorInfo?.componentStack && (
+                  <>
+                    {'\n\nComponent Stack:'}
+                    {this.state.errorInfo.componentStack}
+                  </>
+                )}
               </pre>
             </details>
           )}

src/tests/components/ErrorBoundary.test.tsx

@@ -2,6 +2,7 @@ import { render, screen } from "@testing-library/react";
 import { describe, it, expect, vi, beforeEach, afterEach } from "vitest";
 import "@testing-library/jest-dom";
 import ErrorBoundary from "../../components/ErrorBoundary";
+import useAppStore from "../../store/store";
 
 // Component that throws an error for testing
 const ThrowError = ({ shouldThrow }: { shouldThrow: boolean }) => {
@@ -113,4 +114,35 @@ describe("ErrorBoundary", () => {
       expect.any(Object)
     );
   });
+
+  it("should use theme colors from store", () => {
+    // Set dark mode
+    useAppStore.setState({ backgroundColor: '#1e1e1e', textColor: '#ffffff' });
+
+    render(
+      <ErrorBoundary>
+        <ThrowError shouldThrow={true} />
+      </ErrorBoundary>
+    );
+
+    const container = screen.getByText("Something went wrong").parentElement;
+    expect(container).toHaveStyle({ backgroundColor: '#1e1e1e' });
+  });
+
+  it("should display component stack in development mode", () => {
+    import.meta.env.DEV = true;
+
+    render(
+      <ErrorBoundary>
+        <ThrowError shouldThrow={true} />
+      </ErrorBoundary>
+    );
+
+    const errorDetails = screen.getByText("Error details");
+    expect(errorDetails).toBeInTheDocument();
+
+    // Component stack should be present in the pre element
+    const preElement = screen.getByText(/Error: Test error/).closest('pre');
+    expect(preElement?.textContent).toContain('Component Stack:');
+  });
 });