framework-features-prio

docs/platforms/javascript/guides/nuxt/config.yml

@@ -1,6 +1,8 @@
 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
- - server
+ - server

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
+
+<Alert>
+
+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/).
+
+</Alert>
+
+### 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.
+
+<Alert>
+
+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.
+
+</Alert>
+
+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`.

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.
+
+<PageGrid />

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);
+```

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.
+
+<SignInNote />
+
+
+## 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. |

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

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.

docs/platforms/javascript/guides/vue/config.yml

@@ -1,5 +1,6 @@
 title: Vue
 sdk: sentry.javascript.vue
+sidebar_order: 4
 categories:
  - javascript
  - browser

docs/platforms/javascript/guides/vue/features/index.mdx

@@ -1,7 +1,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.