feat: catch errors from web container preview and show in actionable alert so user can send them to AI for fixing (#856)

* Catch errors from web container

* Show fix error popup on errors in preview

* Remove unneeded action type

* PR comments

* Cleanup urls in stacktrace

---------

Co-authored-by: Anirban Kar <thecodacus@gmail.com>

app/lib/webcontainer/index.ts

@@ -1,5 +1,6 @@
 import { WebContainer } from '@webcontainer/api';
 import { WORK_DIR_NAME } from '~/utils/constants';
+import { cleanStackTrace } from '~/utils/stacktrace';
 
 interface WebContainerContext {
   loaded: boolean;
@@ -22,10 +23,33 @@ if (!import.meta.env.SSR) {
     import.meta.hot?.data.webcontainer ??
     Promise.resolve()
       .then(() => {
-        return WebContainer.boot({ workdirName: WORK_DIR_NAME });
+        return WebContainer.boot({
+          workdirName: WORK_DIR_NAME,
+          forwardPreviewErrors: true, // Enable error forwarding from iframes
+        });
       })
-      .then((webcontainer) => {
+      .then(async (webcontainer) => {
         webcontainerContext.loaded = true;
+
+        const { workbenchStore } = await import('~/lib/stores/workbench');
+
+        // Listen for preview errors
+        webcontainer.on('preview-message', (message) => {
+          console.log('WebContainer preview message:', message);
+
+          // Handle both uncaught exceptions and unhandled promise rejections
+          if (message.type === 'PREVIEW_UNCAUGHT_EXCEPTION' || message.type === 'PREVIEW_UNHANDLED_REJECTION') {
+            const isPromise = message.type === 'PREVIEW_UNHANDLED_REJECTION';
+            workbenchStore.actionAlert.set({
+              type: 'preview',
+              title: isPromise ? 'Unhandled Promise Rejection' : 'Uncaught Exception',
+              description: message.message,
+              content: `Error occurred at ${message.pathname}${message.search}${message.hash}\nPort: ${message.port}\n\nStack trace:\n${cleanStackTrace(message.stack || '')}`,
+              source: 'preview',
+            });
+          }
+        });
+
         return webcontainer;
       });