Web Vitals Module
The SDK should auto-instrument:
- Page Loads as Transactions
- Interactions that trigger an INP as standalone Spans
Pageloads Transaction Conventions
Properties
| Property | Description |
|---|---|
transaction | A low cardinality string of the pageload route. Can be a route template if applicable to the frontend platform. e.g., "/settings/{project}/" |
contexts.trace.op | Always pageload |
contexts.browser.name | The client browser on which the page was loaded. Supported values include Chrome, Firefox, Safari, Opera, and Edge. |
Measurements
Web Vital metrics should be captured as measurements on the pageload transaction.
Copied
{
"measurements": {
"lcp": { "value": 2049, "unit": "millisecond" },
"fcp": { "value": 2049, "unit": "millisecond" },
"cls": { "value": 0.21, "unit": "" },
"ttfb": { "value": 13, "unit": "millisecond" },
}
}| Measurement | Description |
|---|---|
measurements.lcp | The Largest Contentful Paint metric detected on the pageload. |
measurements.fcp | The First Contentful Paint metric detected on the pageload. |
measurements.cls | The Cumulative Layout Shift metric detected on the pageload. |
measurements.ttfb | The Time To First Byte metric detected on the pageload. |
Interactions Span Conventions
Attributes
| Attribute | Description |
|---|---|
transaction | A low cardinality string of the page route that the INP event occured on. Can be a route template if applicable to the frontend platform. e.g., "/settings/{project}/" |
description | If applicable, the selector string that identifies the element which the interaction occured on. e.g. "Sidebar > span.user > a" |
op | ui.interaction.click, ui.interaction.press, ui.interaction.hover, or ui.interaction.drag |
Measurements
The Interaction to Next Paint metric should be captured as a measurement on the interaction span.
Copied
{
"measurements": {
"inp": { "value": 500, "unit": "millisecond" },
}
}| Measurement | Description |
|---|---|
measurements.inp | The Interaction to Next Paint metric detected on the interaction. |
You can edit this page on GitHub.