@watchforge/browser 0.1.5 → 0.1.7

package/README.md

@@ -7,8 +7,9 @@ Browser, Next.js, React, Node.js, and Express SDK for WatchForge. **One call to
 | Runtime / Framework | Import | What it captures |
 | --- | --- | --- |
 | Browser JavaScript | `@watchforge/browser` | Uncaught errors, unhandled promise rejections, breadcrumbs, browser/device/page/performance context |
-| React | `@watchforge/browser` + `@watchforge/browser/react` | Browser errors plus React `ErrorBoundary` component stack context |
-| Next.js App Router | `@watchforge/browser/next` | Client-side Next.js errors through a client provider; wizard patches the app layout |
+| React / Vite / Vue / Angular | `@watchforge/browser` | Browser errors, unhandled promise rejections, breadcrumbs, replay, browser/device/page/performance context |
+| React | `@watchforge/browser/react` | Optional React `ErrorBoundary` component stack context |
+| Next.js App Router | `@watchforge/browser/next` + `@watchforge/browser/next/server` | Client-side errors, replay, global app render errors, Node runtime unhandled errors, route handler helper |
 | Node.js | `@watchforge/browser` or `@watchforge/browser/node` | `uncaughtException`, `unhandledRejection`, Node runtime/server context |
 | Express.js | `@watchforge/browser/express` | Express request errors, request URL/method/headers/body/query, user/IP, route, duration |
 
@@ -47,7 +48,39 @@ npx @watchforge/browser -i nextjs \
   --replays-on-error 1
 ```
 
-The wizard installs `@watchforge/browser`, writes `watchforge.config.ts`, creates a client init component, and patches `app/layout.tsx` or `pages/_app.tsx`.
+The wizard installs `@watchforge/browser` and writes the files needed for a full Next.js setup:
+
+- `watchforge.config.ts` or `watchforge.config.js`
+- `app/**/watchforge-init.tsx` / `.jsx` for browser errors and session replay
+- `app/**/global-error.tsx` / `.jsx` for Next.js app render errors surfaced through Next's error boundary
+- `src/instrumentation.ts` / `.js` or `instrumentation.ts` / `.js` for server runtime registration
+- patches `app/layout.tsx` / `.jsx` or `pages/_app.tsx` / `.jsx`
+
+For route handlers, wrap handlers with `withWatchForgeRouteHandler` from `@watchforge/browser/next/server`.
+
+## One-line setup for other JavaScript projects
+
+```bash
+# React
+npx @watchforge/browser -i react --dsn "https://PUBLIC_KEY@your-host/PROJECT_ID" --replays-on-error 1
+
+# Vite
+npx @watchforge/browser -i vite --dsn "https://PUBLIC_KEY@your-host/PROJECT_ID" --replays-on-error 1
+
+# Vue
+npx @watchforge/browser -i vue --dsn "https://PUBLIC_KEY@your-host/PROJECT_ID" --replays-on-error 1
+
+# Angular
+npx @watchforge/browser -i angular --dsn "https://PUBLIC_KEY@your-host/PROJECT_ID" --replays-on-error 1
+
+# Express
+npx @watchforge/browser -i express --dsn "https://PUBLIC_KEY@your-host/PROJECT_ID"
+
+# Node.js
+npx @watchforge/browser -i node --dsn "https://PUBLIC_KEY@your-host/PROJECT_ID"
+```
+
+For React/Vite/Vue/Angular, the wizard creates a browser init module and imports it from the detected entry file. For Express and Node.js, it creates a server setup file and prints the one or two lines to add to your server entry because middleware placement depends on each app.
 
 ## Framework Imports
 

package/bin/watchforge.js

@@ -10,10 +10,15 @@ WatchForge setup wizard
 
 Usage:
   npx @watchforge/browser -i nextjs --dsn <dsn> [options]
-  npx @watchforge/browser init nextjs --dsn <dsn> [options]
+  npx @watchforge/browser -i react --dsn <dsn> [options]
+  npx @watchforge/browser -i vite --dsn <dsn> [options]
+  npx @watchforge/browser -i vue --dsn <dsn> [options]
+  npx @watchforge/browser -i angular --dsn <dsn> [options]
+  npx @watchforge/browser -i express --dsn <dsn> [options]
+  npx @watchforge/browser -i node --dsn <dsn> [options]
 
 Options:
-  -i, --integration <name>        Framework integration. Currently: nextjs
+  -i, --integration <name>        Framework integration: nextjs, react, vite, vue, angular, express, node
   --dsn <dsn>                    WatchForge DSN
   --app-env <env>                App environment (default: production)
   --debug                        Enable SDK debug logging
@@ -140,8 +145,58 @@ function writeIfChanged(filePath, content) {
   return true;
 }
 
+function toImportPath(fromDir, targetPath) {
+  let importPath = path.relative(fromDir, targetPath).replace(/\\/g, "/");
+  importPath = importPath.replace(/\.(ts|tsx|js|jsx)$/, "");
+  if (!importPath.startsWith(".")) {
+    importPath = `./${importPath}`;
+  }
+  return importPath;
+}
+
+function toNodeImportPath(fromDir, targetPath) {
+  let importPath = path.relative(fromDir, targetPath).replace(/\\/g, "/");
+  importPath = importPath.replace(/\.(ts|tsx)$/, "");
+  if (!importPath.startsWith(".")) {
+    importPath = `./${importPath}`;
+  }
+  return importPath;
+}
+
+function projectUsesTypeScript(cwd) {
+  if (fileExists(path.join(cwd, "tsconfig.json"))) return true;
+
+  const srcDir = path.join(cwd, "src");
+  if (!fs.existsSync(srcDir) || !fs.statSync(srcDir).isDirectory()) return false;
+
+  const stack = [srcDir];
+  while (stack.length > 0) {
+    const dir = stack.pop();
+    for (const entry of fs.readdirSync(dir, { withFileTypes: true })) {
+      const entryPath = path.join(dir, entry.name);
+      if (entry.isDirectory()) {
+        if (entry.name !== "node_modules" && entry.name !== ".next") {
+          stack.push(entryPath);
+        }
+      } else if (entry.name.endsWith(".ts") || entry.name.endsWith(".tsx")) {
+        return true;
+      }
+    }
+  }
+
+  return false;
+}
+
+function getConfigPath(cwd) {
+  const tsConfig = path.join(cwd, "watchforge.config.ts");
+  const jsConfig = path.join(cwd, "watchforge.config.js");
+  if (fileExists(tsConfig)) return tsConfig;
+  if (fileExists(jsConfig)) return jsConfig;
+  return projectUsesTypeScript(cwd) ? tsConfig : jsConfig;
+}
+
 function createConfig(cwd, args) {
-  const configPath = path.join(cwd, "watchforge.config.ts");
+  const configPath = getConfigPath(cwd);
   const content = `export const watchforgeConfig = {
   dsn: ${JSON.stringify(args.dsn)},
   app_env: ${JSON.stringify(args.appEnv)},
@@ -153,6 +208,7 @@ function createConfig(cwd, args) {
 `;
   writeIfChanged(configPath, content);
   log(`wrote ${path.relative(cwd, configPath)}`);
+  return configPath;
 }
 
 function installPackage(cwd, skipInstall) {
@@ -179,13 +235,12 @@ function installPackage(cwd, skipInstall) {
 
 function patchAppRouter(cwd, layoutPath) {
   const appDir = path.dirname(layoutPath);
-  const configPath = path.join(cwd, "watchforge.config.ts");
-  let configImport = path.relative(appDir, configPath).replace(/\\/g, "/");
-  configImport = configImport.replace(/\.ts$/, "");
-  if (!configImport.startsWith(".")) {
-    configImport = `./${configImport}`;
-  }
-  const initPath = path.join(appDir, "watchforge-init.tsx");
+  const configPath = getConfigPath(cwd);
+  const configImport = toImportPath(appDir, configPath);
+  const initPath = path.join(
+    appDir,
+    projectUsesTypeScript(cwd) ? "watchforge-init.tsx" : "watchforge-init.jsx"
+  );
 
   const initContent = `"use client";
 
@@ -213,10 +268,102 @@ export default function WatchForgeInit() {
   log(`patched ${path.relative(cwd, layoutPath)}`);
 }
 
+function createNextGlobalError(cwd, layoutPath) {
+  const appDir = path.dirname(layoutPath);
+  const usesTs = projectUsesTypeScript(cwd);
+  const globalErrorPath = path.join(appDir, usesTs ? "global-error.tsx" : "global-error.jsx");
+
+  if (fileExists(globalErrorPath)) {
+    const content = fs.readFileSync(globalErrorPath, "utf8");
+    if (content.includes("@watchforge/browser") || content.includes("captureException")) {
+      log(`${path.relative(cwd, globalErrorPath)} already contains WatchForge setup`);
+      return;
+    }
+    log(`skipped ${path.relative(cwd, globalErrorPath)} because it already exists`);
+    log("add captureException(error) there manually to report Next.js render errors");
+    return;
+  }
+
+  const propsSignature = usesTs
+    ? `{\n  error,\n}: {\n  error: Error & { digest?: string };\n}`
+    : `{ error }`;
+
+  const content = `"use client";
+
+import { useEffect } from "react";
+import { captureException } from "@watchforge/browser";
+
+export default function GlobalError(${propsSignature}) {
+  useEffect(() => {
+    void captureException(error, {
+      tags: {
+        framework: "nextjs",
+        runtime: "error-boundary",
+      },
+      extra: {
+        digest: error.digest,
+      },
+      contexts: {
+        nextjs: {
+          error_boundary: "global-error",
+          digest: error.digest || null,
+        },
+      },
+    });
+  }, [error]);
+
+  return (
+    <html>
+      <body>
+        <h2>Something went wrong.</h2>
+      </body>
+    </html>
+  );
+}
+`;
+
+  writeIfChanged(globalErrorPath, content);
+  log(`wrote ${path.relative(cwd, globalErrorPath)}`);
+}
+
+function createNextInstrumentation(cwd, layoutPath) {
+  const appRoot = path.dirname(layoutPath).includes(`${path.sep}src${path.sep}app`)
+    ? path.join(cwd, "src")
+    : cwd;
+  const instrumentationPath = path.join(
+    appRoot,
+    projectUsesTypeScript(cwd) ? "instrumentation.ts" : "instrumentation.js"
+  );
+  const configImport = toImportPath(path.dirname(instrumentationPath), getConfigPath(cwd));
+
+  if (fileExists(instrumentationPath)) {
+    const content = fs.readFileSync(instrumentationPath, "utf8");
+    if (content.includes("@watchforge/browser/next/server")) {
+      log(`${path.relative(cwd, instrumentationPath)} already contains WatchForge setup`);
+      return;
+    }
+    log(`skipped ${path.relative(cwd, instrumentationPath)} because it already exists`);
+    log("add registerWatchForge(watchforgeConfig) there manually to report Next.js server runtime errors");
+    return;
+  }
+
+  const content = `import { register as registerWatchForge } from "@watchforge/browser/next/server";
+import { watchforgeConfig } from "${configImport}";
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === "nodejs") {
+    registerWatchForge(watchforgeConfig);
+  }
+}
+`;
+
+  writeIfChanged(instrumentationPath, content);
+  log(`wrote ${path.relative(cwd, instrumentationPath)}`);
+}
+
 function patchPagesRouter(cwd, appPath) {
   const pagesDir = path.dirname(appPath);
-  const isSrcPages = pagesDir.endsWith(path.join("src", "pages"));
-  const configImport = isSrcPages ? "../../watchforge.config" : "../watchforge.config";
+  const configImport = toImportPath(pagesDir, getConfigPath(cwd));
   const content = fs.readFileSync(appPath, "utf8");
 
   if (content.includes("register(watchforgeConfig)")) {
@@ -237,6 +384,133 @@ ${content.replace(
   log(`patched ${path.relative(cwd, appPath)}`);
 }
 
+function findFirstFile(cwd, candidates) {
+  return candidates.map((candidate) => path.join(cwd, candidate)).find(fileExists) || null;
+}
+
+function prependImportOnce(filePath, importLine) {
+  const content = fs.readFileSync(filePath, "utf8");
+  if (content.includes(importLine)) return false;
+  fs.writeFileSync(filePath, `${importLine}\n${content}`);
+  return true;
+}
+
+function createBrowserInit(cwd, initRelativePath = null) {
+  const defaultPath = projectUsesTypeScript(cwd)
+    ? "src/watchforge-init.ts"
+    : "src/watchforge-init.js";
+  const initPath = path.join(cwd, initRelativePath || defaultPath);
+  const configImport = toImportPath(path.dirname(initPath), getConfigPath(cwd));
+  const content = `import { register } from "@watchforge/browser";
+import { watchforgeConfig } from "${configImport}";
+
+register(watchforgeConfig);
+`;
+
+  writeIfChanged(initPath, content);
+  log(`wrote ${path.relative(cwd, initPath)}`);
+  return initPath;
+}
+
+function initBrowserFramework(args, integration) {
+  const cwd = process.cwd();
+  if (!fileExists(path.join(cwd, "package.json"))) {
+    fail(`run this command from the root of your ${integration} project`);
+  }
+
+  createConfig(cwd, args);
+  installPackage(cwd, args.skipInstall);
+
+  const entryPath = findFirstFile(cwd, [
+    "src/main.tsx",
+    "src/main.jsx",
+    "src/main.ts",
+    "src/main.js",
+    "src/index.tsx",
+    "src/index.jsx",
+    "src/index.ts",
+    "src/index.js",
+    "main.ts",
+    "main.js",
+    "index.ts",
+    "index.js",
+  ]);
+
+  const initPath = createBrowserInit(cwd);
+  if (!entryPath) {
+    log("could not find a browser entry file to patch");
+    log(`import "./${path.relative(cwd, initPath).replace(/\\/g, "/").replace(/\.(ts|js)$/, "")}" from your app entry`);
+    return;
+  }
+
+  const initImport = toImportPath(path.dirname(entryPath), initPath);
+  if (prependImportOnce(entryPath, `import "${initImport}";`)) {
+    log(`patched ${path.relative(cwd, entryPath)}`);
+  } else {
+    log(`${path.relative(cwd, entryPath)} already imports WatchForge`);
+  }
+}
+
+function initExpress(args) {
+  const cwd = process.cwd();
+  if (!fileExists(path.join(cwd, "package.json"))) {
+    fail("run this command from the root of your Express project");
+  }
+
+  createConfig(cwd, args);
+  installPackage(cwd, args.skipInstall);
+
+  const setupPath = path.join(
+    cwd,
+    projectUsesTypeScript(cwd) ? "watchforge-express.ts" : "watchforge-express.js"
+  );
+  const configImport = toNodeImportPath(path.dirname(setupPath), getConfigPath(cwd));
+  const content = `import { register } from "@watchforge/browser/node";
+import {
+  expressMiddleware,
+  expressRequestMiddleware,
+} from "@watchforge/browser/express";
+import { watchforgeConfig } from "${configImport}";
+
+register(watchforgeConfig);
+
+export { expressMiddleware, expressRequestMiddleware };
+`;
+
+  writeIfChanged(setupPath, content);
+  log(`wrote ${path.relative(cwd, setupPath)}`);
+  log("add this near the top of your Express app:");
+  log('  import { expressRequestMiddleware, expressMiddleware } from "./watchforge-express";');
+  log("  app.use(expressRequestMiddleware());");
+  log("and add this after your routes:");
+  log("  app.use(expressMiddleware());");
+}
+
+function initNode(args) {
+  const cwd = process.cwd();
+  if (!fileExists(path.join(cwd, "package.json"))) {
+    fail("run this command from the root of your Node.js project");
+  }
+
+  createConfig(cwd, args);
+  installPackage(cwd, args.skipInstall);
+
+  const setupPath = path.join(
+    cwd,
+    projectUsesTypeScript(cwd) ? "watchforge-node.ts" : "watchforge-node.js"
+  );
+  const configImport = toNodeImportPath(path.dirname(setupPath), getConfigPath(cwd));
+  const content = `import { register } from "@watchforge/browser/node";
+import { watchforgeConfig } from "${configImport}";
+
+register(watchforgeConfig);
+`;
+
+  writeIfChanged(setupPath, content);
+  log(`wrote ${path.relative(cwd, setupPath)}`);
+  log('import "./watchforge-node"; as early as possible in your server entry file');
+}
+
 function initNextjs(args) {
   const cwd = process.cwd();
   if (!fileExists(path.join(cwd, "package.json"))) {
@@ -249,6 +523,8 @@ function initNextjs(args) {
   const layoutPath = findNextLayout(cwd);
   if (layoutPath) {
     patchAppRouter(cwd, layoutPath);
+    createNextGlobalError(cwd, layoutPath);
+    createNextInstrumentation(cwd, layoutPath);
     return;
   }
 
@@ -272,13 +548,24 @@ if (!args.integration) {
   fail("missing integration. Use: -i nextjs");
 }
 
-if (args.integration !== "nextjs") {
-  fail(`unsupported integration "${args.integration}". Currently supported: nextjs`);
-}
-
 if (!args.dsn) {
   fail("missing --dsn");
 }
 
-initNextjs(args);
+const integration = args.integration.toLowerCase();
+
+if (integration === "nextjs" || integration === "next") {
+  initNextjs(args);
+} else if (["react", "vite", "vue", "angular", "browser"].includes(integration)) {
+  initBrowserFramework(args, integration);
+} else if (integration === "express") {
+  initExpress(args);
+} else if (integration === "node" || integration === "nodejs") {
+  initNode(args);
+} else {
+  fail(
+    `unsupported integration "${args.integration}". Supported: nextjs, react, vite, vue, angular, express, node`
+  );
+}
+
 log("setup complete");

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@watchforge/browser",
-  "version": "0.1.5",
+  "version": "0.1.7",
   "main": "./src/index.js",
   "types": "./src/index.d.ts",
   "description": "WatchForge JavaScript SDK for browser JavaScript, Next.js, React, Node.js, and Express.js",

package/src/stacktrace.js

@@ -68,16 +68,21 @@ export function buildStacktraceFromError(error) {
     if (!parsed) continue;
 
     const { function: functionName, file, lineno, colno } = parsed;
-    const filename = file.split("/").pop()?.split("?")[0] || file;
-    const inApp = !isLibraryPath(file);
+    const normalizedPath = normalizeSourcePath(file) || file;
+    const filename =
+      normalizedPath.split("/").pop()?.split("?")[0] ||
+      file.split("/").pop()?.split("?")[0] ||
+      file;
+    const inApp = !isLibraryPath(file) && !isLibraryPath(normalizedPath);
 
     frames.push({
       filename,
-      abs_path: file,
+      abs_path: normalizedPath,
+      raw_abs_path: file,
       lineno,
       colno,
       function: functionName,
-      module: null,
+      module: normalizedPath,
       context_line: null,
       pre_context: [],
       post_context: [],
@@ -198,44 +203,73 @@ async function readNodeSourceLines(absPath) {
 
 async function enrichFrameWithNodeSource(frame) {
   if (!frame.in_app || !frame.lineno) return;
-  const lines = await readNodeSourceLines(frame.abs_path);
+  const lines = await readNodeSourceLines(frame.raw_abs_path || frame.abs_path);
   if (lines) applySourceContext(frame, lines, frame.lineno);
 }
 
-async function fetchBrowserSourceLines(absPath) {
-  if (!isBrowser || !absPath) return null;
+function getBrowserSourceFetchCandidates(absPath, rawAbsPath) {
+  const candidates = new Set();
+  const paths = [absPath, rawAbsPath].filter(Boolean);
 
-  try {
-    let url = absPath;
-    if (url.startsWith("webpack-internal://")) {
-      url = url.replace("webpack-internal:///", "/").replace("webpack-internal://", "/");
+  for (const path of paths) {
+    const normalized = normalizeSourcePath(path);
+    if (!normalized) continue;
+
+    if (path.startsWith("http://") || path.startsWith("https://")) {
+      candidates.add(path);
     }
 
-    if (!url.startsWith("http://") && !url.startsWith("https://")) {
-      if (url.startsWith("/")) {
-        url = `${window.location.origin}${url}`;
-      } else {
-        return null;
-      }
+    if (normalized.startsWith("/")) {
+      candidates.add(`${window.location.origin}${normalized}`);
+    } else {
+      candidates.add(`${window.location.origin}/${normalized}`);
+      candidates.add(new URL(normalized, window.location.href).href);
     }
 
-    const target = new URL(url, window.location.href);
-    if (target.origin !== window.location.origin) return null;
+    if (path.startsWith("webpack-internal://")) {
+      const stripped = path
+        .replace(/^webpack-internal:\/\/\/?/, "/")
+        .replace(/^webpack-internal:\/\//, "/");
+      candidates.add(`${window.location.origin}${stripped}`);
+    }
+  }
 
-    const response = await fetch(target.href, { credentials: "same-origin" });
-    if (!response.ok) return null;
+  return [...candidates];
+}
 
-    const contentType = response.headers.get("content-type") || "";
-    if (!contentType.includes("javascript") && !contentType.includes("text")) {
-      return null;
-    }
+async function fetchBrowserSourceLines(absPath, rawAbsPath) {
+  if (!isBrowser || !absPath) return null;
 
-    const text = await response.text();
-    if (text.length > MAX_SOURCE_FILE_BYTES) return null;
-    return text.split("\n");
-  } catch {
-    return null;
+  const candidates = getBrowserSourceFetchCandidates(absPath, rawAbsPath);
+
+  for (const candidate of candidates) {
+    try {
+      const target = new URL(candidate, window.location.href);
+      if (target.origin !== window.location.origin) continue;
+
+      const response = await fetch(target.href, { credentials: "same-origin" });
+      if (!response.ok) continue;
+
+      const contentType = response.headers.get("content-type") || "";
+      if (
+        !contentType.includes("javascript") &&
+        !contentType.includes("text") &&
+        !contentType.includes("typescript") &&
+        !contentType.includes("json")
+      ) {
+        continue;
+      }
+
+      const text = await response.text();
+      if (text.length > MAX_SOURCE_FILE_BYTES) continue;
+      if (!text.includes("\n") && !text.includes(";") && text.length > 500) continue;
+      return text.split("\n");
+    } catch {
+      // try next candidate
+    }
   }
+
+  return null;
 }
 
 async function getSourceMapConsumer() {
@@ -294,9 +328,55 @@ async function fetchBrowserSourceMap(absPath) {
   }
 }
 
+async function findSourceMapForFrame(frame) {
+  const wanted = normalizeSourcePath(frame.abs_path || frame.module);
+  const scriptUrls = [];
+
+  if (frame.raw_abs_path?.startsWith("http://") || frame.raw_abs_path?.startsWith("https://")) {
+    scriptUrls.push(frame.raw_abs_path);
+  }
+  if (frame.abs_path?.startsWith("http://") || frame.abs_path?.startsWith("https://")) {
+    scriptUrls.push(frame.abs_path);
+  }
+
+  if (isBrowser) {
+    for (const script of document.querySelectorAll("script[src]")) {
+      const src = script.getAttribute("src");
+      if (!src) continue;
+      try {
+        const url = new URL(src, window.location.href);
+        if (url.origin === window.location.origin) {
+          scriptUrls.push(url.href);
+        }
+      } catch {
+        // ignore invalid script src
+      }
+    }
+  }
+
+  const seen = new Set();
+  for (const scriptUrl of scriptUrls) {
+    if (!scriptUrl || seen.has(scriptUrl)) continue;
+    seen.add(scriptUrl);
+
+    const sourceMap = await fetchBrowserSourceMap(scriptUrl);
+    if (!sourceMap) continue;
+
+    const sources = Array.isArray(sourceMap.sources) ? sourceMap.sources : [];
+    const hasMatch = sources.some((source) => sourceMatchesFrame(source, wanted));
+    if (hasMatch || !wanted) {
+      return { sourceMap, scriptUrl };
+    }
+  }
+
+  return null;
+}
+
 async function enrichFrameWithSourceMap(frame) {
-  const sourceMap = await fetchBrowserSourceMap(frame.abs_path);
-  if (!sourceMap) return false;
+  const resolved = await findSourceMapForFrame(frame);
+  if (!resolved) return false;
+
+  const { sourceMap } = resolved;
 
   try {
     const SourceMapConsumer = await getSourceMapConsumer();
@@ -358,7 +438,9 @@ function getSourceContentFromWebpackFrame(frame) {
         value.some((item) => Array.isArray(item) && item.length >= 2)
     ) || [];
 
-  const framePath = normalizeSourcePath(frame.abs_path);
+  const framePath = normalizeSourcePath(
+    frame.abs_path || frame.module || frame.raw_abs_path
+  );
   if (!framePath || !Array.isArray(webpackChunks)) return null;
 
   for (const chunk of webpackChunks) {
@@ -384,7 +466,7 @@ async function enrichFrameWithBrowserSource(frame) {
     if (frame.context_line) return;
   }
 
-  const lines = await fetchBrowserSourceLines(frame.abs_path);
+  const lines = await fetchBrowserSourceLines(frame.abs_path, frame.raw_abs_path);
   if (lines) {
     applySourceContext(frame, lines, frame.lineno);
     if (frame.context_line) return;
@@ -397,12 +479,15 @@ export async function enrichStacktraceAsync(stacktrace) {
   if (!stacktrace?.frames?.length) return stacktrace;
 
   const inAppFrames = stacktrace.frames.filter((f) => f.in_app);
-  const targets = inAppFrames.slice(-5);
+  // Enrich the error frame first (last in-app frame), then nearby frames.
+  const targets = [...inAppFrames.slice(-5)].reverse();
 
   if (isNode) {
     await Promise.all(targets.map((frame) => enrichFrameWithNodeSource(frame)));
   } else if (isBrowser) {
-    await Promise.all(targets.map((frame) => enrichFrameWithBrowserSource(frame)));
+    for (const frame of targets) {
+      await enrichFrameWithBrowserSource(frame);
+    }
   }
 
   return stacktrace;