From e71d2f1946f8c7d17e622aefc94d488e1dc6b38e Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Thu, 5 Sep 2024 09:32:16 +0200 Subject: [PATCH 01/22] framework-features-prio --- docs/platforms/javascript/guides/vue/config.yml | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/platforms/javascript/guides/vue/config.yml b/docs/platforms/javascript/guides/vue/config.yml index 1f09d3ee21f11..4e036380fe39e 100644 --- a/docs/platforms/javascript/guides/vue/config.yml +++ b/docs/platforms/javascript/guides/vue/config.yml @@ -1,5 +1,6 @@ title: Vue sdk: sentry.javascript.vue +sidebar_order: 4 categories: - javascript - browser From df570a7df826746b7de566db3d911d02723eb743 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Thu, 5 Sep 2024 09:52:28 +0200 Subject: [PATCH 02/22] Update index.mdx --- docs/platforms/javascript/guides/vue/features/index.mdx | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/platforms/javascript/guides/vue/features/index.mdx b/docs/platforms/javascript/guides/vue/features/index.mdx index aa6db25956925..96de5f117a706 100644 --- a/docs/platforms/javascript/guides/vue/features/index.mdx +++ b/docs/platforms/javascript/guides/vue/features/index.mdx @@ -2,6 +2,7 @@ title: Vue Features description: "Learn how Sentry's Vue SDK exposes features for first class integration with Vue." excerpt: "" +sidebar_order: 4 --- The Sentry Vue SDK offers Vue-specific features for first class integration with the framework. From 1b04a718dc8e7d5c669e1af9c95abf8b830af833 Mon Sep 17 00:00:00 2001 From: Steven Eubank Date: Thu, 5 Sep 2024 11:02:06 +0200 Subject: [PATCH 03/22] Add vue to nuxt, fix ordering for react and vue Main content changes, are that for Nuxt state that vue-router is auto-insturmented should confirm, the remaining vue features are correct for nuxt shound confirm, if the react features are relevant to add for Next and Remix. If yes should we simply link or past over as well --- .../javascript/guides/nuxt/config.yml | 5 +- .../nuxt/features/component-tracking.mdx | 104 ++++++++++++++++++ .../javascript/guides/nuxt/features/index.mdx | 9 ++ .../guides/nuxt/features/multiple-apps.mdx | 33 ++++++ .../guides/nuxt/features/vue-router.mdx | 28 +++++ .../guides/react/features/index.mdx | 1 + .../javascript/guides/vue/features/index.mdx | 1 - 7 files changed, 178 insertions(+), 3 deletions(-) create mode 100644 docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx create mode 100644 docs/platforms/javascript/guides/nuxt/features/index.mdx create mode 100644 docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx create mode 100644 docs/platforms/javascript/guides/nuxt/features/vue-router.mdx diff --git a/docs/platforms/javascript/guides/nuxt/config.yml b/docs/platforms/javascript/guides/nuxt/config.yml index e55b63f7ffaf4..88f0807af540e 100644 --- a/docs/platforms/javascript/guides/nuxt/config.yml +++ b/docs/platforms/javascript/guides/nuxt/config.yml @@ -1,6 +1,7 @@ -title: Nuxt +title: Vue description: Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. sdk: sentry.javascript.nuxt categories: + - javascript - browser - - server + - server \ No newline at end of file diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx new file mode 100644 index 0000000000000..107bb21b1e3d2 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -0,0 +1,104 @@ +--- +title: Track Vue Components +description: "Learn how Sentry's Nuxt SDK allows you to monitor the rendering performance of your application and its components." +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 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. + +## Usage + + + +To set up component tracking, you need to configure performance monitoring. For details on how to do this, check out our [Performance documentation](/platforms/javascript/guides/nuxt/performance/). + + + +### Initial Application Load + +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 + +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). + +#### `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({ + // ... + trackComponents: true, + // OR + trackComponents: [ + "App", + "RwvHeader", + "RwvFooter", + "RwvArticleList", + "Pagination", + ], +}); +``` + +The default is `false`. + +#### `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 +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. + + + +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. + + + +The default set of hooks is `['activate', 'mount', 'update']`. + +#### `timeout` + +You can specify how long the root rendering span should wait for the last component to render. +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` + +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 diff --git a/docs/platforms/javascript/guides/nuxt/features/index.mdx b/docs/platforms/javascript/guides/nuxt/features/index.mdx new file mode 100644 index 0000000000000..30a260ffdaba6 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/features/index.mdx @@ -0,0 +1,9 @@ +--- +title: Vue Features +description: "Learn how Sentry's Nuxt SDK exposes features for first class integration with Vue." +sidebar_order: 4 +--- + +The Sentry Nuxt SDK offers Vue-specific features for first class integration with the framework. + + diff --git a/docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx b/docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx new file mode 100644 index 0000000000000..740be2f01c347 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx @@ -0,0 +1,33 @@ +--- +title: Multiple Vue Apps +description: "Learn how to use the SDK to instrument multiple Vue 3 apps." +sidebar_order: 20 +--- + +Vue 3 allows you to use multiple apps with the same Sentry SDK instance, as well as add more apps dynamically after the SDK has been already initialized. + +### Multiple Apps + +Pass all your initially created apps to the `app` option in `Sentry.init`: + +```javascript {filename:main.js} +const appOne = Vue.createApp(App); +const appTwo = Vue.createApp(App); +const appThree = Vue.createApp(App); + +Sentry.init({ + app: [appOne, appTwo, appThree], +}); +``` + +### Dynamic Initialization + +If some of your apps are initialized at a later point, you can add Sentry to them like so: + +```javascript {filename:main.js} +// ... +const myLazyApp = createApp(MiscApp); + +myLazyApp.mixin(Sentry.createTracingMixins({ trackComponents: true })); +Sentry.attachErrorHandler(myLazyApp); +``` diff --git a/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx new file mode 100644 index 0000000000000..54267467f80c6 --- /dev/null +++ b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx @@ -0,0 +1,28 @@ +--- +title: Vue Router +description: "Learn about Sentry's Vue Routing integration." +--- + +Nuxt uses the vue-router by default, and our Nuxt SDK instruments your routing automaitcally, to parameterize transaction according to your routes. + +Our routing instrumentation supports `vue-router` v2, v3, and v4. + + + + +## Configuration + +You can pass an optional configuration object as a second argument to the browser tracing integration: + +```javascript +Sentry.browserTracingIntegration({ + router, + routeLabel: "path", +}); +``` + +The available options are: + +| Key | Type | Default | Description | +| ---------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | +| routeLabel | string | `name` | The label to use for the route transactions. Can be either `name` or `path`. When this is `name`, the transaction will use `route.name`, if it is set, and else use the path of the route. By setting this to `path` you can opt-out of this and always use the path. | \ No newline at end of file diff --git a/docs/platforms/javascript/guides/react/features/index.mdx b/docs/platforms/javascript/guides/react/features/index.mdx index 2a6d1ae879155..76e796f7a3037 100644 --- a/docs/platforms/javascript/guides/react/features/index.mdx +++ b/docs/platforms/javascript/guides/react/features/index.mdx @@ -1,6 +1,7 @@ --- title: React Features description: "Learn how Sentry's React SDK exposes custom components for first class integration with the React framework." +sidebar_order: 4 --- The Sentry React SDK offers React-specific features for first class integration with the framework. diff --git a/docs/platforms/javascript/guides/vue/features/index.mdx b/docs/platforms/javascript/guides/vue/features/index.mdx index 96de5f117a706..8b5a6dbaa0182 100644 --- a/docs/platforms/javascript/guides/vue/features/index.mdx +++ b/docs/platforms/javascript/guides/vue/features/index.mdx @@ -1,7 +1,6 @@ --- title: Vue Features description: "Learn how Sentry's Vue SDK exposes features for first class integration with Vue." -excerpt: "" sidebar_order: 4 --- From c536fdc718630cf0a5a12797d232a2ed5c96e9a9 Mon Sep 17 00:00:00 2001 From: Steven Eubank Date: Thu, 5 Sep 2024 11:34:12 +0200 Subject: [PATCH 04/22] test side bar orde config --- docs/platforms/javascript/guides/nuxt/config.yml | 1 + docs/platforms/javascript/guides/react/config.yml | 1 + 2 files changed, 2 insertions(+) diff --git a/docs/platforms/javascript/guides/nuxt/config.yml b/docs/platforms/javascript/guides/nuxt/config.yml index 88f0807af540e..2333b9e36cc7c 100644 --- a/docs/platforms/javascript/guides/nuxt/config.yml +++ b/docs/platforms/javascript/guides/nuxt/config.yml @@ -1,6 +1,7 @@ title: Vue description: Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. sdk: sentry.javascript.nuxt +sidebar_order: 4 categories: - javascript - browser diff --git a/docs/platforms/javascript/guides/react/config.yml b/docs/platforms/javascript/guides/react/config.yml index c21149790e068..0027133d3177c 100644 --- a/docs/platforms/javascript/guides/react/config.yml +++ b/docs/platforms/javascript/guides/react/config.yml @@ -1,6 +1,7 @@ title: React description: "Learn about Sentry's React SDK and how it automatically reports errors and exceptions in your application." sdk: sentry.javascript.react +sidebar_order: 4 categories: - javascript - browser From b923c42aaf390782cf31ab884ae7fbed5617b285 Mon Sep 17 00:00:00 2001 From: Steven Eubank Date: Thu, 5 Sep 2024 15:05:29 +0200 Subject: [PATCH 05/22] Update config.yml --- docs/platforms/javascript/guides/nuxt/config.yml | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/config.yml b/docs/platforms/javascript/guides/nuxt/config.yml index 2333b9e36cc7c..0aaed8c3b770f 100644 --- a/docs/platforms/javascript/guides/nuxt/config.yml +++ b/docs/platforms/javascript/guides/nuxt/config.yml @@ -1,4 +1,4 @@ -title: Vue +title: Nuxt description: Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. sdk: sentry.javascript.nuxt sidebar_order: 4 From 11abacab46a891c7e387b23587dd570bc7d4f1ec Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 9 Sep 2024 12:04:33 +0200 Subject: [PATCH 06/22] Update docs/platforms/javascript/guides/nuxt/features/vue-router.mdx Co-authored-by: Sigrid Huemer <32902192+s1gr1d@users.noreply.github.com> --- docs/platforms/javascript/guides/nuxt/features/vue-router.mdx | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx index 54267467f80c6..c8c20af65c4fe 100644 --- a/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx @@ -3,9 +3,7 @@ title: Vue Router description: "Learn about Sentry's Vue Routing integration." --- -Nuxt uses the vue-router by default, and our Nuxt SDK instruments your routing automaitcally, to parameterize transaction according to your routes. - -Our routing instrumentation supports `vue-router` v2, v3, and v4. +Nuxt uses the `vue-router` under the hood, and our Nuxt SDK instruments your routing automatically, to parameterize transaction according to your routes. From 9b25436e2767d139491c1b771fbf2c9d2f40ec16 Mon Sep 17 00:00:00 2001 From: Steven Eubank Date: Mon, 9 Sep 2024 12:13:25 +0200 Subject: [PATCH 07/22] apply changes --- .../guides/nuxt/features/multiple-apps.mdx | 33 ------------------- .../guides/nuxt/features/vue-router.mdx | 17 ---------- 2 files changed, 50 deletions(-) delete mode 100644 docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx diff --git a/docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx b/docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx deleted file mode 100644 index 740be2f01c347..0000000000000 --- a/docs/platforms/javascript/guides/nuxt/features/multiple-apps.mdx +++ /dev/null @@ -1,33 +0,0 @@ ---- -title: Multiple Vue Apps -description: "Learn how to use the SDK to instrument multiple Vue 3 apps." -sidebar_order: 20 ---- - -Vue 3 allows you to use multiple apps with the same Sentry SDK instance, as well as add more apps dynamically after the SDK has been already initialized. - -### Multiple Apps - -Pass all your initially created apps to the `app` option in `Sentry.init`: - -```javascript {filename:main.js} -const appOne = Vue.createApp(App); -const appTwo = Vue.createApp(App); -const appThree = Vue.createApp(App); - -Sentry.init({ - app: [appOne, appTwo, appThree], -}); -``` - -### Dynamic Initialization - -If some of your apps are initialized at a later point, you can add Sentry to them like so: - -```javascript {filename:main.js} -// ... -const myLazyApp = createApp(MiscApp); - -myLazyApp.mixin(Sentry.createTracingMixins({ trackComponents: true })); -Sentry.attachErrorHandler(myLazyApp); -``` diff --git a/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx index c8c20af65c4fe..8cfe5974887d1 100644 --- a/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx @@ -7,20 +7,3 @@ Nuxt uses the `vue-router` under the hood, and our Nuxt SDK instruments your rou - -## Configuration - -You can pass an optional configuration object as a second argument to the browser tracing integration: - -```javascript -Sentry.browserTracingIntegration({ - router, - routeLabel: "path", -}); -``` - -The available options are: - -| Key | Type | Default | Description | -| ---------- | ------ | ------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -| routeLabel | string | `name` | The label to use for the route transactions. Can be either `name` or `path`. When this is `name`, the transaction will use `route.name`, if it is set, and else use the path of the route. By setting this to `path` you can opt-out of this and always use the path. | \ No newline at end of file From 7e1499c1b10da3859ab4d3b6f3501d2a31f09d74 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:03:28 +0200 Subject: [PATCH 08/22] Update docs/platforms/javascript/guides/nuxt/features/vue-router.mdx Co-authored-by: Liza Mock --- docs/platforms/javascript/guides/nuxt/features/vue-router.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx index 8cfe5974887d1..9112a207c771d 100644 --- a/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/vue-router.mdx @@ -3,7 +3,7 @@ title: Vue Router description: "Learn about Sentry's Vue Routing integration." --- -Nuxt uses the `vue-router` under the hood, and our Nuxt SDK instruments your routing automatically, to parameterize transaction according to your routes. +Nuxt uses the `vue-router` under the hood, and our Nuxt SDK instruments your routing automatically, to parameterize transactions according to your routes. From 9dea95f1073a1fd0a1ddf36a30abab83e198a7e7 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:03:40 +0200 Subject: [PATCH 09/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index 107bb21b1e3d2..d70804843bfee 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -99,6 +99,6 @@ Sentry.init({ }) ``` -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. +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 From 0a75417d7e2c81cf6e827d1ad959d19489ae8a65 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:04:00 +0200 Subject: [PATCH 10/22] Update docs/platforms/javascript/guides/nuxt/features/index.mdx Co-authored-by: Liza Mock --- docs/platforms/javascript/guides/nuxt/features/index.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/index.mdx b/docs/platforms/javascript/guides/nuxt/features/index.mdx index 30a260ffdaba6..45d97a177d706 100644 --- a/docs/platforms/javascript/guides/nuxt/features/index.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/index.mdx @@ -1,6 +1,6 @@ --- title: Vue Features -description: "Learn how Sentry's Nuxt SDK exposes features for first class integration with Vue." +description: "Learn how to exposes features for first class integration with Vue with Sentry's Nuxt SDK." sidebar_order: 4 --- From 749235d783ffa0d209f8c407b263375c971f94f0 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:04:20 +0200 Subject: [PATCH 11/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index d70804843bfee..7efff2391fc20 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -22,7 +22,7 @@ By default, the Nuxt SDK tracks the rendering performance of your app (that is, 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 [`trackComponents`](#trackcomponents) in your `Sentry.init` call. You can also optionally add [`hooks`](#hooks), and [`timeout`](#timeout). #### `trackComponents` From ec74cca55289ccbfe6f4d6cc22e222e59300c957 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:05:00 +0200 Subject: [PATCH 12/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index 7efff2391fc20..233146cd45c9a 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -10,7 +10,7 @@ Sentry's Nuxt SDK offers a feature to monitor the performance of your Vue compon -To set up component tracking, you need to configure performance monitoring. For details on how to do this, check out our [Performance documentation](/platforms/javascript/guides/nuxt/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](/platforms/javascript/guides/nuxt/performance/). From 9df4071e76d7f8565e68bad22fdfe0eb27a9f644 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:05:15 +0200 Subject: [PATCH 13/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index 233146cd45c9a..90f87c3b2b365 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 Sentry's Nuxt SDK allows you to monitor the rendering pe 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 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 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 From 25ff71a86199852e4c6a9b46d507297936d5c7b2 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:05:29 +0200 Subject: [PATCH 14/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index 90f87c3b2b365..0816119bc5eb6 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -1,6 +1,6 @@ --- title: Track Vue Components -description: "Learn how Sentry's Nuxt SDK allows you to monitor the rendering performance of your application and its components." +description: "Learn how to monitor the rendering performance of your application and its components with Sentry's Nuxt SDK." sidebar_order: 10 --- From 793f122b4383979cbf46b7ed3226d62e8347648f Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:06:03 +0200 Subject: [PATCH 15/22] Update docs/platforms/javascript/guides/nuxt/config.yml Co-authored-by: Liza Mock --- docs/platforms/javascript/guides/nuxt/config.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/config.yml b/docs/platforms/javascript/guides/nuxt/config.yml index 0aaed8c3b770f..c4457c5a689aa 100644 --- a/docs/platforms/javascript/guides/nuxt/config.yml +++ b/docs/platforms/javascript/guides/nuxt/config.yml @@ -1,7 +1,6 @@ title: Nuxt description: Nuxt is a framework for full-stack web apps and websites. Learn how to set it up with Sentry. sdk: sentry.javascript.nuxt -sidebar_order: 4 categories: - javascript - browser From 92893096ecbe78bc241bbcb801c522d71910106e Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:06:25 +0200 Subject: [PATCH 16/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index 0816119bc5eb6..d263d80b2e12c 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -47,7 +47,7 @@ The default is `false`. #### `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: +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({ From cb7d66b9362e0dd74f11ba0be9efe6ed7f321909 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:06:33 +0200 Subject: [PATCH 17/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index d263d80b2e12c..58f8276441020 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -59,7 +59,7 @@ Sentry.init({ 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. +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 b67c0e9a50741971b7abc2d9642be8aa06b80c88 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:06:50 +0200 Subject: [PATCH 18/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index 58f8276441020..e9bb7d171b9bf 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -63,7 +63,7 @@ Note, that when specifying `hooks`, we use the simple verb rather than `before` -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. +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). From ad807ef7abcb1449ebe9d67ed6d3c29144138c1e Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:06:59 +0200 Subject: [PATCH 19/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index e9bb7d171b9bf..e3e1ec85bd60e 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -86,7 +86,7 @@ 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`: +You can also group the component-tracking options by using the optional `tracingOptions` property in `Sentry.init`: ```javascript Sentry.init({ From 476a05fb3d7f8223085cacd12822032bb3518746 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:07:08 +0200 Subject: [PATCH 20/22] Update docs/platforms/javascript/guides/react/config.yml Co-authored-by: Liza Mock --- docs/platforms/javascript/guides/react/config.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/platforms/javascript/guides/react/config.yml b/docs/platforms/javascript/guides/react/config.yml index 0027133d3177c..c21149790e068 100644 --- a/docs/platforms/javascript/guides/react/config.yml +++ b/docs/platforms/javascript/guides/react/config.yml @@ -1,7 +1,6 @@ title: React description: "Learn about Sentry's React SDK and how it automatically reports errors and exceptions in your application." sdk: sentry.javascript.react -sidebar_order: 4 categories: - javascript - browser From 762f0302382c9987ba4c1e13804674b9a1d3afe8 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:07:22 +0200 Subject: [PATCH 21/22] Update docs/platforms/javascript/guides/vue/config.yml Co-authored-by: Liza Mock --- docs/platforms/javascript/guides/vue/config.yml | 1 - 1 file changed, 1 deletion(-) diff --git a/docs/platforms/javascript/guides/vue/config.yml b/docs/platforms/javascript/guides/vue/config.yml index 4e036380fe39e..1f09d3ee21f11 100644 --- a/docs/platforms/javascript/guides/vue/config.yml +++ b/docs/platforms/javascript/guides/vue/config.yml @@ -1,6 +1,5 @@ title: Vue sdk: sentry.javascript.vue -sidebar_order: 4 categories: - javascript - browser From b93590d6b91a448d64a7b7e52697225d8d69c860 Mon Sep 17 00:00:00 2001 From: Steven Eubank <47563310+smeubank@users.noreply.github.com> Date: Mon, 16 Sep 2024 21:07:38 +0200 Subject: [PATCH 22/22] Update docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx Co-authored-by: Liza Mock --- .../javascript/guides/nuxt/features/component-tracking.mdx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx index e3e1ec85bd60e..8f885af22c0bd 100644 --- a/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx +++ b/docs/platforms/javascript/guides/nuxt/features/component-tracking.mdx @@ -71,8 +71,8 @@ The default set of hooks is `['activate', 'mount', 'update']`. #### `timeout` -You can specify how long the root rendering span should wait for the last component to render. -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 Sentry.init({