@watchforge/browser 0.1.13 → 0.1.14

package/package.json

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

@@ -538,6 +538,37 @@ async function fetchBrowserSourceMap(absPath) {
   }
 }
 
+function parseDataSourceMap(sourceMappingUrl) {
+  if (!sourceMappingUrl?.startsWith("data:")) return null;
+
+  try {
+    const commaIndex = sourceMappingUrl.indexOf(",");
+    if (commaIndex === -1) return null;
+
+    const metadata = sourceMappingUrl.slice(0, commaIndex);
+    const payload = sourceMappingUrl.slice(commaIndex + 1);
+    const json = metadata.includes(";base64")
+      ? decodeURIComponent(escape(atob(payload)))
+      : decodeURIComponent(payload);
+    return JSON.parse(json);
+  } catch {
+    return null;
+  }
+}
+
+function findInlineSourceMap(sourceText) {
+  if (!sourceText || typeof sourceText !== "string") return null;
+
+  const sourceMapPattern = /\/\/# sourceMappingURL=([^\s"'\\)]+)/g;
+  let match;
+  while ((match = sourceMapPattern.exec(sourceText))) {
+    const sourceMap = parseDataSourceMap(match[1]);
+    if (sourceMap) return sourceMap;
+  }
+
+  return null;
+}
+
 async function findSourceMapForFrame(frame) {
   const wanted = normalizeSourcePath(frame.abs_path || frame.module);
   const scriptUrls = [];
@@ -582,16 +613,31 @@ async function findSourceMapForFrame(frame) {
   return null;
 }
 
-async function enrichFrameWithSourceMap(frame) {
-  const resolved = await findSourceMapForFrame(frame);
-  if (!resolved) return false;
-
-  const { sourceMap } = resolved;
-
+async function applySourceMapToFrame(frame, sourceMap) {
   try {
     const SourceMapConsumer = await getSourceMapConsumer();
     if (!SourceMapConsumer) return false;
 
+    const sources = Array.isArray(sourceMap.sources) ? sourceMap.sources : [];
+    const contents = Array.isArray(sourceMap.sourcesContent)
+      ? sourceMap.sourcesContent
+      : [];
+    const matchedSourceIndex = sources.findIndex((candidate) =>
+      sourceMatchesFrame(candidate, frame.abs_path || frame.module || frame.raw_abs_path)
+    );
+
+    if (matchedSourceIndex >= 0 && contents[matchedSourceIndex]) {
+      const source = sources[matchedSourceIndex];
+      const sourceLines = contents[matchedSourceIndex].split("\n");
+      const originalLine = frame.lineno;
+      if (originalLine && originalLine <= sourceLines.length) {
+        frame.abs_path = source;
+        frame.filename = normalizeSourcePath(source).split("/").pop() || frame.filename;
+        applySourceContext(frame, sourceLines, originalLine);
+        if (frame.context_line) return true;
+      }
+    }
+
     const consumer = await new SourceMapConsumer(sourceMap);
     let source = null;
     let lineno = frame.lineno;
@@ -639,28 +685,49 @@ async function enrichFrameWithSourceMap(frame) {
   }
 }
 
-function getSourceContentFromWebpackFrame(frame) {
-  const globalObject = typeof globalThis !== "undefined" ? globalThis : window;
-  const webpackChunks =
-    Object.values(globalObject).find(
-      (value) =>
-        Array.isArray(value) &&
-        value.some((item) => Array.isArray(item) && item.length >= 2)
-    ) || [];
+async function enrichFrameWithSourceMap(frame) {
+  const resolved = await findSourceMapForFrame(frame);
+  if (!resolved) return false;
 
+  return applySourceMapToFrame(frame, resolved.sourceMap);
+}
+
+function getWebpackChunkGlobals(globalObject) {
+  return Object.entries(globalObject)
+    .filter(([, value]) => Array.isArray(value))
+    .sort(([nameA], [nameB]) => {
+      const score = (name) => (name.startsWith("webpackChunk") ? 0 : 1);
+      return score(nameA) - score(nameB);
+    })
+    .map(([, value]) => value);
+}
+
+function getWebpackFrameArtifacts(frame) {
+  const globalObject = typeof globalThis !== "undefined" ? globalThis : window;
   const framePath = normalizeSourcePath(
     frame.abs_path || frame.module || frame.raw_abs_path
   );
-  if (!framePath || !Array.isArray(webpackChunks)) return null;
-
-  for (const chunk of webpackChunks) {
-    const modules = Array.isArray(chunk) ? chunk[1] : null;
-    if (!modules || typeof modules !== "object") continue;
+  if (!framePath) return null;
+
+  for (const webpackChunks of getWebpackChunkGlobals(globalObject)) {
+    for (const chunk of webpackChunks) {
+      const modules = Array.isArray(chunk) ? chunk[1] : null;
+      if (!modules || typeof modules !== "object") continue;
+
+      for (const [moduleId, factory] of Object.entries(modules)) {
+        const factorySource = String(factory);
+        if (
+          !sourceMatchesFrame(moduleId, framePath) &&
+          !sourceMatchesFrame(factorySource.match(/sourceURL=([^\s"'\\)]+)/)?.[1], framePath)
+        ) {
+          continue;
+        }
 
-    for (const [moduleId, factory] of Object.entries(modules)) {
-      if (!sourceMatchesFrame(moduleId, framePath)) continue;
-      const source = String(factory);
-      return source.includes("\n") ? source.split("\n") : null;
+        return {
+          lines: factorySource.includes("\n") ? factorySource.split("\n") : null,
+          sourceMap: findInlineSourceMap(factorySource),
+        };
+      }
     }
   }
 
@@ -670,9 +737,14 @@ function getSourceContentFromWebpackFrame(frame) {
 async function enrichFrameWithBrowserSource(frame) {
   if (!frame.in_app || !frame.lineno) return;
 
-  const webpackLines = getSourceContentFromWebpackFrame(frame);
-  if (webpackLines) {
-    applySourceContext(frame, webpackLines, frame.lineno);
+  const webpackArtifacts = getWebpackFrameArtifacts(frame);
+  if (webpackArtifacts?.sourceMap) {
+    const applied = await applySourceMapToFrame(frame, webpackArtifacts.sourceMap);
+    if (applied) return;
+  }
+
+  if (webpackArtifacts?.lines) {
+    applySourceContext(frame, webpackArtifacts.lines, frame.lineno);
     if (frame.context_line) return;
   }