@watchforge/browser 0.1.5 → 0.1.6

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@watchforge/browser",
-  "version": "0.1.5",
+  "version": "0.1.6",
   "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;