Add support for capturing performance measure details as span attributes

Author: cursoragent

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans-firefox/init.js

@@ -0,0 +1,38 @@
+import * as Sentry from '@sentry/browser';
+
+// Create measures BEFORE SDK initializes
+
+// Create a measure with detail
+const measure = performance.measure('firefox-test-measure', {
+  duration: 100,
+  detail: { test: 'initial-value' },
+});
+
+// Simulate Firefox's permission denial by overriding the detail getter
+// This mimics the actual Firefox behavior where accessing detail throws
+Object.defineProperty(measure, 'detail', {
+  get() {
+    throw new DOMException('Permission denied to access object', 'SecurityError');
+  },
+  configurable: false,
+  enumerable: true,
+});
+
+// Also create a normal measure to ensure SDK still works
+performance.measure('normal-measure', {
+  duration: 50,
+  detail: 'this-should-work',
+});
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  debug: true,
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 9000,
+    }),
+  ],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans-firefox/test.ts

@@ -0,0 +1,42 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest(
+  'should handle Firefox permission denial gracefully and still create measure spans',
+  async ({ getLocalTestUrl, page }) => {
+    if (shouldSkipTracingTest()) {
+      sentryTest.skip();
+    }
+
+    const url = await getLocalTestUrl({ testDir: __dirname });
+    const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+    // Find all measure spans
+    const measureSpans = eventData.spans?.filter(({ op }) => op === 'measure');
+    expect(measureSpans?.length).toBe(2); // Both measures should create spans
+
+    // Test 1: Verify the firefox-test-measure span exists but has no detail
+    const firefoxMeasure = measureSpans?.find(span => span.description === 'firefox-test-measure');
+    expect(firefoxMeasure).toBeDefined();
+    expect(firefoxMeasure?.data).toMatchObject({
+      'sentry.op': 'measure',
+      'sentry.origin': 'auto.resource.browser.metrics',
+    });
+
+    // Verify no detail attributes were added due to the permission error
+    const firefoxDataKeys = Object.keys(firefoxMeasure?.data || {});
+    const firefoxDetailKeys = firefoxDataKeys.filter(key => key.includes('detail'));
+    expect(firefoxDetailKeys).toHaveLength(0);
+
+    // Test 2: Verify the normal measure still captures detail correctly
+    const normalMeasure = measureSpans?.find(span => span.description === 'normal-measure');
+    expect(normalMeasure).toBeDefined();
+    expect(normalMeasure?.data).toMatchObject({
+      'sentry.browser.measure.detail': 'this-should-work',
+      'sentry.op': 'measure',
+      'sentry.origin': 'auto.resource.browser.metrics',
+    });
+  },
+);

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans-minimal/init.js

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/browser';
+
+// Create a simple measure with detail before SDK init
+performance.measure('test-measure', {
+  duration: 100,
+  detail: { foo: 'bar' },
+});
+
+window.Sentry = Sentry;
+window._testBaseTimestamp = performance.timeOrigin / 1000;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [Sentry.browserTracingIntegration()],
+  tracesSampleRate: 1,
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans-minimal/test.ts

@@ -0,0 +1,24 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+sentryTest('should capture measure detail as span attributes', async ({ getLocalTestUrl, page }) => {
+  if (shouldSkipTracingTest()) {
+    sentryTest.skip();
+  }
+
+  const url = await getLocalTestUrl({ testDir: __dirname });
+  const eventData = await getFirstSentryEnvelopeRequest<Event>(page, url);
+
+  const measureSpan = eventData.spans?.find(({ op }) => op === 'measure');
+  expect(measureSpan).toBeDefined();
+  expect(measureSpan?.description).toBe('test-measure');
+
+  // Verify detail was captured
+  expect(measureSpan?.data).toMatchObject({
+    'sentry.browser.measure.detail.foo': 'bar',
+    'sentry.op': 'measure',
+    'sentry.origin': 'auto.resource.browser.metrics',
+  });
+});

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans/init.js

@@ -2,9 +2,33 @@
 import * as Sentry from '@sentry/browser';
 
 const end = performance.now();
+
+// Test 1: Measure with object detail
 performance.measure('Next.js-before-hydration', {
   duration: 1000,
   end,
+  detail: {
+    component: 'HomePage',
+    renderTime: 123.45,
+    isSSR: true,
+  },
+});
+
+// Test 2: Measure with primitive detail
+performance.measure('custom-metric', {
+  duration: 500,
+  detail: 'simple-string-detail',
+});
+
+// Test 3: Measure with complex detail
+performance.measure('complex-measure', {
+  duration: 200,
+  detail: {
+    nested: {
+      value: 'test',
+      array: [1, 2, 3],
+    },
+  },
 });
 
 window.Sentry = Sentry;

dev-packages/browser-integration-tests/suites/tracing/metrics/pageload-measure-spans/test.ts

@@ -22,14 +22,40 @@ sentryTest('should add browser-related spans to pageload transaction', async ({
   expect(requestSpan).toBeDefined();
   expect(requestSpan?.description).toBe(page.url());
 
-  const measureSpan = eventData.spans?.find(({ op }) => op === 'measure');
-  expect(measureSpan).toBeDefined();
+  // Find all measure spans
+  const measureSpans = eventData.spans?.filter(({ op }) => op === 'measure');
+  expect(measureSpans?.length).toBe(3); // We created 3 measures in init.js
 
-  expect(requestSpan!.start_timestamp).toBeLessThanOrEqual(measureSpan!.start_timestamp);
-  expect(measureSpan?.data).toEqual({
+  // Test 1: Verify object detail is captured
+  const nextJsMeasure = measureSpans?.find(span => span.description === 'Next.js-before-hydration');
+  expect(nextJsMeasure).toBeDefined();
+  expect(nextJsMeasure?.data).toMatchObject({
     'sentry.browser.measure_happened_before_request': true,
     'sentry.browser.measure_start_time': expect.any(Number),
+    'sentry.browser.measure.detail.component': 'HomePage',
+    'sentry.browser.measure.detail.renderTime': 123.45,
+    'sentry.browser.measure.detail.isSSR': true,
     'sentry.op': 'measure',
     'sentry.origin': 'auto.resource.browser.metrics',
   });
+
+  // Test 2: Verify primitive detail is captured
+  const customMetricMeasure = measureSpans?.find(span => span.description === 'custom-metric');
+  expect(customMetricMeasure).toBeDefined();
+  expect(customMetricMeasure?.data).toMatchObject({
+    'sentry.browser.measure.detail': 'simple-string-detail',
+    'sentry.op': 'measure',
+    'sentry.origin': 'auto.resource.browser.metrics',
+  });
+
+  // Test 3: Verify complex detail is stringified
+  const complexMeasure = measureSpans?.find(span => span.description === 'complex-measure');
+  expect(complexMeasure).toBeDefined();
+  expect(complexMeasure?.data).toMatchObject({
+    'sentry.browser.measure.detail.nested': '{"value":"test","array":[1,2,3]}',
+    'sentry.op': 'measure',
+    'sentry.origin': 'auto.resource.browser.metrics',
+  });
+
+  expect(requestSpan!.start_timestamp).toBeLessThanOrEqual(nextJsMeasure!.start_timestamp);
 });

packages/browser-utils/src/metrics/browserMetrics.ts

@@ -1,10 +1,11 @@
 /* eslint-disable max-lines */
-import type { Measurements, Span, SpanAttributes, StartSpanOptions } from '@sentry/core';
+import type { Measurements, Span, SpanAttributes, SpanAttributeValue, StartSpanOptions } from '@sentry/core';
 import {
   browserPerformanceTimeOrigin,
   getActiveSpan,
   getComponentName,
   htmlTreeAsString,
+  isPrimitive,
   parseUrl,
   SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,
   setMeasurement,
@@ -483,6 +484,46 @@ export function _addMeasureSpans(
     attributes['sentry.browser.measure_start_time'] = measureStartTimestamp;
   }
 
+  // Safely access and process detail property
+  // Cast to PerformanceMeasure to access detail property
+  const performanceMeasure = entry as PerformanceMeasure;
+  if (performanceMeasure.detail !== undefined) {
+    try {
+      // Accessing detail might throw in some browsers (e.g., Firefox) due to security restrictions
+      const detail = performanceMeasure.detail;
+
+      // Process detail based on its type
+      if (detail && typeof detail === 'object') {
+        // Handle object details
+        for (const [key, value] of Object.entries(detail)) {
+          if (value && isPrimitive(value)) {
+            attributes[`sentry.browser.measure.detail.${key}`] = value as SpanAttributeValue;
+          } else if (value !== undefined) {
+            try {
+              // This is user defined so we can't guarantee it's serializable
+              attributes[`sentry.browser.measure.detail.${key}`] = JSON.stringify(value);
+            } catch {
+              // Skip values that can't be stringified
+            }
+          }
+        }
+      } else if (isPrimitive(detail)) {
+        // Handle primitive details
+        attributes['sentry.browser.measure.detail'] = detail as SpanAttributeValue;
+      } else if (detail !== null) {
+        // Handle non-primitive, non-object details
+        try {
+          attributes['sentry.browser.measure.detail'] = JSON.stringify(detail);
+        } catch {
+          // Skip if stringification fails
+        }
+      }
+    } catch {
+      // Silently ignore any errors when accessing detail
+      // This handles the Firefox "Permission denied to access object" error
+    }
+  }
+
   // Measurements from third parties can be off, which would create invalid spans, dropping transactions in the process.
   if (measureStartTimestamp <= measureEndTimestamp) {
     startAndEndSpan(span, measureStartTimestamp, measureEndTimestamp, {