Track Vue Components
Learn how to monitor the rendering performance of your application and its components with Sentry's Nuxt SDK.
Sentry's Nuxt SDK has a component-tracking feature that lets you monitor the performance of your Vue components. Enabling this feature provides you with spans in your transactions that represent the component lifecycle events and durations. This allows you to get a drilled-down view into how your components are behaving so you can do things like identify slow initializations or frequent updates, which might be impacting your app's performance.
To set up component tracking, you need to first configure performance monitoring. For details on how to do this, check out our Performance documentation.
By default, the Nuxt SDK tracks the rendering performance of your app (that is, its root component) on the initial page load. This operation is represented in the page load transaction by the ui.vue.render span.
You can also track your app's child components to get more details about the rendering process. This feature will create spans for each tracked component instance. The spans are called ui.vue.[hook] where [hook] is replaced by each tracked lifecycle stage. For example, the span representing the mount stage (the time between beforeMount and mounted) is called ui.vue.mount.
To set it up, add trackComponents in your Sentry.init call. You can also optionally add hooks, and timeout.
This is the main option that controls which child components should be tracked. Set it to true to track all of them or specify a list of individual components you want to track:
Sentry.init({
// ...
trackComponents: true,
// OR
trackComponents: [
"App",
"RwvHeader",
"RwvFooter",
"RwvArticleList",
"Pagination",
],
});
The default is false.
Control which lifecycle hooks should be tracked. This is helpful if, for example, you want to know if some components are removed during the initial page load, in which case you can add an unmount hook to the default:
Sentry.init({
// ...
trackComponents: true
hooks: ["mount", "update", "unmount"],
});
The following hooks are available to track in Vue 3: ['activate', 'create', 'unmount', 'mount', 'update']
Note, that when specifying hooks, we use the simple verb rather than before and -ed pairs. For example, unmount is correct, while beforeUnmount and unmounted are incorrect.
If you're using Vue 2, use destroy instead of unmount. But in Vue 3 destroy doesn't work because the names of the lifecycle hooks themselves changed.
The default set of hooks is ['activate', 'mount', 'update'].
You can specify how long the root rendering span should wait until the last component is rendered. Every new rendering cycle debounces the timeout and it starts counting from the beginning. Once the timeout is reached, tracking is completed and all the rendering information is sent to Sentry:
Sentry.init({
// ...
trackComponents: true,
timeout: 500,
});
The default is 2000.
You can also group the component-tracking options by using the optional tracingOptions property in Sentry.init:
Sentry.init({
// ...
tracingOptions: {
trackComponents: true;
timeout: 500;
hooks: ['mount', 'update'];
}
})
Note, that when you use this property there is no change in behaviour, as opposed to when you use the three top-level properties described above.
The default value for tracingOptions is undefined.
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").