feat(docs-infra): forward preview error locations

Intercept the WebContainer preview overlay open-in-editor requests and relay them to the editor via postMessage so errors open the matching file.

Author: kirjs

adev/shared-docs/testing/testing-helper.ts

@@ -111,6 +111,8 @@ export class FakeWebContainer extends WebContainer {
   override teardown() {}
 
   override fs: FakeFileSystemAPI = new FakeFileSystemAPI();
+
+  override async setPreviewScript(script: string): Promise<void> {}
 }
 
 class FakeFileSystemAPI implements FileSystemAPI {

adev/src/app/editor/code-editor/code-editor.component.ts

@@ -120,12 +120,68 @@ export class CodeEditor {
 
         this.listenToTabChange();
         this.setSelectedTabOnTutorialChange();
+        this.listenToFileOpenRequests();
       });
 
       cleanupFn(() => this.codeMirrorEditor.disable());
     });
   }
 
+  private listenToFileOpenRequests() {
+    // Handler for opening files at specific locations
+    const openFile = (file: string, line: number, character: number) => {
+      // Normalize the file path - Vite uses /app/... but editor uses src/app/...
+      let normalizedPath = file;
+      if (file.startsWith('/')) {
+        // Remove leading slash and prepend 'src'
+        normalizedPath = 'src' + file;
+      }
+
+      // Find the file in the files list
+      const targetFile = this.files().find((f) => f.filename === normalizedPath);
+      if (targetFile) {
+        // Switch to the file's tab
+        const fileIndex = this.files().indexOf(targetFile);
+        this.matTabGroup().selectedIndex = fileIndex;
+
+        // Explicitly change the current file in the editor
+        this.codeMirrorEditor.changeCurrentFile(targetFile.filename);
+
+        // Wait for the tab to switch and file to load, then scroll to the line
+        setTimeout(() => {
+          this.codeMirrorEditor.scrollToLine(line - 1, character); // Convert to 0-based
+        }, 200);
+      } else {
+        // console.warn('File not found in editor:', normalizedPath);
+      }
+    };
+
+    // Listen for CustomEvent (backward compatibility)
+    const handleCustomEvent = (event: Event) => {
+      const customEvent = event as CustomEvent<{file: string; line: number; character: number}>;
+      const {file, line, character} = customEvent.detail;
+      openFile(file, line, character);
+    };
+
+    // Listen for postMessage from preview iframe (Vite error overlay)
+    const handlePostMessage = (event: MessageEvent) => {
+      // Check if this is an openFileAtLocation message
+      if (event.data?.type === 'openFileAtLocation') {
+        const {file, line, character} = event.data;
+        openFile(file, line, character);
+      }
+    };
+
+    window.addEventListener('openFileAtLocation', handleCustomEvent);
+    window.addEventListener('message', handlePostMessage);
+
+    // Cleanup listeners on destroy
+    this.destroyRef.onDestroy(() => {
+      window.removeEventListener('openFileAtLocation', handleCustomEvent);
+      window.removeEventListener('message', handlePostMessage);
+    });
+  }
+
   protected openCurrentSolutionInFirebaseStudio(): void {
     this.firebaseStudioLauncher.openCurrentSolutionInFirebaseStudio();
   }

adev/src/app/editor/error-filename-handler.ts

@@ -0,0 +1,38 @@
+/**
+ * @license
+ * Copyright Google LLC All Rights Reserved.
+ *
+ * Use of this source code is governed by an MIT-style license that can be
+ * found in the LICENSE file at https://angular.dev/license
+ */
+
+import {WebContainer} from '@webcontainer/api';
+
+function errorFilenameHandler() {
+  const originalFetch = window.fetch;
+  window.fetch = async (input, init) => {
+    const url = input.toString();
+    if (url.includes('__open-in-editor')) {
+      const params = new URLSearchParams(url.split('?')[1]);
+      const file = params.get('file');
+      if (file) {
+        const [filepath, line, column] = file.split(':');
+        window.parent.postMessage(
+          {
+            type: 'openFileAtLocation',
+            file: filepath,
+            line: parseInt(line, 10),
+            character: parseInt(column, 10),
+          },
+          '*',
+        );
+      }
+      return new Response(null, {status: 200});
+    }
+    return originalFetch(input, init);
+  };
+}
+
+export async function setupErrorFilenameHandler(webContainer: WebContainer): Promise<void> {
+  await webContainer.setPreviewScript(`(${errorFilenameHandler.toString()})()`);
+}

adev/src/app/editor/node-runtime-sandbox.service.ts

@@ -8,6 +8,7 @@
 
 import {DestroyRef, effect, inject, Injectable, signal} from '@angular/core';
 import {FileSystemTree, WebContainer, WebContainerProcess} from '@webcontainer/api';
+import {setupErrorFilenameHandler} from './error-filename-handler';
 import {BehaviorSubject, filter, map, Subject} from 'rxjs';
 
 import {type FileAndContent, TutorialType, checkFilesInDirectory} from '@angular/docs';
@@ -398,6 +399,8 @@ export class NodeRuntimeSandbox {
 
       this.setErrorState(message, ErrorType.UNKNOWN);
     });
+
+    await setupErrorFilenameHandler(webContainer);
   }
 
   private checkForOutOfMemoryError(message: string): boolean {