feat: Add source map images to debug_meta

Author: Luca Forstner

packages/browser/test/unit/tracekit/firefox.test.ts

@@ -595,7 +595,7 @@ describe('Tracekit - Firefox Tests', () => {
           {
             colno: 1018410,
             filename: 'https://www.random_website.com/main.4a4119c3cdfd10266d84.js',
-            abs_path: 'https://www.random_website.com/vendor.d1cae9cfc9917df88de7.js',
+            abs_path: 'https://www.random_website.com/main.4a4119c3cdfd10266d84.js',
             function: 'handleProfileResult',
             in_app: true,
             lineno: 146,

packages/browser/test/unit/tracekit/misc.test.ts

@@ -34,8 +34,8 @@ describe('Tracekit - Misc Tests', () => {
             in_app: true,
           },
           {
-            filename: 'http:///path/to/file.js',
-            abs_path: 'http:///path/to/file.js',
+            filename: 'file:///path/to/file.js',
+            abs_path: 'file:///path/to/file.js',
             function: '?',
             lineno: 878,
             in_app: true,

packages/core/src/utils/prepareEvent.ts

@@ -1,5 +1,5 @@
-import type { ClientOptions, Event, EventHint } from '@sentry/types';
-import { dateTimestampInSeconds, normalize, resolvedSyncPromise, truncate, uuid4 } from '@sentry/utils';
+import type { ClientOptions, Event, EventHint, StackParser } from '@sentry/types';
+import { dateTimestampInSeconds, GLOBAL_OBJ, normalize, resolvedSyncPromise, truncate, uuid4 } from '@sentry/utils';
 
 import { Scope } from '../scope';
 
@@ -36,6 +36,7 @@ export function prepareEvent(
 
   applyClientOptions(prepared, options);
   applyIntegrationsMetadata(prepared, integrations);
+  applyDebugMetadata(prepared, options.stackParser);
 
   // If we have scope given to us, use it as the base for further modifications.
   // This allows us to prevent unnecessary copying of data if `captureContext` is not provided.
@@ -112,6 +113,54 @@ function applyClientOptions(event: Event, options: ClientOptions): void {
   }
 }
 
+/**
+ * Applies debug metadata images to the event in order to apply source maps by looking up their debug ID.
+ */
+function applyDebugMetadata(event: Event, stackParser: StackParser): void {
+  const debugIdMap = GLOBAL_OBJ._sentryDebugIds;
+  if (debugIdMap) {
+    // Build a map of abs_path -> debug_id
+    const absPathDebugIdMap: Record<string, string> = {};
+    Object.keys(debugIdMap).forEach(debugIdStackTrace => {
+      const parsedStack = stackParser(debugIdStackTrace);
+      for (const stackFrame of parsedStack) {
+        if (stackFrame.abs_path) {
+          absPathDebugIdMap[stackFrame.abs_path] = debugIdMap[debugIdStackTrace];
+          break;
+        }
+      }
+    });
+
+    // Get a Set of abs_paths in the stack trace
+    const errorAbsPaths = new Set<string>();
+    if (event && event.exception && event.exception.values) {
+      event.exception.values.forEach(exception => {
+        if (exception.stacktrace && exception.stacktrace.frames) {
+          exception.stacktrace.frames.forEach(frame => {
+            if (frame.abs_path) {
+              errorAbsPaths.add(frame.abs_path);
+            }
+          });
+        }
+      });
+    }
+
+    // Fill debug_meta information
+    event.debug_meta = event.debug_meta || {};
+    event.debug_meta.images = event.debug_meta.images || [];
+    const images = event.debug_meta.images;
+    errorAbsPaths.forEach(absPath => {
+      if (absPathDebugIdMap[absPath]) {
+        images.push({
+          type: 'sourcemap',
+          source_filename: absPath,
+          debug_id: absPathDebugIdMap[absPath],
+        });
+      }
+    });
+  }
+}
+
 /**
  * This function adds all used integrations to the SDK info in the event.
  * @param event The event that will be filled with all integrations.

packages/types/src/debugMeta.ts

@@ -5,18 +5,18 @@ export interface DebugMeta {
   images?: Array<DebugImage>;
 }
 
-/**
- * Possible choices for debug images.
- */
-export type DebugImageType = 'wasm' | 'macho' | 'elf' | 'pe';
+export type DebugImage = WasmDebugImage | SourceMapDebugImage;
 
-/**
- * References to debug images.
- */
-export interface DebugImage {
-  type: DebugImageType;
+interface WasmDebugImage {
+  type: 'wasm';
   debug_id: string;
   code_id?: string | null;
   code_file: string;
   debug_file?: string | null;
 }
+
+interface SourceMapDebugImage {
+  type: 'sourcemap';
+  source_filename: string; // abs_path
+  debug_id: string; // uuid
+}

packages/types/src/index.ts

@@ -5,7 +5,7 @@ export type { ClientReport, Outcome, EventDropReason } from './clientreport';
 export type { Context, Contexts, DeviceContext, OsContext, AppContext, CultureContext, TraceContext } from './context';
 export type { DataCategory } from './datacategory';
 export type { DsnComponents, DsnLike, DsnProtocol } from './dsn';
-export type { DebugImage, DebugImageType, DebugMeta } from './debugMeta';
+export type { DebugImage, DebugMeta } from './debugMeta';
 export type {
   AttachmentItem,
   BaseEnvelopeHeaders,

packages/utils/src/stacktrace.ts

@@ -1,14 +1,7 @@
 import type { StackFrame, StackLineParser, StackLineParserFn, StackParser } from '@sentry/types';
 
-import { GLOBAL_OBJ } from './worldwide';
-
 const STACKTRACE_LIMIT = 50;
 
-type DebugIdFilename = string;
-type DebugId = string;
-
-const debugIdParserCache = new Map<StackLineParserFn, Map<DebugIdFilename, DebugId>>();
-
 /**
  * Creates a stack parser with the supplied line parsers
  *
@@ -21,29 +14,6 @@ export function createStackParser(...parsers: StackLineParser[]): StackParser {
 
   return (stack: string, skipFirst: number = 0): StackFrame[] => {
     const frames: StackFrame[] = [];
-
-    for (const parser of sortedParsers) {
-      let debugIdCache = debugIdParserCache.get(parser);
-      if (!debugIdCache) {
-        debugIdCache = new Map();
-        debugIdParserCache.set(parser, debugIdCache);
-      }
-
-      const debugIdMap = GLOBAL_OBJ._sentryDebugIds;
-
-      if (debugIdMap) {
-        Object.keys(debugIdMap).forEach(debugIdStackTrace => {
-          debugIdStackTrace.split('\n').forEach(line => {
-            const frame = parser(line);
-            if (frame && frame.filename) {
-              // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
-              debugIdCache!.set(frame.filename, debugIdMap[debugIdStackTrace]);
-            }
-          });
-        });
-      }
-    }
-
     for (const line of stack.split('\n').slice(skipFirst)) {
       // Ignore lines over 1kb as they are unlikely to be stack frames.
       // Many of the regular expressions use backtracking which results in run time that increases exponentially with
@@ -61,14 +31,6 @@ export function createStackParser(...parsers: StackLineParser[]): StackParser {
         const frame = parser(cleanedLine);
 
         if (frame) {
-          const debugIdCache = debugIdParserCache.get(parser);
-          if (debugIdCache && frame.filename) {
-            const cachedDebugId = debugIdCache.get(frame.filename);
-            if (cachedDebugId) {
-              frame.debug_id = cachedDebugId;
-            }
-          }
-
           frames.push(frame);
           break;
         }

packages/utils/test/stacktrace.test.ts

@@ -69,41 +69,3 @@ describe('Stacktrace', () => {
     });
   });
 });
-
-describe('Stack parsers created with createStackParser', () => {
-  afterEach(() => {
-    GLOBAL_OBJ._sentryDebugIds = undefined;
-  });
-
-  it('put debug ids onto individual frames', () => {
-    GLOBAL_OBJ._sentryDebugIds = {
-      'filename1.js\nfilename1.js': 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaa',
-      'filename2.js\nfilename2.js': 'bbbbbbbb-bbbb-4bbb-bbbb-bbbbbbbbbb',
-    };
-
-    const fakeErrorStack = 'filename1.js\nfilename2.js\nfilename1.js\nfilename3.js';
-    const stackParser = createStackParser([0, line => ({ filename: line })]);
-
-    const result = stackParser(fakeErrorStack);
-
-    expect(result[0]).toStrictEqual({ filename: 'filename3.js', function: '?' });
-
-    expect(result[1]).toStrictEqual({
-      filename: 'filename1.js',
-      function: '?',
-      debug_id: 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaa',
-    });
-
-    expect(result[2]).toStrictEqual({
-      filename: 'filename2.js',
-      function: '?',
-      debug_id: 'bbbbbbbb-bbbb-4bbb-bbbb-bbbbbbbbbb',
-    });
-
-    expect(result[3]).toStrictEqual({
-      filename: 'filename1.js',
-      function: '?',
-      debug_id: 'aaaaaaaa-aaaa-4aaa-aaaa-aaaaaaaaaa',
-    });
-  });
-});

packages/wasm/src/index.ts

@@ -61,7 +61,7 @@ export class Wasm implements Integration {
 
       if (haveWasm) {
         event.debug_meta = event.debug_meta || {};
-        event.debug_meta.images = getImages();
+        event.debug_meta.images = [...(event.debug_meta.images || []), ...getImages()];
       }
 
       return event;

packages/wasm/src/registry.ts

@@ -41,7 +41,7 @@ export function getModuleInfo(module: WebAssembly.Module): ModuleInfo {
 export function registerModule(module: WebAssembly.Module, url: string): void {
   const { buildId, debugFile } = getModuleInfo(module);
   if (buildId) {
-    const oldIdx = IMAGES.findIndex(img => img.code_file === url);
+    const oldIdx = getImage(url);
     if (oldIdx >= 0) {
       IMAGES.splice(oldIdx, 1);
     }
@@ -68,5 +68,11 @@ export function getImages(): Array<DebugImage> {
  * @param url the URL of the WebAssembly module.
  */
 export function getImage(url: string): number {
-  return IMAGES.findIndex(img => img.code_file === url);
+  return IMAGES.findIndex(image => {
+    if (image.type === 'wasm') {
+      return image.code_file === url;
+    } else {
+      return false;
+    }
+  });
 }