Set Up Profiling

The browser profiling integration is built using the JS Self-Profiling API and will likely only move out of beta once the specification progresses and gains adoption. See platform status.

Note that since the profiling API is currently only exposed in Chromium, profiles collected only include that demographic. We hope that as the API gains adoption, other browsers will implement it as well.

With profiling, Sentry tracks your software's performance by sampling your program's call stack in a variety of environments. This feature collects function-level information about your code and enables you to fine-tune your program's performance. Sentry's profiler captures function calls and their exact locations, aggregates them, and shows you the most common code paths of your program. This highlights areas you could optimize to help increase both the performance of your code and user satisfaction.

In a browser environment, profiling can help you pinpoint causes of UI jank, surface why values like interaction to next paint (INP) are performing poorly, or why a long task was keeping the browser from repainting the screen and causing frame drops. All of this information enables you to fix real world performance issues and deliver a snappier user experience to your users.

Prerequisites

To get started with JavaScript browser profiling, you'll need to:

• Configure the document response header to include Document-Policy: js-profiling
• Configure the SDK to use the browserProfilingIntegration and set profileSessionSampleRate (UI Profiling) or profilesSampleRate (deprecated transaction-based Profiling)

Step 1: Install the Vue SDK

Install our Vue SDK using either npm, yarn, or pnpm.

npm install @sentry/vue --save 

Step 2: Add Document-Policy: js-profiling header

For the JavaScript browser profiler to start, the document response header needs 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"); }); 

Step 3: Configure the Vue SDK

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/vue";  Sentry.init({  dsn: "___PUBLIC_DSN___",  integrations: [  // Add browser profiling integration to the list of integrations  Sentry.browserTracingIntegration(),  Sentry.browserProfilingIntegration(),  ],   // Set tracesSampleRate to 1.0 to capture 100%  // of transactions for tracing.  // We recommend adjusting this value in production  tracesSampleRate: 1.0,  // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled  tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],   // Set profileSessionSampleRate to 1.0 to profile during every session.  // The decision, whether to profile or not, is made once per session (when the SDK is initialized).  profileSessionSampleRate: 1.0, }); 

Profiling Modes

Profiling supports two modes: manual and trace. These modes are mutually exclusive and cannot be used at the same time.

In manual mode, you can manage the profiling data collection via calls to Sentry.uiProfiler.startProfiler and Sentry.uiProfiler.stopProfiler. You have full control over when the profiler runs.

In trace mode, the profiler manages its own start and stop calls based on spans. It continues to run while at least one span is active, and stops when there are no active spans.

Manual Lifecycle Profiling

Manual lifecycle profiling is the default mode and enables you to start and stop the profiler manually.

After enabling the browserProfilingIntegration and setting a profileSessionSampleRate, you can start and stop the profiler with the following calls:

// All spans (unless those discarded by sampling) will have profiling data attached to them. Sentry.uiProfiler.startProfiler(); // Code executed between these two calls will be profiled Sentry.uiProfiler.stopProfiler(); 

Trace Lifecycle Profiling

To enable trace lifecycle profiling, enable tracing and set profileLifecycle to 'trace' in your SDK configuration.

Sentry.init({  dsn: "___PUBLIC_DSN___",  integrations: [  Sentry.browserTracingIntegration(), // Enables tracing  Sentry.browserProfilingIntegration(),  ],  tracesSampleRate: 1.0, // Enables tracing  profileSessionSampleRate: 1.0, 
 profileLifecycle: "trace", 
}); 

The Difference Between DevTools & Sentry's JavaScript Browser Profiler

What does Sentry's JavaScript browser profile offer that Chrome DevTools does not?

• Sentry's JavaScript profiler runs in production and captures real user data, showing real-world performance. DevTools runs locally and only shows profiles of what's running on your machine.
• Sentry runs at a lower sampling rate of 100Hz with a 10ms sample period versus a sampling rate of 1000Hz and a 1ms sample period for DevTools.
• Sentry supports deobfuscation, making it so that all the function names in your code are correct. Typically, when you run JavaScript code, it's minified, meaning that all the function names are replaced with machine-generated abbreviations.

Please note, that since the browser profiling API is currently only implemented in Chromium-based browsers, the profiles collected with Sentry's JavaScript browser profiling will inherently be biased toward that demographic. This is something that you'll need to consider if you're basing your decisions on the data collected.

We hope that as the JavaScript browser profiling API gains adoption, other browsers will implement it as well. If you find the browser profiling feature helpful and would like to see it gain further adoption, please consider supporting the spec at the official WICG repository.