Merge branch 'develop' into kw-rn-profiling-share-code

Author: krystofwoldrich

packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/init.js

@@ -4,9 +4,7 @@ window.Sentry = Sentry;
 window.Replay = new Sentry.Replay({
   flushMinDelay: 500,
   flushMaxDelay: 500,
-  _experiments: {
-    mutationLimit: 250,
-  },
+  mutationLimit: 250,
 });
 
 Sentry.init({

packages/browser-integration-tests/suites/replay/largeMutations/mutationLimit/test.ts

@@ -1,10 +1,15 @@
 import { expect } from '@playwright/test';
 
 import { sentryTest } from '../../../../utils/fixtures';
-import { getReplayRecordingContent, shouldSkipReplayTest, waitForReplayRequest } from '../../../../utils/replayHelpers';
+import {
+  getReplayRecordingContent,
+  getReplaySnapshot,
+  shouldSkipReplayTest,
+  waitForReplayRequest,
+} from '../../../../utils/replayHelpers';
 
 sentryTest(
-  'handles large mutations with _experiments.mutationLimit configured',
+  'handles large mutations by stopping replay when `mutationLimit` configured',
   async ({ getLocalTestPath, page, forceFlushReplay, browserName }) => {
     if (shouldSkipReplayTest() || ['webkit', 'firefox'].includes(browserName)) {
       sentryTest.skip();
@@ -34,36 +39,29 @@ sentryTest(
     await forceFlushReplay();
     const res1 = await reqPromise1;
 
-    const reqPromise2 = waitForReplayRequest(page);
+    // replay should be stopped due to mutation limit
+    let replay = await getReplaySnapshot(page);
+    expect(replay.session).toBe(undefined);
+    expect(replay._isEnabled).toBe(false);
 
     void page.click('#button-modify');
     await forceFlushReplay();
-    const res2 = await reqPromise2;
 
-    const reqPromise3 = waitForReplayRequest(page);
-
-    void page.click('#button-remove');
+    await page.click('#button-remove');
     await forceFlushReplay();
-    const res3 = await reqPromise3;
 
     const replayData0 = getReplayRecordingContent(res0);
-    const replayData1 = getReplayRecordingContent(res1);
-    const replayData2 = getReplayRecordingContent(res2);
-    const replayData3 = getReplayRecordingContent(res3);
-
     expect(replayData0.fullSnapshots.length).toBe(1);
     expect(replayData0.incrementalSnapshots.length).toBe(0);
 
-    // This includes both a full snapshot as well as some incremental snapshots
-    expect(replayData1.fullSnapshots.length).toBe(1);
+    // Breadcrumbs (click and mutation);
+    const replayData1 = getReplayRecordingContent(res1);
+    expect(replayData1.fullSnapshots.length).toBe(0);
     expect(replayData1.incrementalSnapshots.length).toBeGreaterThan(0);
+    expect(replayData1.breadcrumbs.map(({ category }) => category).sort()).toEqual(['replay.mutations', 'ui.click']);
 
-    // This does not trigger mutations, for whatever reason - so no full snapshot either!
-    expect(replayData2.fullSnapshots.length).toBe(0);
-    expect(replayData2.incrementalSnapshots.length).toBeGreaterThan(0);
-
-    // This includes both a full snapshot as well as some incremental snapshots
-    expect(replayData3.fullSnapshots.length).toBe(1);
-    expect(replayData3.incrementalSnapshots.length).toBeGreaterThan(0);
+    replay = await getReplaySnapshot(page);
+    expect(replay.session).toBe(undefined);
+    expect(replay._isEnabled).toBe(false);
   },
 );

packages/replay/src/integration.ts

@@ -60,6 +60,9 @@ export class Replay implements Integration {
     maskAllInputs = true,
     blockAllMedia = true,
 
+    mutationBreadcrumbLimit = 750,
+    mutationLimit = 10_000,
+
     networkDetailAllowUrls = [],
     networkCaptureBodies = true,
     networkRequestHeaders = [],
@@ -127,6 +130,8 @@ export class Replay implements Integration {
       blockAllMedia,
       maskAllInputs,
       maskAllText,
+      mutationBreadcrumbLimit,
+      mutationLimit,
       networkDetailAllowUrls,
       networkCaptureBodies,
       networkRequestHeaders: _getMergedNetworkHeaders(networkRequestHeaders),

packages/replay/src/replay.ts

@@ -1,7 +1,7 @@
 /* eslint-disable max-lines */ // TODO: We might want to split this file up
 import { EventType, record } from '@sentry-internal/rrweb';
 import { captureException, getCurrentHub } from '@sentry/core';
-import type { Breadcrumb, ReplayRecordingMode } from '@sentry/types';
+import type { Breadcrumb, ReplayRecordingMode, Transaction } from '@sentry/types';
 import { logger } from '@sentry/utils';
 
 import {
@@ -68,6 +68,12 @@ export class ReplayContainer implements ReplayContainerInterface {
    */
   public recordingMode: ReplayRecordingMode = 'session';
 
+  /**
+   * The current or last active transcation.
+   * This is only available when performance is enabled.
+   */
+  public lastTransaction?: Transaction;
+
   /**
    * These are here so we can overwrite them in tests etc.
    * @hidden
@@ -614,6 +620,19 @@ export class ReplayContainer implements ReplayContainerInterface {
     return res;
   }
 
+  /**
+   * This will get the parametrized route name of the current page.
+   * This is only available if performance is enabled, and if an instrumented router is used.
+   */
+  public getCurrentRoute(): string | undefined {
+    const lastTransaction = this.lastTransaction || getCurrentHub().getScope().getTransaction();
+    if (!lastTransaction || !['route', 'custom'].includes(lastTransaction.metadata.source)) {
+      return undefined;
+    }
+
+    return lastTransaction.name;
+  }
+
   /**
    * Initialize and start all listeners to varying events (DOM,
    * Performance Observer, Recording, Sentry SDK, etc)
@@ -1056,8 +1075,8 @@ export class ReplayContainer implements ReplayContainerInterface {
   private _onMutationHandler = (mutations: unknown[]): boolean => {
     const count = mutations.length;
 
-    const mutationLimit = this._options._experiments.mutationLimit || 0;
-    const mutationBreadcrumbLimit = this._options._experiments.mutationBreadcrumbLimit || 1000;
+    const mutationLimit = this._options.mutationLimit;
+    const mutationBreadcrumbLimit = this._options.mutationBreadcrumbLimit;
     const overMutationLimit = mutationLimit && count > mutationLimit;
 
     // Create a breadcrumb if a lot of mutations happen at the same time
@@ -1067,15 +1086,15 @@ export class ReplayContainer implements ReplayContainerInterface {
         category: 'replay.mutations',
         data: {
           count,
+          limit: overMutationLimit,
         },
       });
       this._createCustomBreadcrumb(breadcrumb);
     }
 
+    // Stop replay if over the mutation limit
     if (overMutationLimit) {
-      // We want to skip doing an incremental snapshot if there are too many mutations
-      // Instead, we do a full snapshot
-      this._triggerFullSnapshot(false);
+      void this.stop('mutationLimit');
       return false;
     }
 

packages/replay/src/types.ts

@@ -4,6 +4,7 @@ import type {
   ReplayRecordingData,
   ReplayRecordingMode,
   SentryWrappedXMLHttpRequest,
+  Transaction,
   XhrBreadcrumbHint,
 } from '@sentry/types';
 
@@ -272,6 +273,20 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
    */
   maskAllText: boolean;
 
+  /**
+   * A high number of DOM mutations (in a single event loop) can cause
+   * performance regressions in end-users' browsers. This setting will create
+   * a breadcrumb in the recording when the limit has been reached.
+   */
+  mutationBreadcrumbLimit: number;
+
+  /**
+   * A high number of DOM mutations (in a single event loop) can cause
+   * performance regressions in end-users' browsers. This setting will cause
+   * recording to stop when the limit has been reached.
+   */
+  mutationLimit: number;
+
   /**
    * Callback before adding a custom recording event
    *
@@ -295,8 +310,6 @@ export interface ReplayPluginOptions extends ReplayNetworkOptions {
   _experiments: Partial<{
     captureExceptions: boolean;
     traceInternals: boolean;
-    mutationLimit: number;
-    mutationBreadcrumbLimit: number;
     slowClicks: {
       threshold: number;
       timeout: number;
@@ -523,6 +536,7 @@ export interface ReplayContainer {
   session: Session | undefined;
   recordingMode: ReplayRecordingMode;
   timeouts: Timeouts;
+  lastTransaction?: Transaction;
   throttledAddEvent: (
     event: RecordingEvent,
     isCheckout?: boolean,
@@ -547,6 +561,7 @@ export interface ReplayContainer {
   getSessionId(): string | undefined;
   checkAndHandleExpiredSession(): boolean | void;
   setInitialState(): void;
+  getCurrentRoute(): string | undefined;
 }
 
 export interface ReplayPerformanceEntry<T> {

packages/replay/src/util/addGlobalListeners.ts

@@ -40,6 +40,16 @@ export function addGlobalListeners(replay: ReplayContainer): void {
         dsc.replay_id = replayId;
       }
     });
+
+    client.on('startTransaction', transaction => {
+      replay.lastTransaction = transaction;
+    });
+
+    // We may be missing the initial startTransaction due to timing issues,
+    // so we capture it on finish again.
+    client.on('finishTransaction', transaction => {
+      replay.lastTransaction = transaction;
+    });
   }
 }
 

packages/replay/test/utils/setupReplayContainer.ts

@@ -15,6 +15,8 @@ const DEFAULT_OPTIONS = {
   networkCaptureBodies: true,
   networkRequestHeaders: [],
   networkResponseHeaders: [],
+  mutationLimit: 1500,
+  mutationBreadcrumbLimit: 500,
   _experiments: {},
 };
 
@@ -54,6 +56,8 @@ export const DEFAULT_OPTIONS_EVENT_PAYLOAD = {
   maskAllText: false,
   maskAllInputs: false,
   useCompression: DEFAULT_OPTIONS.useCompression,
+  mutationLimit: DEFAULT_OPTIONS.mutationLimit,
+  mutationBreadcrumbLimit: DEFAULT_OPTIONS.mutationBreadcrumbLimit,
   networkDetailHasUrls: DEFAULT_OPTIONS.networkDetailAllowUrls.length > 0,
   networkCaptureBodies: DEFAULT_OPTIONS.networkCaptureBodies,
   networkRequestHeaders: DEFAULT_OPTIONS.networkRequestHeaders.length > 0,

packages/sveltekit/.eslintrc.js

@@ -17,6 +17,12 @@ module.exports = {
         project: ['tsconfig.test.json'],
       },
     },
+    {
+      files: ['src/vite/**', 'src/server/**'],
+      rules: {
+        '@sentry-internal/sdk/no-optional-chaining': 'off',
+      },
+    },
   ],
   extends: ['../../.eslintrc.js'],
 };

packages/sveltekit/src/server/utils.ts

@@ -1,8 +1,16 @@
 import type { DynamicSamplingContext, StackFrame, TraceparentData } from '@sentry/types';
-import { baggageHeaderToDynamicSamplingContext, basename, extractTraceparentData } from '@sentry/utils';
+import {
+  baggageHeaderToDynamicSamplingContext,
+  basename,
+  escapeStringForRegex,
+  extractTraceparentData,
+  GLOBAL_OBJ,
+  join,
+} from '@sentry/utils';
 import type { RequestEvent } from '@sveltejs/kit';
 
 import { WRAPPED_MODULE_SUFFIX } from '../vite/autoInstrument';
+import type { GlobalWithSentryValues } from '../vite/injectGlobalValues';
 
 /**
  * Takes a request event and extracts traceparent and DSC data
@@ -35,7 +43,8 @@ export function rewriteFramesIteratee(frame: StackFrame): StackFrame {
   if (!frame.filename) {
     return frame;
   }
-
+  const globalWithSentryValues: GlobalWithSentryValues = GLOBAL_OBJ;
+  const svelteKitBuildOutDir = globalWithSentryValues.__sentry_sveltekit_output_dir;
   const prefix = 'app:///';
 
   // Check if the frame filename begins with `/` or a Windows-style prefix such as `C:\`
@@ -48,8 +57,16 @@ export function rewriteFramesIteratee(frame: StackFrame): StackFrame {
           .replace(/\\/g, '/') // replace all `\\` instances with `/`
       : frame.filename;
 
-    const base = basename(filename);
-    frame.filename = `${prefix}${base}`;
+    let strippedFilename;
+    if (svelteKitBuildOutDir) {
+      strippedFilename = filename.replace(
+        new RegExp(`^.*${escapeStringForRegex(join(svelteKitBuildOutDir, 'server'))}/`),
+        '',
+      );
+    } else {
+      strippedFilename = basename(filename);
+    }
+    frame.filename = `${prefix}${strippedFilename}`;
   }
 
   delete frame.module;

packages/sveltekit/src/vite/injectGlobalValues.ts

@@ -0,0 +1,41 @@
+import type { InternalGlobal } from '@sentry/utils';
+
+export type GlobalSentryValues = {
+  __sentry_sveltekit_output_dir?: string;
+};
+
+/**
+ * Extend the `global` type with custom properties that are
+ * injected by the SvelteKit SDK at build time.
+ * @see packages/sveltekit/src/vite/sourcemaps.ts
+ */
+export type GlobalWithSentryValues = InternalGlobal & GlobalSentryValues;
+
+export const VIRTUAL_GLOBAL_VALUES_FILE = '\0sentry-inject-global-values-file';
+
+/**
+ * @returns code that injects @param globalSentryValues into the global object.
+ */
+export function getGlobalValueInjectionCode(globalSentryValues: GlobalSentryValues): string {
+  if (Object.keys(globalSentryValues).length === 0) {
+    return '';
+  }
+
+  const sentryGlobal = '_global';
+
+  const globalCode = `var ${sentryGlobal} =
+  typeof window !== 'undefined' ?
+    window :
+    typeof globalThis !== 'undefined' ?
+      globalThis :
+      typeof global !== 'undefined' ?
+        global :
+        typeof self !== 'undefined' ?
+          self :
+          {};`;
+  const injectedValuesCode = Object.entries(globalSentryValues)
+    .map(([key, value]) => `${sentryGlobal}["${key}"] = ${JSON.stringify(value)};`)
+    .join('\n');
+
+  return `${globalCode}\n${injectedValuesCode}\n`;
+}

packages/sveltekit/src/vite/sentryVitePlugins.ts

@@ -103,6 +103,7 @@ export async function sentrySvelteKit(options: SentrySvelteKitPluginOptions = {}
     const pluginOptions = {
       ...mergedOptions.sourceMapsUploadOptions,
       debug: mergedOptions.debug, // override the plugin's debug flag with the one from the top-level options
+      adapter: mergedOptions.adapter,
     };
     sentryPlugins.push(await makeCustomSentryVitePlugin(pluginOptions));
   }