fix(browser): Improve navigation vs. redirect detection (#17275)

- Increase the threshold of inactivity between potential navigations
from 300ms to 1.5s
- Change how we treat interactions:
- Previously, we'd take interactions happening _before_ the last root
span was started into account
- Now, we reset the interaction timestamp when we start a new navigation
_root_ span. So from that moment on, we'll consider every new navigation
span a redirect iff:
    - no interaction happened within 1.5s (from root span start)
    - the new span was started within 1.5s
    - there is still an active root span

Author: Lms24

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-aborting-pageload/init.js

@@ -4,7 +4,7 @@ window.Sentry = Sentry;
 
 Sentry.init({
   dsn: 'https://[email protected]/1337',
-  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 2000 })],
+  integrations: [Sentry.browserTracingIntegration({ idleTimeout: 2000, detectRedirects: false })],
   tracesSampleRate: 1,
 });
 

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-redirect/keypress-early/init.js

@@ -0,0 +1,36 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+});
+
+window.history.pushState({}, '', '/sub-page-redirect-1');
+
+setTimeout(() => {
+  window.history.pushState({}, '', '/sub-page-redirect-2');
+}, 400);
+
+setTimeout(() => {
+  window.history.pushState({}, '', '/sub-page-redirect-3');
+}, 800);
+
+document.getElementById('btn1').addEventListener('click', () => {
+  window.history.pushState({}, '', '/next-page');
+});
+
+setTimeout(() => {
+  document.getElementById('btn1').click();
+  // 1s is still within the 1.5s time window, but the click should trigger a new navigation root span
+}, 1000);
+
+setTimeout(() => {
+  window.history.pushState({}, '', '/next-page-redirect-1');
+}, 1100);
+
+setTimeout(() => {
+  window.history.pushState({}, '', '/next-page-redirect-2');
+}, 2000);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-redirect/keypress-early/test.ts

@@ -0,0 +1,78 @@
+import { expect } from '@playwright/test';
+import {
+  SEMANTIC_ATTRIBUTE_SENTRY_OP,
+  SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
+  SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE,
+  SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,
+} from '@sentry/core';
+import { sentryTest } from '../../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../../utils/helpers';
+
+sentryTest(
+  'creates a pageload and navigation root spans each with multiple navigation.redirect childspans',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const pageloadRequestPromise = waitForTransactionRequest(page, event => event.contexts?.trace?.op === 'pageload');
+    const navigationRequestPromise = waitForTransactionRequest(
+      page,
+      event => event.contexts?.trace?.op === 'navigation' && event.transaction === '/next-page',
+    );
+
+    await page.goto(url);
+
+    const pageloadRequest = envelopeRequestParser(await pageloadRequestPromise);
+    const navigationRequest = envelopeRequestParser(await navigationRequestPromise);
+
+    expect(pageloadRequest.contexts?.trace?.op).toBe('pageload');
+
+    expect(pageloadRequest.contexts?.trace?.data).toMatchObject({
+      [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.pageload.browser',
+      [SEMANTIC_ATTRIBUTE_SENTRY_SAMPLE_RATE]: 1,
+      [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'url',
+      [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'pageload',
+      ['sentry.idle_span_finish_reason']: 'cancelled',
+    });
+
+    expect(pageloadRequest.request).toEqual({
+      headers: {
+        'User-Agent': expect.any(String),
+      },
+      url: 'http://sentry-test.io/index.html',
+    });
+
+    const spans = pageloadRequest.spans || [];
+
+    const redirectSpans = spans.filter(span => span.op === 'navigation.redirect');
+    expect(redirectSpans).toHaveLength(3);
+
+    redirectSpans.forEach(redirectSpan => {
+      expect(redirectSpan?.timestamp).toEqual(redirectSpan?.start_timestamp);
+      expect(redirectSpan).toEqual({
+        data: {
+          'sentry.op': 'navigation.redirect',
+          'sentry.origin': 'auto.navigation.browser',
+          'sentry.source': 'url',
+        },
+        description: expect.stringContaining('/sub-page-redirect-'),
+        op: 'navigation.redirect',
+        origin: 'auto.navigation.browser',
+        parent_span_id: pageloadRequest.contexts!.trace!.span_id,
+        span_id: expect.any(String),
+        start_timestamp: expect.any(Number),
+        timestamp: expect.any(Number),
+        trace_id: expect.any(String),
+      });
+    });
+
+    expect(navigationRequest.contexts?.trace?.op).toBe('navigation');
+    expect(navigationRequest.transaction).toEqual('/next-page');
+
+    // 2 subsequent redirects belonging to the navigation root span
+    expect(navigationRequest.spans?.filter(span => span.op === 'navigation.redirect')).toHaveLength(2);
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-redirect/multiple-redirects/init.js

@@ -0,0 +1,27 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+  debug: true,
+});
+
+document.getElementById('btn1').addEventListener('click', () => {
+  window.history.pushState({}, '', '/sub-page');
+
+  // then trigger redirect inside of this navigation, which should not be detected as a redirect
+  // because the last click was less than 1.5s ago
+  setTimeout(() => {
+    document.getElementById('btn2').click();
+  }, 100);
+});
+
+document.getElementById('btn2').addEventListener('click', () => {
+  setTimeout(() => {
+    // navigation happens ~1100ms after the last navigation
+    window.history.pushState({}, '', '/sub-page-2');
+  }, 1000);
+});

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-redirect/click/template.html renamed to dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-redirect/multiple-redirects/template.html

@@ -0,0 +1,8 @@
+<!doctype html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+  </head>
+  <button id="btn1">Trigger navigation</button>
+  <button id="btn2">Trigger navigation 2</button>
+</html>

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-redirect/multiple-redirects/test.ts

@@ -0,0 +1,47 @@
+import { expect } from '@playwright/test';
+import { sentryTest } from '../../../../../utils/fixtures';
+import { envelopeRequestParser, shouldSkipTracingTest, waitForTransactionRequest } from '../../../../../utils/helpers';
+
+sentryTest(
+  'creates navigation root span if click happened within 1.5s of the last navigation',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+
+    const pageloadRequestPromise = waitForTransactionRequest(page, event => event.contexts?.trace?.op === 'pageload');
+    const navigationRequestPromise = waitForTransactionRequest(
+      page,
+      event => event.contexts?.trace?.op === 'navigation' && event.transaction === '/sub-page',
+    );
+    const navigation2RequestPromise = waitForTransactionRequest(
+      page,
+      event => event.contexts?.trace?.op === 'navigation' && event.transaction === '/sub-page-2',
+    );
+
+    await page.goto(url);
+
+    await pageloadRequestPromise;
+
+    // Now trigger navigation (since no span is active), and then a redirect in the navigation, with
+    await page.click('#btn1');
+
+    const navigationRequest = envelopeRequestParser(await navigationRequestPromise);
+    const navigation2Request = envelopeRequestParser(await navigation2RequestPromise);
+
+    expect(navigationRequest.contexts?.trace?.op).toBe('navigation');
+    expect(navigationRequest.transaction).toEqual('/sub-page');
+
+    const spans = (navigationRequest.spans || []).filter(s => s.op === 'navigation.redirect');
+
+    expect(spans).toHaveLength(0);
+
+    expect(navigation2Request.contexts?.trace?.op).toBe('navigation');
+    expect(navigation2Request.transaction).toEqual('/sub-page-2');
+
+    const spans2 = (navigation2Request.spans || []).filter(s => s.op === 'navigation.redirect');
+    expect(spans2).toHaveLength(0);
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/browserTracingIntegration/navigation-redirect/navigation-navigation-click/init.js

@@ -21,3 +21,10 @@ document.getElementById('btn1').addEventListener('click', () => {
     }, 100);
   }, 400);
 });
+
+document.getElementById('btn2').addEventListener('click', () => {
+  // Trigger navigation later than click, so the last click is more than 300ms ago
+  setTimeout(() => {
+    window.history.pushState({}, '', '/sub-page-2');
+  }, 400);
+});