fix: implement environment-aware error boundary security

src/app/error.tsx

@@ -1,6 +1,7 @@
 'use client';
+
 import React, { useEffect } from 'react';
-import { UserFriendlyErrorDisplay } from '@/components/errors/UserFriendlyErrorDisplay';
+import UserFriendlyErrorDisplay from '@/components/errors/UserFriendlyErrorDisplay';
 import { errorReportingService } from '@/services/errorReporting';
 
 export default function ErrorBoundary({
@@ -11,7 +12,6 @@ export default function ErrorBoundary({
   reset: () => void;
 }) {
   useEffect(() => {
-    // Log the error to an error reporting service
     errorReportingService.addBreadcrumb('error.tsx', {
       errorMessage: error.message,
       digest: error.digest,
@@ -25,9 +25,10 @@ export default function ErrorBoundary({
         error={error}
         title="Something went wrong!"
         onRetry={reset}
+        // Only show stack traces in development
         showDetails={process.env.NODE_ENV === 'development'}
         severity="error"
       />
     </div>
   );
-}
+}

src/components/errors/ErrorBoundarySystem.tsx

@@ -17,6 +17,7 @@ export type ErrorBoundaryProps = {
   onError?: (error: Error, errorInfo: ErrorInfo) => void;
   isolationId?: string;
   isolationLevel?: string;
+  showDetails?: boolean;
 };
 
 export class ErrorBoundarySystem extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
@@ -39,15 +40,13 @@ export class ErrorBoundarySystem extends Component<ErrorBoundaryProps, ErrorBoun
   }
 
   componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
-    // Update state with error information
     this.setState((prevState) => ({
       hasError: true,
       error,
       errorInfo,
       errorCount: prevState.errorCount + 1,
     }));
 
-    // Report breadcrumb if service available
     if (typeof errorReportingService?.addBreadcrumb === 'function') {
       errorReportingService.addBreadcrumb('errorBoundary', {
         isolationId: this.props.isolationId,
@@ -73,19 +72,23 @@ export class ErrorBoundarySystem extends Component<ErrorBoundaryProps, ErrorBoun
 
   render() {
     if (this.state.hasError) {
+      // Security: Default to false in production, true only in development
+      const isDev = process.env.NODE_ENV === 'development';
+      const shouldShowDetails = this.props.showDetails ?? isDev;
+
       return (
         this.props.fallback || (
           <>
             <div style={{ padding: '20px' }}>
               <h2>Something went wrong.</h2>
-              <p>{this.state.error?.message}</p>
+              {shouldShowDetails && <p>{this.state.error?.message}</p>}
               <button onClick={this.resetError}>Try Again</button>
             </div>
             <UserFriendlyErrorDisplay
               error={this.state.error}
               title="Application Error"
               onRetry={this.resetError}
-              showDetails={true}
+              showDetails={shouldShowDetails}
               severity="error"
             />
           </>
@@ -129,4 +132,4 @@ export function createErrorBoundary(
   return CustomErrorBoundary;
 }
 
-export default ErrorBoundarySystem;
+export default ErrorBoundarySystem;