Update main.js

main.js

@@ -3,11 +3,11 @@ import ReactDOM from 'react-dom/client'
 import App from './cointube'
 import './index.css'
 
-// Trampa de errores global
+// Componente para atrapar errores y evitar la pantalla blanca de la muerte
 class ErrorBoundary extends React.Component {
   constructor(props) {
     super(props);
-    this.state = { hasError: false, error: null };
+    this.state = { hasError: false, error: null, errorInfo: null };
   }
 
   static getDerivedStateFromError(error) {
@@ -15,16 +15,23 @@ class ErrorBoundary extends React.Component {
   }
 
   componentDidCatch(error, errorInfo) {
-    console.error("Error atrapado:", error, errorInfo);
+    console.error("Error atrapado en la App:", error, errorInfo);
+    this.setState({ errorInfo });
   }
 
   render() {
     if (this.state.hasError) {
       return (
-        <div style={{ padding: '20px', color: 'red', backgroundColor: '#ffebee' }}>
-          <h1>⚠️ Algo salió mal</h1>
-          <pre>{this.state.error?.toString()}</pre>
-          <p>Abre la consola (F12) para más detalles.</p>
+        <div className="min-h-screen bg-gray-900 text-white flex flex-col items-center justify-center p-4">
+          <div className="bg-red-900/50 p-6 rounded-lg border border-red-500 max-w-2xl w-full">
+            <h1 className="text-2xl font-bold mb-4 text-red-300">⚠️ Algo salió mal</h1>
+            <p className="mb-4">La aplicación ha encontrado un error crítico.</p>
+            <div className="bg-black p-4 rounded overflow-auto text-sm font-mono">
+              <p className="text-red-400 font-bold">{this.state.error && this.state.error.toString()}</p>
+              <br/>
+              <p className="text-gray-500">{this.state.errorInfo && this.state.errorInfo.componentStack}</p>
+            </div>
+          </div>
         </div>
       );
     }