Marc Mintel
5397309103
Some checks failed
Build & Deploy / 🔍 Prepare (push) Successful in 20s
Build & Deploy / 🧪 QA (push) Failing after 34s
Build & Deploy / 🏗️ Build (push) Has started running
Build & Deploy / 🚀 Deploy (push) Has been cancelled
Build & Deploy / 🧪 Smoke Test (push) Has been cancelled
Build & Deploy / ⚡ Lighthouse (push) Has been cancelled
Build & Deploy / 🔔 Notify (push) Has been cancelled
1 line
6.8 KiB
Plaintext
1 line
6.8 KiB
Plaintext
{"version":3,"file":"elementTiming.js","sources":["../../../src/metrics/elementTiming.ts"],"sourcesContent":["import type { SpanAttributes } from '@sentry/core';\nimport {\n browserPerformanceTimeOrigin,\n getActiveSpan,\n getCurrentScope,\n getRootSpan,\n SEMANTIC_ATTRIBUTE_SENTRY_OP,\n SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN,\n SEMANTIC_ATTRIBUTE_SENTRY_SOURCE,\n spanToJSON,\n startSpan,\n timestampInSeconds,\n} from '@sentry/core';\nimport { addPerformanceInstrumentationHandler } from './instrument';\nimport { getBrowserPerformanceAPI, msToSec } from './utils';\n\n// ElementTiming interface based on the W3C spec\ninterface PerformanceElementTiming extends PerformanceEntry {\n renderTime: number;\n loadTime: number;\n intersectionRect: DOMRectReadOnly;\n identifier: string;\n naturalWidth: number;\n naturalHeight: number;\n id: string;\n element: Element | null;\n url?: string;\n}\n\n/**\n * Start tracking ElementTiming performance entries.\n */\nexport function startTrackingElementTiming(): () => void {\n const performance = getBrowserPerformanceAPI();\n if (performance && browserPerformanceTimeOrigin()) {\n return addPerformanceInstrumentationHandler('element', _onElementTiming);\n }\n\n return () => undefined;\n}\n\n/**\n * exported only for testing\n */\nexport const _onElementTiming = ({ entries }: { entries: PerformanceEntry[] }): void => {\n const activeSpan = getActiveSpan();\n const rootSpan = activeSpan ? getRootSpan(activeSpan) : undefined;\n const transactionName = rootSpan\n ? spanToJSON(rootSpan).description\n : getCurrentScope().getScopeData().transactionName;\n\n entries.forEach(entry => {\n const elementEntry = entry as PerformanceElementTiming;\n\n // Skip entries without identifier (elementtiming attribute)\n if (!elementEntry.identifier) {\n return;\n }\n\n // `name` contains the type of the element paint. Can be `'image-paint'` or `'text-paint'`.\n // https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming#instance_properties\n const paintType = elementEntry.name as 'image-paint' | 'text-paint' | undefined;\n\n const renderTime = elementEntry.renderTime;\n const loadTime = elementEntry.loadTime;\n\n // starting the span at:\n // - `loadTime` if available (should be available for all \"image-paint\" entries, 0 otherwise)\n // - `renderTime` if available (available for all entries, except 3rd party images, but these should be covered by `loadTime`, 0 otherwise)\n // - `timestampInSeconds()` as a safeguard\n // see https://developer.mozilla.org/en-US/docs/Web/API/PerformanceElementTiming/renderTime#cross-origin_image_render_time\n const [spanStartTime, spanStartTimeSource] = loadTime\n ? [msToSec(loadTime), 'load-time']\n : renderTime\n ? [msToSec(renderTime), 'render-time']\n : [timestampInSeconds(), 'entry-emission'];\n\n const duration =\n paintType === 'image-paint'\n ? // for image paints, we can acually get a duration because image-paint entries also have a `loadTime`\n // and `renderTime`. `loadTime` is the time when the image finished loading and `renderTime` is the\n // time when the image finished rendering.\n msToSec(Math.max(0, (renderTime ?? 0) - (loadTime ?? 0)))\n : // for `'text-paint'` entries, we can't get a duration because the `loadTime` is always zero.\n 0;\n\n const attributes: SpanAttributes = {\n [SEMANTIC_ATTRIBUTE_SENTRY_ORIGIN]: 'auto.ui.browser.elementtiming',\n [SEMANTIC_ATTRIBUTE_SENTRY_OP]: 'ui.elementtiming',\n // name must be user-entered, so we can assume low cardinality\n [SEMANTIC_ATTRIBUTE_SENTRY_SOURCE]: 'component',\n // recording the source of the span start time, as it varies depending on available data\n 'sentry.span_start_time_source': spanStartTimeSource,\n 'sentry.transaction_name': transactionName,\n 'element.id': elementEntry.id,\n 'element.type': elementEntry.element?.tagName?.toLowerCase() || 'unknown',\n 'element.size':\n elementEntry.naturalWidth && elementEntry.naturalHeight\n ? `${elementEntry.naturalWidth}x${elementEntry.naturalHeight}`\n : undefined,\n 'element.render_time': renderTime,\n 'element.load_time': loadTime,\n // `url` is `0`(number) for text paints (hence we fall back to undefined)\n 'element.url': elementEntry.url || undefined,\n 'element.identifier': elementEntry.identifier,\n 'element.paint_type': paintType,\n };\n\n startSpan(\n {\n name: `element[${elementEntry.identifier}]`,\n attributes,\n startTime: spanStartTime,\n onlyIfParent: true,\n },\n span => {\n span.end(spanStartTime + duration);\n },\n );\n });\n};\n"],"names":[],"mappings":"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"} |