-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feat(performance): create Interaction standalone spans on inp events #10709
Merged
edwardgou-sentry
merged 37 commits into
v7
from
egou/v7/feat/create-interaction-spans-on-inp
Feb 29, 2024
Merged
Changes from 5 commits
Commits
Show all changes
37 commits
Select commit
Hold shift + click to select a range
2d83f03
Merge branch 'egou/v7/feat/add-span-envelope-and-datacategory' of git…
edwardgou-sentry abe1bc2
Merge branch 'egou/v7/feat/add-exclusive-time-and-measurements-to-spa…
edwardgou-sentry 9ae7f95
Creates interaction spans with inp when inp is detected
edwardgou-sentry 84a6021
Adds sampling rate to inp spans
edwardgou-sentry 6bd6ff8
export isValidSampleRate
edwardgou-sentry 97ece4e
Merge branch 'v7' of github.com:getsentry/sentry-javascript into egou…
edwardgou-sentry ccd8ec1
Merge branch 'egou/v7/fix/browser-tracing-latest-route' of github.com…
edwardgou-sentry b2e4656
Merge branch 'egou/v7/feat/add-exclusive-time-and-measurements-to-spa…
edwardgou-sentry 5d53fa4
Merge branch 'egou/v7/feat/add-span-envelope-and-datacategory' of git…
edwardgou-sentry c2aa318
Merge branch 'egou/v7/feat/create-interaction-spans-on-inp' of github…
edwardgou-sentry 5ee3045
fix
edwardgou-sentry 9e24b2b
Merge branch 'egou/v7/feat/add-span-envelope-and-datacategory' of git…
edwardgou-sentry 690ecc1
snake case
edwardgou-sentry a937852
Merge branch 'egou/v7/feat/create-interaction-spans-on-inp' of github…
edwardgou-sentry 0559eab
Adds profile id, replay id, and user to standalone INP spans if they …
edwardgou-sentry 9b6d5a7
htmlTreeAsString span name
edwardgou-sentry 6fddd84
Merge branch 'v7' of github.com:getsentry/sentry-javascript into egou…
edwardgou-sentry 19cf74a
Merge branch 'egou/v7/feat/add-exclusive-time-and-measurements-to-spa…
edwardgou-sentry bbdc8f0
pull profile id from attributes into top level because relay expects …
edwardgou-sentry e5f21ab
refactor out some optional chaining
edwardgou-sentry 9a1b12e
Merge branch 'egou/v7/feat/add-exclusive-time-and-measurements-to-spa…
edwardgou-sentry 77f610b
update span creation
edwardgou-sentry 05f55f1
Merge branch 'egou/v7/feat/create-interaction-spans-on-inp' of github…
edwardgou-sentry d943c8d
refactor optional check
edwardgou-sentry 9e04846
Merge branch 'v7' of github.com:getsentry/sentry-javascript into egou…
edwardgou-sentry 8b929bc
Merge branch 'egou/v7/feat/add-sampling-rate-to-inp-spans' of github.…
edwardgou-sentry 059508c
increase size limit by 1 kb
edwardgou-sentry 65bb1ac
todo comment and update interactionIdtoRouteNameMapping replay to rep…
edwardgou-sentry 9782eaf
comment
edwardgou-sentry ac749fb
fix import
edwardgou-sentry 3336ff3
feat(webvitals): Add profile id, replay id, and user to standalone IN…
edwardgou-sentry b515f8e
feat(performance): Add sampling rate to INP spans. Also add replay id…
edwardgou-sentry 93f5c19
Merge branch 'v7' of github.com:getsentry/sentry-javascript into egou…
edwardgou-sentry a3f235f
move enableInp off experiment
edwardgou-sentry 5807e2d
performanceeventtiming interface
edwardgou-sentry 226c543
interactionId
edwardgou-sentry fc676fc
use more primitive types
edwardgou-sentry File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,6 +1,6 @@ | ||
/* eslint-disable max-lines */ | ||
import type { IdleTransaction, Transaction } from '@sentry/core'; | ||
import { getActiveTransaction, setMeasurement } from '@sentry/core'; | ||
import { SEMANTIC_ATTRIBUTE_MEASUREMENTS, Span, getActiveTransaction, getClient, setMeasurement } from '@sentry/core'; | ||
import type { Measurements, SpanContext } from '@sentry/types'; | ||
import { browserPerformanceTimeOrigin, getComponentName, htmlTreeAsString, logger, parseUrl } from '@sentry/utils'; | ||
|
||
|
@@ -9,14 +9,21 @@ import { DEBUG_BUILD } from '../../common/debug-build'; | |
import { | ||
addClsInstrumentationHandler, | ||
addFidInstrumentationHandler, | ||
addInpInstrumentationHandler, | ||
addLcpInstrumentationHandler, | ||
addPerformanceInstrumentationHandler, | ||
} from '../instrument'; | ||
import { WINDOW } from '../types'; | ||
import { getVisibilityWatcher } from '../web-vitals/lib/getVisibilityWatcher'; | ||
import type { NavigatorDeviceMemory, NavigatorNetworkInformation } from '../web-vitals/types'; | ||
import type { | ||
InteractionRouteNameMapping, | ||
NavigatorDeviceMemory, | ||
NavigatorNetworkInformation, | ||
} from '../web-vitals/types'; | ||
import { _startChild, isMeasurementValue } from './utils'; | ||
|
||
import { createSpanEnvelope } from '@sentry/core'; | ||
|
||
const MAX_INT_AS_BYTES = 2147483647; | ||
|
||
/** | ||
|
@@ -127,6 +134,22 @@ export function startTrackingInteractions(): void { | |
}); | ||
} | ||
|
||
/** | ||
* Start tracking INP webvital events. | ||
*/ | ||
export function startTrackingINP(interactionIdtoRouteNameMapping: InteractionRouteNameMapping): () => void { | ||
const performance = getBrowserPerformanceAPI(); | ||
if (performance && browserPerformanceTimeOrigin) { | ||
const inpCallback = _trackINP(interactionIdtoRouteNameMapping); | ||
|
||
return (): void => { | ||
inpCallback(); | ||
}; | ||
} | ||
|
||
return () => undefined; | ||
} | ||
|
||
/** Starts tracking the Cumulative Layout Shift on the current page. */ | ||
function _trackCLS(): () => void { | ||
return addClsInstrumentationHandler(({ metric }) => { | ||
|
@@ -171,6 +194,45 @@ function _trackFID(): () => void { | |
}); | ||
} | ||
|
||
/** Starts tracking the Interaction to Next Paint on the current page. */ | ||
function _trackINP(interactionIdtoRouteNameMapping: InteractionRouteNameMapping): () => void { | ||
return addInpInstrumentationHandler(({ metric }) => { | ||
const entry = metric.entries.find(e => e.name === 'click'); | ||
const client = getClient(); | ||
if (!entry || !client) { | ||
return; | ||
} | ||
const { release, environment } = client.getOptions(); | ||
/** Build the INP span, create an envelope from the span, and then send the envelope */ | ||
const startTime = msToSec((browserPerformanceTimeOrigin as number) + entry.startTime); | ||
const duration = msToSec(metric.value); | ||
const routeName = | ||
entry.interactionId !== undefined ? interactionIdtoRouteNameMapping[entry.interactionId].routeName : undefined; | ||
const span = new Span({ | ||
startTimestamp: startTime, | ||
endTimestamp: startTime + duration, | ||
op: 'ui.interaction.click', | ||
name: entry.target?.nodeName, | ||
attributes: { | ||
[SEMANTIC_ATTRIBUTE_MEASUREMENTS]: { | ||
inp: { value: metric.value, unit: 'millisecond' }, | ||
}, | ||
release, | ||
environment, | ||
transaction: routeName, | ||
There was a problem hiding this comment. Choose a reason for hiding this commentThe reason will be displayed to describe this comment to others. Learn more. Passing the origin route name of the interaction as |
||
}, | ||
exclusiveTime: metric.value, | ||
}); | ||
const envelope = span ? createSpanEnvelope(span) : undefined; | ||
const transport = client && client.getTransport(); | ||
if (transport && envelope) { | ||
transport.send(envelope).then(null, reason => { | ||
DEBUG_BUILD && logger.error('Error while sending interaction:', reason); | ||
}); | ||
} | ||
}); | ||
} | ||
|
||
/** Add performance related spans to a transaction */ | ||
export function addPerformanceEntries(transaction: Transaction): void { | ||
const performance = getBrowserPerformanceAPI(); | ||
|
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Oops, something went wrong.
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I don't think
nodeName
is correct. Need to update this to get some identifier for the target interaction element