/
/
/
1import React, { Component, ErrorInfo, ReactNode } from 'react';
2import ReactDOM from 'react-dom/client';
3import App from './App';
4import './index.css';
5
6// Error boundary for graceful error handling
7class ErrorBoundary extends Component<
8 { children: ReactNode },
9 { hasError: boolean; error?: Error }
10> {
11 constructor(props: { children: ReactNode }) {
12 super(props);
13 this.state = { hasError: false };
14 }
15
16 static getDerivedStateFromError(error: Error) {
17 return { hasError: true, error };
18 }
19
20 componentDidCatch(error: Error, errorInfo: ErrorInfo) {
21 console.error('Error boundary caught an error:', error, errorInfo);
22 }
23
24 render() {
25 if (this.state.hasError) {
26 return (
27 <div className="min-h-screen bg-gray-100 flex items-center justify-center">
28 <div className="bg-white rounded-lg shadow-md p-8 max-w-md mx-auto">
29 <div className="text-center">
30 <div className="text-red-500 mb-4">
31 <svg className="mx-auto h-16 w-16" fill="currentColor" viewBox="0 0 20 20">
32 <path fillRule="evenodd" d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7 4a1 1 0 11-2 0 1 1 0 012 0zm-1-9a1 1 0 00-1 1v4a1 1 0 102 0V6a1 1 0 00-1-1z" clipRule="evenodd" />
33 </svg>
34 </div>
35 <h2 className="text-xl font-semibold text-gray-900 mb-2">
36 Something went wrong
37 </h2>
38 <p className="text-gray-600 mb-4">
39 The application encountered an unexpected error.
40 </p>
41 <button
42 onClick={() => window.location.reload()}
43 className="px-4 py-2 bg-blue-600 text-white rounded-md hover:bg-blue-700 transition-colors"
44 >
45 Reload Page
46 </button>
47 {this.state.error && (
48 <details className="mt-4 text-left">
49 <summary className="text-sm text-gray-500 cursor-pointer">
50 Error Details
51 </summary>
52 <pre className="mt-2 text-xs text-gray-700 bg-gray-100 p-2 rounded overflow-auto">
53 {this.state.error.toString()}
54 </pre>
55 </details>
56 )}
57 </div>
58 </div>
59 </div>
60 );
61 }
62
63 return this.props.children;
64 }
65}
66
67// Development mode checks
68if (import.meta.env.DEV) {
69 console.log('ROS2 Bag Recorder Frontend - Development Mode');
70 console.log('Environment:', import.meta.env);
71}
72
73// Create root and render app
74const rootElement = document.getElementById('root');
75if (!rootElement) {
76 throw new Error('Root element not found');
77}
78
79const root = ReactDOM.createRoot(rootElement);
80
81root.render(
82 <React.StrictMode>
83 <ErrorBoundary>
84 <App />
85 </ErrorBoundary>
86 </React.StrictMode>
87);