test(browser-integration-tests): Add trace lifetime tests in TwP scen…

…ario (#11636) Adds a couple of tests to cover the "Tracing Without Performance" use case where no spans will be created but we nevertheless attach tracing headers to outgoing requests and attach a trace id to errors. Also, we expect these traceIds to be different/new for each subsequent navigation ref #11599
getsentry · Apr 17, 2024 · 2ce7105 · 2ce7105
1 parent 5f3e51b
commit 2ce7105
Show file tree

Hide file tree

Showing 5 changed files with 131 additions and 1 deletion.
diff --git a/dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/README.md b/dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/README.md
@@ -5,5 +5,6 @@ connected to a trace. This suite distinguishes the following cases:
 2. `pageload-meta` - Traces started on the initial pageload as a continuation of the trace on the server (via `<meta>`
    tags)
 3. `navigation` - Traces started during navigations on a page
+4. `tracing-without-performance` - Traces originating from an app configured for "Tracing without Performance".
 
 Tests scenarios should be fairly similar for all three cases but it's important we test all of them.
diff --git a/dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/subject.js b/dev-packages/browser-integration-tests/suites/tracing/trace-lifetime/subject.js
@@ -1,6 +1,6 @@
 const errorBtn = document.getElementById('errorBtn');
 errorBtn.addEventListener('click', () => {
-  throw new Error('Sentry Test Error');
+  throw new Error(`Sentry Test Error ${Math.random()}`);
 });
 
 const fetchBtn = document.getElementById('fetchBtn');

diff --git a/...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/init.js b/...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/init.js
@@ -0,0 +1,10 @@
+import * as Sentry from '@sentry/browser';
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  // in browser TwP means not setting tracesSampleRate but adding browserTracingIntegration,
+  dsn: 'https://public@dsn.ingest.sentry.io/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracePropagationTargets: ['http://example.com'],
+});
diff --git a/...integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/template.html b/...integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/template.html
@@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <!-- Purposefully emitting the `sampled` flag in the sentry-trace tag -->
+    <meta name="sentry-trace" content="12345678901234567890123456789012-1234567890123456" />
+    <meta name="baggage"
+          content="sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod"/>
+  </head>
+  <body>
+    <button id="errorBtn">Throw Error</button>
+    <button id="fetchBtn">Fetch Request</button>
+    <button id="xhrBtn">XHR Request</button>
+  </body>
+</html>
diff --git a/...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts b/...owser-integration-tests/suites/tracing/trace-lifetime/tracing-without-performance/test.ts
@@ -0,0 +1,104 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/types';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+const META_TAG_TRACE_ID = '12345678901234567890123456789012';
+const META_TAG_PARENT_SPAN_ID = '1234567890123456';
+const META_TAG_BAGGAGE =
+  'sentry-trace_id=12345678901234567890123456789012,sentry-public_key=public,sentry-release=1.0.0,sentry-environment=prod';
+
+sentryTest('error has new traceId after navigation', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
+
+  const errorEventPromise = getFirstSentryEnvelopeRequest<Event>(page);
+  await page.locator('#errorBtn').click();
+  const errorEvent = await errorEventPromise;
+
+  expect(errorEvent.contexts?.trace).toEqual({
+    trace_id: META_TAG_TRACE_ID,
+    parent_span_id: META_TAG_PARENT_SPAN_ID,
+    span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+  });
+
+  const errorEventPromise2 = getFirstSentryEnvelopeRequest<Event>(page, `${url}#navigation`);
+  await page.locator('#errorBtn').click();
+  const errorEvent2 = await errorEventPromise2;
+
+  expect(errorEvent2.contexts?.trace).toEqual({
+    trace_id: expect.stringMatching(/^[0-9a-f]{32}$/),
+    span_id: expect.stringMatching(/^[0-9a-f]{16}$/),
+  });
+  expect(errorEvent2.contexts?.trace?.trace_id).not.toBe(META_TAG_TRACE_ID);
+});
+
+sentryTest('outgoing fetch requests have new traceId after navigation', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
+
+  const requestPromise = page.waitForRequest('http://example.com/*');
+  await page.locator('#fetchBtn').click();
+  const request = await requestPromise;
+  const headers = request.headers();
+
+  // sampling decision is deferred because TwP means we didn't sample any span
+  expect(headers['sentry-trace']).toMatch(new RegExp(`^${META_TAG_TRACE_ID}-[0-9a-f]{16}$`));
+  expect(headers['baggage']).toBe(META_TAG_BAGGAGE);
+
+  await page.goto(`${url}#navigation`);
+
+  const requestPromise2 = page.waitForRequest('http://example.com/*');
+  await page.locator('#fetchBtn').click();
+  const request2 = await requestPromise2;
+  const headers2 = request2.headers();
+
+  // sampling decision is deferred because TwP means we didn't sample any span
+  expect(headers2['sentry-trace']).toMatch(/^[0-9a-f]{32}-[0-9a-f]{16}$/);
+  expect(headers2['baggage']).not.toBe(`${META_TAG_TRACE_ID}-${META_TAG_PARENT_SPAN_ID}`);
+  expect(headers2['baggage']).toMatch(
+    /sentry-environment=production,sentry-public_key=public,sentry-trace_id=[0-9a-f]{32}/,
+  );
+  expect(headers2['baggage']).not.toContain(`sentry-trace_id=${META_TAG_TRACE_ID}`);
+});
+
+sentryTest('outgoing XHR requests have new traceId after navigation', async ({ getLocalTestPath, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestPath({ testDir: __dirname });
+  await page.goto(url);
+
+  const requestPromise = page.waitForRequest('http://example.com/*');
+  await page.locator('#xhrBtn').click();
+  const request = await requestPromise;
+  const headers = request.headers();
+
+  // sampling decision is deferred because TwP means we didn't sample any span
+  expect(headers['sentry-trace']).toMatch(new RegExp(`^${META_TAG_TRACE_ID}-[0-9a-f]{16}$`));
+  expect(headers['baggage']).toBe(META_TAG_BAGGAGE);
+
+  await page.goto(`${url}#navigation`);
+
+  const requestPromise2 = page.waitForRequest('http://example.com/*');
+  await page.locator('#xhrBtn').click();
+  const request2 = await requestPromise2;
+  const headers2 = request2.headers();
+
+  // sampling decision is deferred because TwP means we didn't sample any span
+  expect(headers2['sentry-trace']).toMatch(/^[0-9a-f]{32}-[0-9a-f]{16}$/);
+  expect(headers2['baggage']).not.toBe(`${META_TAG_TRACE_ID}-${META_TAG_PARENT_SPAN_ID}`);
+  expect(headers2['baggage']).toMatch(
+    /sentry-environment=production,sentry-public_key=public,sentry-trace_id=[0-9a-f]{32}/,
+  );
+  expect(headers2['baggage']).not.toContain(`sentry-trace_id=${META_TAG_TRACE_ID}`);
+});