feat(browser): Add detail to measure spans and add regression tests (#16557)

resolves #16237

In #16348 we had to revert the PR that added `detail` to `measure` spans
as attributes.

measure API:
https://developer.mozilla.org/en-US/docs/Web/API/Performance/measure
detail:
https://developer.mozilla.org/en-US/docs/Web/API/PerformanceMeasure/detail

This was
[reverted](#16347)
because it was causing issues in firefox, specifically this error was
being thrown

```
Error: Permission denied to access object
  at _addMeasureSpans(../../node_modules/@sentry-internal/browser-utils/build/esm/metrics/browserMetrics.js:255:41)
  at X2e/<(../../node_modules/@sentry-internal/browser-utils/build/esm/metrics/browserMetrics.js:194:9)
  at addPerformanceEntries(../../node_modules/@sentry-internal/browser-utils/build/esm/metrics/browserMetrics.js:174:48)
  at idleSpan.beforeSpanEnd(../../node_modules/@sentry/browser/build/npm/esm/tracing/browserTracingIntegration.js:90:9)
  at span.endapply(../../node_modules/@sentry/browser/node_modules/@sentry/core/build/esm/tracing/idleSpan.js:52:9)
  at Coe/<(../../node_modules/@sentry/browser/node_modules/@sentry/core/build/esm/tracing/idleSpan.js:196:12)
  at sentryWrapped(../../node_modules/@sentry/browser/build/npm/esm/helpers.js:38:17)
```

From debugging, this seems to be coming from a `DOMException` being
thrown @https://developer.mozilla.org/en-US/docs/Web/API/DOMException

This was re-implemented, and then we added tests to validate that this
wouldn't break on firefox.

---------

Co-authored-by: Cursor Agent <[email protected]>

Author: AbhiPrasad

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

@@ -0,0 +1,58 @@
+import * as Sentry from '@sentry/browser';
+
+// Create measures BEFORE SDK initializes
+
+// Create a measure with detail
+const measure = performance.measure('restricted-test-measure', {
+  start: performance.now(),
+  end: performance.now() + 1,
+  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,
+});
+
+window.Sentry = Sentry;
+
+Sentry.init({
+  dsn: 'https://[email protected]/1337',
+  integrations: [
+    Sentry.browserTracingIntegration({
+      idleTimeout: 9000,
+    }),
+  ],
+  tracesSampleRate: 1,
+});
+
+// Also create a normal measure to ensure SDK still works
+performance.measure('normal-measure', {
+  start: performance.now(),
+  end: performance.now() + 50,
+  detail: 'this-should-work',
+});
+
+// Create a measure with complex detail object
+performance.measure('complex-detail-measure', {
+  start: performance.now(),
+  end: performance.now() + 25,
+  detail: {
+    nested: {
+      array: [1, 2, 3],
+      object: {
+        key: 'value',
+      },
+    },
+    metadata: {
+      type: 'test',
+      version: '1.0',
+      tags: ['complex', 'nested', 'object'],
+    },
+  },
+});

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

@@ -0,0 +1,65 @@
+import { expect } from '@playwright/test';
+import type { Event } from '@sentry/core';
+import { sentryTest } from '../../../../utils/fixtures';
+import { getFirstSentryEnvelopeRequest, shouldSkipTracingTest } from '../../../../utils/helpers';
+
+// This is a regression test for https://github.com/getsentry/sentry-javascript/issues/16347
+
+sentryTest(
+  'should handle permission denial gracefully and still create measure spans',
+  async ({ getLocalTestUrl, page, browserName }) => {
+    // Skip test on webkit because we can't validate the detail in the browser
+    if (shouldSkipTracingTest() || browserName === 'webkit') {
+      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(3); // All three measures should create spans
+
+    // Test 1: Verify the restricted-test-measure span exists but has no detail
+    const restrictedMeasure = measureSpans?.find(span => span.description === 'restricted-test-measure');
+    expect(restrictedMeasure).toBeDefined();
+    expect(restrictedMeasure?.data).toMatchObject({
+      'sentry.op': 'measure',
+      'sentry.origin': 'auto.resource.browser.metrics',
+    });
+
+    // Verify no detail attributes were added due to the permission error
+    const restrictedDataKeys = Object.keys(restrictedMeasure?.data || {});
+    const restrictedDetailKeys = restrictedDataKeys.filter(key => key.includes('detail'));
+    expect(restrictedDetailKeys).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',
+    });
+
+    // Test 3: Verify the complex detail object is captured correctly
+    const complexMeasure = measureSpans?.find(span => span.description === 'complex-detail-measure');
+    expect(complexMeasure).toBeDefined();
+    expect(complexMeasure?.data).toMatchObject({
+      'sentry.op': 'measure',
+      'sentry.origin': 'auto.resource.browser.metrics',
+      // The entire nested object is stringified as a single value
+      'sentry.browser.measure.detail.nested': JSON.stringify({
+        array: [1, 2, 3],
+        object: {
+          key: 'value',
+        },
+      }),
+      'sentry.browser.measure.detail.metadata': JSON.stringify({
+        type: 'test',
+        version: '1.0',
+        tags: ['complex', 'nested', 'object'],
+      }),
+    });
+  },
+);

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

@@ -10,7 +10,6 @@ performance.measure('Next.js-before-hydration', {
 window.Sentry = Sentry;
 
 Sentry.init({
-  debug: true,
   dsn: 'https://[email protected]/1337',
   integrations: [
     Sentry.browserTracingIntegration({

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,8 @@ export function _addMeasureSpans(
     attributes['sentry.browser.measure_start_time'] = measureStartTimestamp;
   }
 
+  _addDetailToSpanAttributes(attributes, entry as PerformanceMeasure);
+
   // Measurements from third parties can be off, which would create invalid spans, dropping transactions in the process.
   if (measureStartTimestamp <= measureEndTimestamp) {
     startAndEndSpan(span, measureStartTimestamp, measureEndTimestamp, {
@@ -493,6 +496,50 @@ export function _addMeasureSpans(
   }
 }
 
+function _addDetailToSpanAttributes(attributes: SpanAttributes, performanceMeasure: PerformanceMeasure): void {
+  try {
+    // Accessing detail might throw in some browsers (e.g., Firefox) due to security restrictions
+    const detail = performanceMeasure.detail;
+
+    if (!detail) {
+      return;
+    }
+
+    // Process detail based on its type
+    if (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
+          }
+        }
+      }
+      return;
+    }
+
+    if (isPrimitive(detail)) {
+      // Handle primitive details
+      attributes['sentry.browser.measure.detail'] = detail as SpanAttributeValue;
+      return;
+    }
+
+    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
+  }
+}
+
 /**
  * Instrument navigation entries
  * exported only for tests