From af002e0a1fb85ec99eb383f14778cd7f46129b4e Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Fri, 22 Nov 2024 13:46:02 +0100 Subject: [PATCH 1/3] Instruct to use the recommended way of using Vue component tracking --- .../nuxt/features/component-tracking.mdx | 105 ++++++++---------- .../vue/features/component-tracking.mdx | 105 +++++++++--------- .../getting-started-config/javascript.vue.mdx | 5 +- 3 files changed, 101 insertions(+), 114 deletions(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index 8f885af22c0bd..fbc6124f26891 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -4,7 +4,7 @@ description: "Learn how to monitor the rendering performance of your application sidebar_order: 10 --- -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. +Sentry's Nuxt SDK offers a feature to monitor the performance of your Vue components: component tracking. 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. ## Usage @@ -18,87 +18,78 @@ To set up component tracking, you need to first configure performance monitoring 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. -### Child Components +### Child Component Tracking 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`](#trackcomponents) in your `Sentry.init` call. You can also optionally add [`hooks`](#hooks), and [`timeout`](#timeout). +To set it up, add the Vue Integration to your `Sentry.init()` call and, set the `tracingOptions.trackComponents` option. +Set the `trackComponent` option to `true` to track all of your child components, or specify a list of individual comopnents you want to track: -#### `trackComponents` +```javascript {5-17} +import * as Sentry from "@sentry/nuxt"; -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: - -```javascript Sentry.init({ - // ... - trackComponents: true, - // OR - trackComponents: [ - "App", - "RwvHeader", - "RwvFooter", - "RwvArticleList", - "Pagination", + integrations: [ + Sentry.vueIntegration({ + tracingOptions: { + trackComponents: true, + // OR + trackComponents: [ + "App", + "RwvHeader", + "RwvFooter", + "RwvArticleList", + "Pagination", + ], + }, + }), ], }); ``` -The default is `false`. +The default value for `trackComponents` is `false`. + +#### Track Specific Component Lifecycle Hooks -#### `hooks` +You can 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 configure the integration to also track `unmount` hooks: -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: +```javascript {8} +import * as Sentry from "@sentry/nuxt"; -```javascript Sentry.init({ - // ... + integrations: [ + Sentry.vueIntegration({ + tracingOptions: { 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. +The following hooks are available to track: `['activate', 'create', 'unmount', 'mount', 'update']` - - -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](https://v3-migration.vuejs.org/breaking-changes/#other-minor-changes). - - +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. -The default set of hooks is `['activate', 'mount', 'update']`. +#### Configure a Timeout for Component Tracking -#### `timeout` +You can specify how long the root rendering span should wait for the last component to render by configuring the `timeout` option in milliseconds. +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: -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: +```javascript {8} +import * as Sentry from "@sentry/nuxt"; -```javascript Sentry.init({ - // ... - trackComponents: true, - timeout: 500, + integrations: [ + Sentry.vueIntegration({ + tracingOptions: { + trackComponents: true, + timeout: 500, // milliseconds + }, + }), + ], }); ``` -The default is `2000`. - -#### Alternative Configuration With `tracingOptions` - -You can also group the component-tracking options by using the optional `tracingOptions` property in `Sentry.init`: - -```javascript -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`. \ No newline at end of file +The default timeout is `2000` milliseconds. diff --git a/docs/platforms/javascript/guides/vue/features/component-tracking.mdx b/docs/platforms/javascript/guides/vue/features/component-tracking.mdx index 1d1240edfdb93..977bc1185c0c1 100644 --- a/docs/platforms/javascript/guides/vue/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/vue/features/component-tracking.mdx @@ -4,7 +4,7 @@ description: "Learn how Sentry's Vue SDK allows you to monitor the rendering per sidebar_order: 10 --- -Sentry's Vue SDK offers a feature to monitor the performance of your Vue components: component tracking. Enabling this feature provides you with spans in your transactions that represent the component life cycle 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 have an impact on your app's performance. +Sentry's Vue SDK offers a feature to monitor the performance of your Vue components: component tracking. 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 have an impact on your app's performance. ## Usage @@ -18,87 +18,86 @@ To set up component tracking, you need to configure tracing. For details on how By default, the Vue 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. -### Child Components +### Child Component Tracking 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, at minimum, [`trackComponents`](#trackcomponents) in your `Sentry.init` call. Optionally, you can also add [`hooks`](#hooks), and [`timeout`](#timeout). +To set it up, add the Vue Integration to your `Sentry.init()` call and, set the `tracingOptions.trackComponents` option. +Set the `trackComponent` option to `true` to track all of your child components, or specify a list of individual comopnents you want to track: -#### `trackComponents` +```javascript {5-17} +import * as Sentry from "@sentry/vue"; -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: - -```javascript Sentry.init({ - // ... - trackComponents: true, - // OR - trackComponents: [ - "App", - "RwvHeader", - "RwvFooter", - "RwvArticleList", - "Pagination", + integrations: [ + Sentry.vueIntegration({ + tracingOptions: { + trackComponents: true, + // OR + trackComponents: [ + "App", + "RwvHeader", + "RwvFooter", + "RwvArticleList", + "Pagination", + ], + }, + }), ], }); ``` -The default is `false`. +The default value for `trackComponents` is `false`. + +#### Track Specific Component Lifecycle Hooks -#### `hooks` +You can 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 configure the integration to also track `unmount` hooks: -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 a `unmount` hook to the default: +```javascript {8} +import * as Sentry from "@sentry/vue"; -```javascript Sentry.init({ - // ... - trackComponents: true - hooks: ["mount", "update", "unmount"], + integrations: [ + Sentry.vueIntegration({ + tracingOptions: { + trackComponents: true + hooks: ["mount", "update", "unmount"], + }, + }), + ], }); ``` -The following hooks are available to track in Vue 3: `['activate', 'create', 'unmount', 'mount', 'update']` +The default set of tracked hooks is `['activate', '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. +The following hooks are available to track in Vue 3: `['activate', 'create', 'unmount', 'mount', 'update']` -In Vue 2, use `destroy` instead of `unmount`. `destroy` does not work in Vue 3, as the names of the lifecycle hooks themselves [changed](https://v3-migration.vuejs.org/breaking-changes/#other-minor-changes) in Vue 3. +In Vue 2, use `destroy` instead of `unmount`. `destroy` does not work in Vue 3, as the names of the lifecycle hooks [changed](https://v3-migration.vuejs.org/breaking-changes/#other-minor-changes) in Vue 3. -The default set of hooks is `['activate', '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. -#### `timeout` +#### Configure a Timeout for Component Tracking -You can specify how long the root rendering span should wait for the last component to render. +You can specify how long the root rendering span should wait for the last component to render by configuring the `timeout` option in milliseconds. 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: -```javascript -Sentry.init({ - // ... - trackComponents: true, - timeout: 500, -}); -``` - -The default is `2000`. - -#### Alternative Configuration With `tracingOptions` +```javascript {8} +import * as Sentry from "@sentry/vue"; -You can also group the component tracking options by using the optional `tracingOptions` property in `Sentry.init`: - -```javascript Sentry.init({ - // ... - tracingOptions: { - trackComponents: true; - timeout: 500; - hooks: ['mount', 'update']; - } -}) + integrations: [ + Sentry.vueIntegration({ + tracingOptions: { + trackComponents: true, + timeout: 500, // milliseconds + }, + }), + ], +}); ``` -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`. +The default timeout is `2000` milliseconds. diff --git a/platform-includes/getting-started-config/javascript.vue.mdx b/platform-includes/getting-started-config/javascript.vue.mdx index 1bfdf8a787c82..870cfacb8ea36 100644 --- a/platform-includes/getting-started-config/javascript.vue.mdx +++ b/platform-includes/getting-started-config/javascript.vue.mdx @@ -2,7 +2,6 @@ To initialize Sentry in your Vue application, add the following code snippet to ### Vue 3 - ```javascript {filename:main.js} {"onboardingOptions": {"performance": "16, 19-26", "session-replay": "17, 27-31"}} import { createApp } from "vue"; import { createRouter } from "vue-router"; @@ -43,7 +42,6 @@ app.mount("#app"); ### Vue 2 - ```javascript {filename:main.js} {"onboardingOptions": {"performance": "15, 18-25", "session-replay": "16, 26-30"}} import Vue from "vue"; import Router from "vue-router"; @@ -93,8 +91,7 @@ The SDK accepts a few Vue-specific `Sentry.init` configuration options: - `attachProps` (defaults to `true`) - Includes all Vue components' props with the events. - `logErrors` (defaults to `true`) - Decides whether SDK should call Vue's original `logError` function as well. -- `trackComponents` (defaults to `false`) - Track your app's components. Learn more about [component tracking](./features/component-tracking) and all its options. - +- Check out how to [Track Vue Components](./features/component-tracking) for performance. ### Late-Defined Vue Apps From 901266e80596c1b8b633716286d6b739037d9530 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Mon, 25 Nov 2024 09:26:34 +0100 Subject: [PATCH 2/3] Add default tracked hooks --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 ++ 1 file changed, 2 insertions(+) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index fbc6124f26891..f76b02ca124cc 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -68,6 +68,8 @@ Sentry.init({ }); ``` +The default set of tracked hooks is `['activate', 'mount', 'update']`. + The following hooks are available to track: `['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. From 661d5624f7b803bbda094a18899dc7bb47ee99e1 Mon Sep 17 00:00:00 2001 From: Luca Forstner Date: Mon, 25 Nov 2024 09:34:12 +0100 Subject: [PATCH 3/3] Revert nuxt --- .../nuxt/features/component-tracking.mdx | 105 ++++++++++-------- 1 file changed, 56 insertions(+), 49 deletions(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index f76b02ca124cc..65ea8a4c8adac 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -4,7 +4,7 @@ description: "Learn how to monitor the rendering performance of your application sidebar_order: 10 --- -Sentry's Nuxt SDK offers a feature to monitor the performance of your Vue components: component tracking. 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. +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. ## Usage @@ -18,80 +18,87 @@ To set up component tracking, you need to first configure performance monitoring 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. -### Child Component Tracking +### Child Components 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 the Vue Integration to your `Sentry.init()` call and, set the `tracingOptions.trackComponents` option. -Set the `trackComponent` option to `true` to track all of your child components, or specify a list of individual comopnents you want to track: +To set it up, add [`trackComponents`](#trackcomponents) in your `Sentry.init` call. You can also optionally add [`hooks`](#hooks), and [`timeout`](#timeout). -```javascript {5-17} -import * as Sentry from "@sentry/nuxt"; +#### `trackComponents` +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: + +```javascript Sentry.init({ - integrations: [ - Sentry.vueIntegration({ - tracingOptions: { - trackComponents: true, - // OR - trackComponents: [ - "App", - "RwvHeader", - "RwvFooter", - "RwvArticleList", - "Pagination", - ], - }, - }), + // ... + trackComponents: true, + // OR + trackComponents: [ + "App", + "RwvHeader", + "RwvFooter", + "RwvArticleList", + "Pagination", ], }); ``` -The default value for `trackComponents` is `false`. - -#### Track Specific Component Lifecycle Hooks +The default is `false`. -You can 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 configure the integration to also track `unmount` hooks: +#### `hooks` -```javascript {8} -import * as Sentry from "@sentry/nuxt"; +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: +```javascript Sentry.init({ - integrations: [ - Sentry.vueIntegration({ - tracingOptions: { + // ... trackComponents: true hooks: ["mount", "update", "unmount"], - }, - }), - ], }); ``` -The default set of tracked hooks is `['activate', 'mount', 'update']`. +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. -The following hooks are available to track: `['activate', 'create', 'unmount', 'mount', 'update']` + + +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](https://v3-migration.vuejs.org/breaking-changes/#other-minor-changes). -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. + -#### Configure a Timeout for Component Tracking +The default set of hooks is `['activate', 'mount', 'update']`. -You can specify how long the root rendering span should wait for the last component to render by configuring the `timeout` option in milliseconds. -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: +#### `timeout` -```javascript {8} -import * as Sentry from "@sentry/nuxt"; +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: +```javascript Sentry.init({ - integrations: [ - Sentry.vueIntegration({ - tracingOptions: { - trackComponents: true, - timeout: 500, // milliseconds - }, - }), - ], + // ... + trackComponents: true, + timeout: 500, }); ``` -The default timeout is `2000` milliseconds. +The default is `2000`. + +#### Alternative Configuration With `tracingOptions` + +You can also group the component-tracking options by using the optional `tracingOptions` property in `Sentry.init`: + +```javascript +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`.