debug

Author: ericdallo

src/pages/RemoteSession.tsx

@@ -1,9 +1,53 @@
-import { useCallback, useEffect, useRef, useState } from 'react';
+import { Component, useCallback, useEffect, useRef, useState } from 'react';
+import type { ErrorInfo, ReactNode } from 'react';
 import { WebBridge } from '../bridge/transport';
 import type { Protocol } from '../bridge/utils';
 import WebviewApp from '@webview/App';
 import './RemoteSession.css';
 
+/** Error boundary to catch crashes in RemoteSession / WebviewApp. */
+class SessionErrorBoundary extends Component<
+  { children: ReactNode },
+  { error: Error | null }
+> {
+  state: { error: Error | null } = { error: null };
+
+  static getDerivedStateFromError(error: Error) {
+    return { error };
+  }
+
+  componentDidCatch(error: Error, info: ErrorInfo) {
+    console.error('[SessionErrorBoundary]', error, info.componentStack);
+  }
+
+  render() {
+    if (this.state.error) {
+      return (
+        <div style={{
+          padding: '24px', color: '#f44', fontFamily: 'monospace',
+          fontSize: '13px', background: '#12121e', flex: 1, overflow: 'auto',
+        }}>
+          <h3 style={{ color: '#ff6', margin: '0 0 12px' }}>Session crashed</h3>
+          <div style={{ marginBottom: '8px' }}><b>{this.state.error.name}:</b> {this.state.error.message}</div>
+          <pre style={{ whiteSpace: 'pre-wrap', color: '#888', fontSize: '11px' }}>
+            {this.state.error.stack}
+          </pre>
+          <button
+            onClick={() => this.setState({ error: null })}
+            style={{
+              marginTop: '16px', padding: '8px 16px', background: '#22223a',
+              color: '#e0e4ea', border: '1px solid #2a2a3e', borderRadius: '4px', cursor: 'pointer',
+            }}
+          >
+            Retry
+          </button>
+        </div>
+      );
+    }
+    return this.props.children;
+  }
+}
+
 export type SessionStatus = 'connecting' | 'connected' | 'error';
 
 interface RemoteSessionProps {
@@ -85,32 +129,23 @@ export function RemoteSession({ host, password, protocol, onStatusChange, onBrid
     </div>
   );
 
-  if (state.status === 'connected') {
-    return (
-      <div className="remote-session">
-        <WebviewApp />
-        {debugBanner}
-      </div>
-    );
-  }
-
-  if (state.status === 'error') {
-    return (
-      <div className="remote-session-status">
-        <div className="remote-session-error">
-          <i className="codicon codicon-warning" />
-          <span>{state.message}</span>
-        </div>
-        <button className="remote-session-retry" onClick={connect}>
-          Retry
-        </button>
-        {debugBanner}
+  const content = state.status === 'connected' ? (
+    <div className="remote-session">
+      <WebviewApp />
+      {debugBanner}
+    </div>
+  ) : state.status === 'error' ? (
+    <div className="remote-session-status">
+      <div className="remote-session-error">
+        <i className="codicon codicon-warning" />
+        <span>{state.message}</span>
       </div>
-    );
-  }
-
-  // Connecting
-  return (
+      <button className="remote-session-retry" onClick={connect}>
+        Retry
+      </button>
+      {debugBanner}
+    </div>
+  ) : (
     <div className="remote-session-status">
       <div className="remote-session-connecting">
         <div className="remote-session-spinner" />
@@ -119,4 +154,6 @@ export function RemoteSession({ host, password, protocol, onStatusChange, onBrid
       {debugBanner}
     </div>
   );
+
+  return <SessionErrorBoundary>{content}</SessionErrorBoundary>;
 }