Backup: 2025-06-07 19:48 - Script test

[Restore from backup: vip-coordinator-backup-2025-06-07-19-48-script-test]

frontend/src/components/AsyncErrorBoundary.tsx

@@ -0,0 +1,72 @@
+import React, { Component, ReactNode } from 'react';
+
+interface Props {
+  children: ReactNode;
+  onError?: (error: Error) => void;
+}
+
+interface State {
+  hasError: boolean;
+  error: Error | null;
+}
+
+export class AsyncErrorBoundary extends Component<Props, State> {
+  state: State = {
+    hasError: false,
+    error: null
+  };
+
+  static getDerivedStateFromError(error: Error): State {
+    return {
+      hasError: true,
+      error
+    };
+  }
+
+  componentDidCatch(error: Error) {
+    console.error('AsyncErrorBoundary caught an error:', error);
+    this.props.onError?.(error);
+  }
+
+  retry = () => {
+    this.setState({ hasError: false, error: null });
+  };
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
+          <div className="flex items-center">
+            <svg
+              className="w-5 h-5 text-red-400 mr-2"
+              fill="none"
+              stroke="currentColor"
+              viewBox="0 0 24 24"
+            >
+              <path
+                strokeLinecap="round"
+                strokeLinejoin="round"
+                strokeWidth={2}
+                d="M12 8v4m0 4h.01M21 12a9 9 0 11-18 0 9 9 0 0118 0z"
+              />
+            </svg>
+            <h3 className="text-sm font-medium text-red-800">
+              Failed to load data
+            </h3>
+          </div>
+          <p className="mt-2 text-sm text-red-700">
+            {this.state.error?.message || 'An unexpected error occurred'}
+          </p>
+          <button
+            onClick={this.retry}
+            className="mt-3 text-sm text-red-600 hover:text-red-500 underline"
+          >
+            Try again
+          </button>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}