Profiling
Browser Profiling is currently in beta. Beta features are still in progress and may have bugs. We recognize the irony.
Because our browser profiling integration is built on top of the profiler exposed by the JS Self-Profiling API, it's in beta and will likely only move out once the official spec progresses and gains adoption. As with any beta package, there are risks involved in using it - see platform status
Please note, that since profiling API is currently only implemented in Chromium based browsers, the profiles collected will inherently be biased towards that demographic. This is something you'll need to consider if you're basing your decisions on the data collected. We hope that as the API gains adoption, other browsers will implement it as well. If you find browser profiling feature helpful and would like to see it gain further adoption, please consider supporting the spec at the official WICG repository.
In order to get started with browser profiling, you'll need to:
- Install the @sentry/browser SDK
- Configure the document response header to include
Document-Policy: js-profiling
- Configure the SDK to use the BrowserProfilingIntegration and set profilesSampleRate
Install
Install our JavaScript browser SDK using either yarn
or npm
, the minimum version that supports profiling is 7.60.0.
yarn add @sentry/angular
Add Document-Policy: js-profiling header
In order for the profiler to start, the document response header has to include a Document-Policy
header key with the js-profiling
value.
How you do this will depend on your server. If you're using a server like express, you'll be able to use the response.set function.
app.get("/", (request, response) => {
response.set("Document-Policy", "js-profiling");
response.sendFile("index.html");
});
Configure
Configuration should happen as early as possible in your application's lifecycle. Once this is done, Sentry's JavaScript SDK will capture all unhandled exceptions and transactions.
import * as Sentry from "@sentry/angular-ivy";
Sentry.init({
dsn: "https://examplePublicKey@o0.ingest.sentry.io/0",
integrations: [
// Add browser profiling integration to the list of integrations
new Sentry.BrowserTracing(),
new Sentry.BrowserProfilingIntegration(),
],
// Set tracesSampleRate to 1.0 to capture 100%
// of transactions for performance monitoring.
// We recommend adjusting this value in production
tracesSampleRate: 1.0,
// Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
// Set profilesSampleRate to 1.0 to profile every transaction.
// Since profilesSampleRate is relative to tracesSampleRate,
// the final profiling rate can be computed as tracesSampleRate * profilesSampleRate
// For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would
// results in 25% of transactions being profiled (0.5*0.5=0.25)
profilesSampleRate: 1.0,
});
Our documentation is open source and available on GitHub. Your contributions are welcome, whether fixing a typo (drat!) to suggesting an update ("yeah, this would be better").
- Package:
- npm:@sentry/angular
- Version:
- 7.86.0
- Repository:
- https://github.com/getsentry/sentry-javascript