openswarm/backend/apps/outputs/webapp_template/frontend/src/index.tsx

import React from 'react';
import { createRoot } from 'react-dom/client';
import Main from './app/Main';
import ErrorBoundary from './app/components/ErrorBoundary';

console.log('[App] Bootstrapping React app');
const rootEl = document.getElementById('root');
if (!rootEl) {
  console.error('[App] FATAL: #root element not found in DOM');
} else {
  // Wrap Main in an ErrorBoundary so any runtime crash from agent
  // edits (missing imports, hook-rules violations, etc.) shows a
  // readable error card in the preview pane instead of unmounting
  // to a blank screen. The boundary also forwards the error via
  // console.error + postMessage so the agent sees it on its next
  // turn.
  createRoot(rootEl).render(
    <ErrorBoundary>
      <Main />
    </ErrorBoundary>,
  );
  console.log('[App] React root mounted');
}