vibepulse 0.2.0 → 0.2.1

package/.next/standalone/src/components/ErrorBoundary.tsx

@@ -0,0 +1,72 @@
+'use client';
+
+import { Component, ReactNode } from 'react';
+
+interface ErrorBoundaryProps {
+    children: ReactNode;
+}
+
+interface ErrorBoundaryState {
+    hasError: boolean;
+    error?: Error;
+}
+
+export class ErrorBoundary extends Component<ErrorBoundaryProps, ErrorBoundaryState> {
+    constructor(props: ErrorBoundaryProps) {
+        super(props);
+        this.state = { hasError: false };
+    }
+
+    static getDerivedStateFromError(error: Error): ErrorBoundaryState {
+        return { hasError: true, error };
+    }
+
+    componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
+        console.error('ErrorBoundary caught an error:', error, errorInfo);
+    }
+
+    render() {
+        if (this.state.hasError) {
+            return (
+                <div className="min-h-screen flex items-center justify-center bg-zinc-50 dark:bg-black">
+                    <div className="max-w-md w-full mx-4 p-8 bg-white dark:bg-zinc-900 rounded-lg shadow-lg border border-gray-200 dark:border-zinc-800">
+                        <div className="flex items-center justify-center w-12 h-12 mx-auto mb-4 bg-red-100 dark:bg-red-900/30 rounded-full">
+                            <svg
+                                className="w-6 h-6 text-red-600 dark:text-red-400"
+                                fill="none"
+                                stroke="currentColor"
+                                viewBox="0 0 24 24"
+                            >
+                                <path
+                                    strokeLinecap="round"
+                                    strokeLinejoin="round"
+                                    strokeWidth={2}
+                                    d="M12 9v2m0 4h.01m-6.938 4h13.856c1.54 0 2.502-1.667 1.732-3L13.732 4c-.77-1.333-2.694-1.333-3.464 0L3.34 16c-.77 1.333.192 3 1.732 3z"
+                                />
+                            </svg>
+                        </div>
+                        <h2 className="text-xl font-semibold text-center text-gray-900 dark:text-white mb-2">
+                            Something went wrong
+                        </h2>
+                        <p className="text-center text-gray-600 dark:text-gray-400 mb-6">
+                            An unexpected error occurred. Please try refreshing the page.
+                        </p>
+                        {this.state.error && (
+                            <div className="p-3 bg-gray-100 dark:bg-zinc-800 rounded text-sm text-gray-700 dark:text-gray-300 font-mono overflow-auto">
+                                {this.state.error.message}
+                            </div>
+                        )}
+                        <button
+                            onClick={() => window.location.reload()}
+                            className="mt-6 w-full py-2 px-4 bg-blue-600 hover:bg-blue-700 text-white font-medium rounded-lg transition-colors"
+                        >
+                            Refresh Page
+                        </button>
+                    </div>
+                </div>
+            );
+        }
+
+        return this.props.children;
+    }
+}