ref(tracing): Add interaction experiment

k-fish · k-fish · commit b6682428256d · 2022-11-15T14:33:03.000-05:00
This adds interactions as an experiment so we can try it out with Sentry SaaS before tuning it for general release. It's behind a rate as an experiment option and only makes idleTransactions on 'click' for now. Future considerations include us likely having differing idleTimeout settings, and being more clever with which data we include, but this should be enough to start experimenting.
diff --git a/packages/integration-tests/suites/tracing/browsertracing/interactions/assets/script.js b/packages/integration-tests/suites/tracing/browsertracing/interactions/assets/script.js
@@ -0,0 +1,12 @@
+(() => {
+  const startTime = Date.now();
+
+  function getElasped() {
+    const time = Date.now();
+    return time - startTime;
+  }
+
+  while (getElasped() < 105) {
+    //
+  }
+})();
diff --git a/packages/integration-tests/suites/tracing/browsertracing/interactions/init.js b/packages/integration-tests/suites/tracing/browsertracing/interactions/init.js
@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/browser';
+import { Integrations } from '@sentry/tracing';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [
+    new Integrations.BrowserTracing({
+      idleTimeout: 1000,
+      _experiments: {
+        interactionSampleRate: 1.0,
+      },
+    }),
+  ],
+  tracesSampleRate: 1,
+});
diff --git a/packages/integration-tests/suites/tracing/browsertracing/interactions/template.html b/packages/integration-tests/suites/tracing/browsertracing/interactions/template.html
@@ -0,0 +1,10 @@
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <body>
+    <div>Rendered Before Long Task</div>
+    <script src="https://example.com/path/to/script.js"></script>
+    <button data-test-id="interaction-button">Click Me</button>
+  </body>
+</html>
diff --git a/packages/integration-tests/suites/tracing/browsertracing/interactions/test.ts b/packages/integration-tests/suites/tracing/browsertracing/interactions/test.ts
@@ -0,0 +1,36 @@
+import { expect, Route } from '@playwright/test';
+import { Event } from '@sentry/types';
+
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, getMultipleSentryEnvelopeRequests } from '../../../../utils/helpers';
+
+sentryTest('should capture interaction transaction.', async ({ browserName, getLocalTestPath, page }) => {
+  if (browserName !== 'chromium') {
+    sentryTest.skip();
+  }
+
+  await page.route('**/path/to/script.js', (route: Route) => route.fulfill({ path: `${__dirname}/assets/script.js` }));
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+
+  await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  await page.locator('[data-test-id=interaction-button]').click();
+
+  const envelopes = await getMultipleSentryEnvelopeRequests<Event>(page, 2);
+  const eventData = envelopes[1];
+
+  expect(eventData).toEqual(
+    expect.objectContaining({
+      contexts: expect.objectContaining({
+        trace: expect.objectContaining({
+          op: 'ui.action.click',
+        }),
+      }),
+      platform: 'javascript',
+      spans: [],
+      tags: {},
+      type: 'transaction',
+    }),
+  );
+});
diff --git a/packages/tracing/src/browser/browsertracing.ts b/packages/tracing/src/browser/browsertracing.ts
@@ -1,10 +1,15 @@
 /* eslint-disable max-lines */
 import { Hub } from '@sentry/core';
-import { EventProcessor, Integration, Transaction, TransactionContext } from '@sentry/types';
+import { EventProcessor, Integration, Transaction, TransactionContext, TransactionSource } from '@sentry/types';
 import { baggageHeaderToDynamicSamplingContext, getDomElement, logger } from '@sentry/utils';
 
 import { startIdleTransaction } from '../hubextensions';
-import { DEFAULT_FINAL_TIMEOUT, DEFAULT_HEARTBEAT_INTERVAL, DEFAULT_IDLE_TIMEOUT } from '../idletransaction';
+import {
+  DEFAULT_FINAL_TIMEOUT,
+  DEFAULT_HEARTBEAT_INTERVAL,
+  DEFAULT_IDLE_TIMEOUT,
+  IdleTransaction,
+} from '../idletransaction';
 import { extractTraceparentData } from '../utils';
 import { registerBackgroundTabDetection } from './backgroundtab';
 import { addPerformanceEntries, startTrackingLongTasks, startTrackingWebVitals } from './metrics';
@@ -87,7 +92,7 @@ export interface BrowserTracingOptions extends RequestInstrumentationOptions {
    *
    * Default: undefined
    */
-  _experiments?: Partial<{ enableLongTask: boolean }>;
+  _experiments?: Partial<{ enableLongTask: boolean; interactionSampleRate: number }>;
 
   /**
    * beforeNavigate is called before a pageload/navigation transaction is created and allows users to modify transaction
@@ -120,7 +125,7 @@ const DEFAULT_BROWSER_TRACING_OPTIONS = {
   routingInstrumentation: instrumentRoutingWithDefaults,
   startTransactionOnLocationChange: true,
   startTransactionOnPageLoad: true,
-  _experiments: { enableLongTask: true },
+  _experiments: { enableLongTask: true, interactionSampleRate: 0.0 },
   ...defaultRequestInstrumentationOptions,
 };
 
@@ -147,6 +152,9 @@ export class BrowserTracing implements Integration {
 
   private _getCurrentHub?: () => Hub;
 
+  private _latestRouteName?: string;
+  private _latestRouteSource?: TransactionSource;
+
   public constructor(_options?: Partial<BrowserTracingOptions>) {
     this.options = {
       ...DEFAULT_BROWSER_TRACING_OPTIONS,
@@ -177,6 +185,7 @@ export class BrowserTracing implements Integration {
       // eslint-disable-next-line deprecation/deprecation
       tracingOrigins,
       shouldCreateSpanForRequest,
+      _experiments,
     } = this.options;
 
     instrumentRouting(
@@ -189,6 +198,10 @@ export class BrowserTracing implements Integration {
       registerBackgroundTabDetection();
     }
 
+    if (_experiments?.interactionSampleRate ?? 0 > 0) {
+      this._registerInteractionListener(_experiments?.interactionSampleRate ?? 0);
+    }
+
     instrumentOutgoingRequests({ traceFetch, traceXHR, tracingOrigins, shouldCreateSpanForRequest });
   }
 
@@ -235,6 +248,9 @@ export class BrowserTracing implements Integration {
         ? { ...finalContext.metadata, source: 'custom' }
         : finalContext.metadata;
 
+    this._latestRouteName = finalContext.name;
+    this._latestRouteSource = finalContext.metadata?.source;
+
     if (finalContext.sampled === false) {
       __DEBUG_BUILD__ &&
         logger.log(`[Tracing] Will not send ${finalContext.op} transaction because of beforeNavigate.`);
@@ -264,6 +280,60 @@ export class BrowserTracing implements Integration {
 
     return idleTransaction as Transaction;
   }
+
+  /** Start listener for interaction transactions */
+  private _registerInteractionListener(interactionSampleRate: number): void {
+    let inflightInteractionTransaction: IdleTransaction | undefined;
+    const registerInteractionTransaction = (): void => {
+      const { idleTimeout, finalTimeout, heartbeatInterval } = this.options;
+      if (Math.random() > interactionSampleRate) {
+        return;
+      }
+
+      const op = 'ui.action.click';
+      if (inflightInteractionTransaction) {
+        inflightInteractionTransaction.finish();
+        inflightInteractionTransaction = undefined;
+      }
+
+      if (!this._getCurrentHub) {
+        __DEBUG_BUILD__ && logger.warn(`[Tracing] Did not create ${op} transaction because _getCurrentHub is invalid.`);
+        return undefined;
+      }
+
+      if (!this._latestRouteName) {
+        __DEBUG_BUILD__ &&
+          logger.warn(`[Tracing] Did not create ${op} transaction because _latestRouteName is missing.`);
+        return undefined;
+      }
+
+      const hub = this._getCurrentHub();
+      const { location } = WINDOW;
+
+      const context: TransactionContext = {
+        name: this._latestRouteName,
+        op,
+        trimEnd: true,
+        metadata: {
+          source: this._latestRouteSource ?? 'url',
+        },
+      };
+
+      inflightInteractionTransaction = startIdleTransaction(
+        hub,
+        context,
+        idleTimeout,
+        finalTimeout,
+        true,
+        { location }, // for use in the tracesSampler
+        heartbeatInterval,
+      );
+    };
+
+    ['click'].forEach(type => {
+      addEventListener(type, registerInteractionTransaction, { once: false, capture: true });
+    });
+  }
 }
 
 /** Returns the value of a meta tag */
