Enrich attributes of Spans created from PerformanceMeasure events

[allista]

Problem Statement

Sentry automatically creates Spans from PerformanceEvents, which is great 👍

But manually created measure events contain the analog of Span.attributes named PerformanceMeasure.detail, which are not propagated to traces.

Here's how the native measure event looks in dev-tools:

And here's the Span created from it, lacking vital data:

My request is

...to enrich Span.attributes with the detail data 🙏

Thank you for consideration! 😊

Solution Brainstorm

The caveat is, of course, that the PerformanceMeasure.detail is not type-restricted and can be anything whatsoever:

interface PerformanceMeasureOptions {
    detail?: any;
    duration?: DOMHighResTimeStamp;
    end?: string | DOMHighResTimeStamp;
    start?: string | DOMHighResTimeStamp;
}

Naturally, I would expect Sentry to support the same data types as in Span.attributes itself. Anything extra can be gracefully dropped, or serialized somehow, if configured explicitly:

export function _convertToSpanAttributes(data: unknown): SpanAttributes {
  // type checks, attribute traversals, array maps, etc...
}

export function _extractAttributesFromEntry(entry: PerformanceEntry): SpanAttributes {
  if(isPerformanceMeasure(entry)) {
    return _convertToSpanAttributes(entry.detail);
  }
  // Here we can support more entry types
  return {};
}

export function _addMeasureSpans(...
  ...

  // The PerformanceMeasure may contain arbitrary metadata in "detail" attribute.
  // We try to add as much as possible from "detail" to attributes
  const attributesFromEntry = _extractAttributesFromEntry(entry);

  const attributes: SpanAttributes = {
    ...attributesFromEntry,
    [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.resource.browser.metrics',
  };

Product Area

Unknown

[getsantry]

Assigning to @getsentry/support for routing ⏲️

[AbhiPrasad]

transferring this to the JS SDK repo!

[AbhiPrasad]

I think this is a reasonable ask - opened a PR: #16240