meno-core 1.0.53 → 1.1.0

package/lib/client/ErrorBoundary.tsx

@@ -3,7 +3,7 @@
  * Catches and handles React rendering errors gracefully
  */
 
-import { Component, createElement as h, ReactNode } from 'react';
+import { Component, createElement as h, type ReactNode } from 'react';
 import { toFriendlyError } from '../shared/friendlyError';
 
 interface ErrorBoundaryProps {
@@ -41,11 +41,7 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
     const { onError, componentName, level = 'component' } = this.props;
 
     // Log error to console
-    console.error(
-      `❌ [${level.toUpperCase()} ERROR]${componentName ? ` in ${componentName}` : ''}:`,
-      error,
-      errorInfo
-    );
+    console.error(`❌ [${level.toUpperCase()} ERROR]${componentName ? ` in ${componentName}` : ''}:`, error, errorInfo);
 
     // Call custom error handler if provided
     if (onError) {
@@ -76,145 +72,198 @@ export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundarySt
 
       // Default fallback UI
       if (level === 'page') {
-        return h('div', {
-          style: {
-            padding: '40px',
-            maxWidth: '800px',
-            margin: '0 auto',
-            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-          }
-        },
-          h('div', {
+        return h(
+          'div',
+          {
             style: {
-              background: '#fee',
-              border: '2px solid #fcc',
-              borderRadius: '8px',
-              padding: '24px',
-            }
+              padding: '40px',
+              maxWidth: '800px',
+              margin: '0 auto',
+              fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+            },
           },
-            h('h2', {
-              style: {
-                margin: '0 0 16px 0',
-                color: '#c00',
-                fontSize: '24px',
-                fontWeight: '600',
-              }
-            }, `⚠️ ${friendly.title}`),
-            h('p', {
-              style: {
-                margin: '0 0 16px 0',
-                color: '#666',
-                fontSize: '16px',
-                lineHeight: '1.5',
-              }
-            }, friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage),
-            h('details', {
+          h(
+            'div',
+            {
               style: {
-                marginTop: '16px',
-                fontSize: '14px',
-              }
+                background: '#fee',
+                border: '2px solid #fcc',
+                borderRadius: '8px',
+                padding: '24px',
+              },
             },
-              h('summary', {
+            h(
+              'h2',
+              {
                 style: {
-                  cursor: 'pointer',
-                  color: '#666',
+                  margin: '0 0 16px 0',
+                  color: '#c00',
+                  fontSize: '24px',
                   fontWeight: '600',
-                  marginBottom: '8px',
-                }
-              }, 'Technical details'),
-              h('div', {
+                },
+              },
+              `⚠️ ${friendly.title}`,
+            ),
+            h(
+              'p',
+              {
                 style: {
-                  background: '#fff',
-                  border: '1px solid #ddd',
-                  borderRadius: '4px',
-                  padding: '16px',
-                  margin: '8px 0',
-                  fontFamily: 'monospace',
+                  margin: '0 0 16px 0',
+                  color: '#666',
+                  fontSize: '16px',
+                  lineHeight: '1.5',
+                },
+              },
+              friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage,
+            ),
+            h(
+              'details',
+              {
+                style: {
+                  marginTop: '16px',
                   fontSize: '14px',
-                  color: '#c00',
-                  overflowX: 'auto',
-                }
-              }, error.message),
-              process.env.NODE_ENV === 'development' && errorInfo?.componentStack && h('pre', {
+                },
+              },
+              h(
+                'summary',
+                {
+                  style: {
+                    cursor: 'pointer',
+                    color: '#666',
+                    fontWeight: '600',
+                    marginBottom: '8px',
+                  },
+                },
+                'Technical details',
+              ),
+              h(
+                'div',
+                {
+                  style: {
+                    background: '#fff',
+                    border: '1px solid #ddd',
+                    borderRadius: '4px',
+                    padding: '16px',
+                    margin: '8px 0',
+                    fontFamily: 'monospace',
+                    fontSize: '14px',
+                    color: '#c00',
+                    overflowX: 'auto',
+                  },
+                },
+                error.message,
+              ),
+              process.env.NODE_ENV === 'development' &&
+                errorInfo?.componentStack &&
+                h(
+                  'pre',
+                  {
+                    style: {
+                      background: '#f5f5f5',
+                      border: '1px solid #ddd',
+                      borderRadius: '4px',
+                      padding: '12px',
+                      fontSize: '12px',
+                      overflowX: 'auto',
+                      color: '#333',
+                    },
+                  },
+                  errorInfo.componentStack,
+                ),
+            ),
+            h(
+              'button',
+              {
+                onClick: () => window.location.reload(),
                 style: {
-                  background: '#f5f5f5',
-                  border: '1px solid #ddd',
+                  marginTop: '16px',
+                  padding: '10px 20px',
+                  background: '#007acc',
+                  color: '#fff',
+                  border: 'none',
                   borderRadius: '4px',
-                  padding: '12px',
-                  fontSize: '12px',
-                  overflowX: 'auto',
-                  color: '#333',
-                }
-              }, errorInfo.componentStack)
+                  fontSize: '14px',
+                  fontWeight: '600',
+                  cursor: 'pointer',
+                },
+              },
+              '🔄 Reload Page',
             ),
-            h('button', {
-              onClick: () => window.location.reload(),
-              style: {
-                marginTop: '16px',
-                padding: '10px 20px',
-                background: '#007acc',
-                color: '#fff',
-                border: 'none',
-                borderRadius: '4px',
-                fontSize: '14px',
-                fontWeight: '600',
-                cursor: 'pointer',
-              }
-            }, '🔄 Reload Page')
-          )
+          ),
         );
       }
 
       // Component-level error
-      return h('div', {
-        style: {
-          border: '2px dashed #fcc',
-          borderRadius: '4px',
-          padding: '12px',
-          margin: '8px 0',
-          background: '#fef5f5',
-          fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
-        }
-      },
-        h('div', {
+      return h(
+        'div',
+        {
           style: {
-            display: 'flex',
-            alignItems: 'center',
-            gap: '8px',
-            marginBottom: '8px',
-          }
+            border: '2px dashed #fcc',
+            borderRadius: '4px',
+            padding: '12px',
+            margin: '8px 0',
+            background: '#fef5f5',
+            fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif',
+          },
         },
-          h('span', {
+        h(
+          'div',
+          {
             style: {
-              fontSize: '18px',
-            }
-          }, '⚠️'),
-          h('strong', {
+              display: 'flex',
+              alignItems: 'center',
+              gap: '8px',
+              marginBottom: '8px',
+            },
+          },
+          h(
+            'span',
+            {
+              style: {
+                fontSize: '18px',
+              },
+            },
+            '⚠️',
+          ),
+          h(
+            'strong',
+            {
+              style: {
+                color: '#c00',
+                fontSize: '14px',
+              },
+            },
+            `${friendly.title}${componentName ? ` (${componentName})` : ''}`,
+          ),
+        ),
+        h(
+          'div',
+          {
             style: {
-              color: '#c00',
-              fontSize: '14px',
-            }
-          }, `${friendly.title}${componentName ? ` (${componentName})` : ''}`)
+              fontSize: '13px',
+              color: '#666',
+              lineHeight: '1.5',
+            },
+          },
+          friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage,
         ),
-        h('div', {
-          style: {
-            fontSize: '13px',
-            color: '#666',
-            lineHeight: '1.5',
-          }
-        }, friendlyHint ? `${friendlyMessage} ${friendlyHint}` : friendlyMessage),
-        process.env.NODE_ENV === 'development' && h('div', {
-          style: {
-            marginTop: '8px',
-            fontSize: '12px',
-            color: '#666',
-            fontFamily: 'monospace',
-            background: '#fff',
-            padding: '8px',
-            borderRadius: '4px',
-            border: '1px solid #fcc',
-          }
-        }, error.message)
+        process.env.NODE_ENV === 'development' &&
+          h(
+            'div',
+            {
+              style: {
+                marginTop: '8px',
+                fontSize: '12px',
+                color: '#666',
+                fontFamily: 'monospace',
+                background: '#fff',
+                padding: '8px',
+                borderRadius: '4px',
+                border: '1px solid #fcc',
+              },
+            },
+            error.message,
+          ),
       );
     }
 
@@ -231,15 +280,17 @@ export function withErrorBoundary<T>(
     componentName?: string;
     level?: 'component' | 'page';
     onError?: (error: Error, errorInfo: any) => void;
-  } = {}
+  } = {},
 ): T | ReturnType<typeof h> {
   try {
     return renderFn();
-  } catch (error) {
-    return h(ErrorBoundary, {
-      ...options,
-      children: null,
-    });
+  } catch (_error) {
+    return h(
+      ErrorBoundary,
+      {
+        ...options,
+      },
+      null,
+    );
   }
 }
-