Web Vitals Module

The SDK should auto-instrument:

PropertyDescription
transactionA low cardinality string of the pageload route. Can be a route template if applicable to the frontend platform. e.g., "/settings/{project}/"
contexts.trace.opAlways pageload
contexts.browser.nameThe client browser on which the page was loaded. Supported values include Chrome, Firefox, Safari, Opera, and Edge.

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" }
  }
}
MeasurementDescription
measurements.lcpThe Largest Contentful Paint metric detected on the pageload.
measurements.fcpThe First Contentful Paint metric detected on the pageload.
measurements.clsThe Cumulative Layout Shift metric detected on the pageload.
measurements.ttfbThe Time To First Byte metric detected on the pageload.

AttributeDescription
transactionA 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}/"
descriptionIf applicable, the selector string that identifies the element which the interaction occured on. e.g. "Sidebar > span.user > a"
opui.interaction.click, ui.interaction.press, ui.interaction.hover, or ui.interaction.drag

The Interaction to Next Paint metric should be captured as a measurement on the interaction span.

Copied
{
  "measurements": {
    "inp": { "value": 500, "unit": "millisecond" }
  }
}
MeasurementDescription
measurements.inpThe Interaction to Next Paint metric detected on the interaction.
Previous
Screen Loads Module
Next
OpenTelemetry Support
Help improve this content
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) or suggesting an update ("yeah, this would be better").