diff --git a/src/platforms/javascript/guides/vue/index.mdx b/src/platforms/javascript/guides/vue/index.mdx index 740f88023f13e..bd73b8b338fb7 100644 --- a/src/platforms/javascript/guides/vue/index.mdx +++ b/src/platforms/javascript/guides/vue/index.mdx @@ -7,34 +7,33 @@ redirect_from: description: "Learn how to use Sentry with your Vue application." --- -To use Sentry with your Vue application, you will need to use Sentry’s browser JavaScript SDK: `@sentry/browser`. +To use Sentry with your Vue application, you will need to use Sentry’s Vue SDK: `@sentry/vue`. ```bash {tabTitle:npm} -npm install --save @sentry/browser @sentry/integrations +npm install --save @sentry/vue ``` ```bash {tabTitle:Yarn} -yarn add @sentry/browser @sentry/integrations +yarn add @sentry/vue ``` -On its own, `@sentry/browser` will report any uncaught exceptions triggered by your application. +On its own, `@sentry/vue` will report any uncaught exceptions triggered by your application. -Additionally, the Vue _integration_ will capture the name and props state of the active component where the error was thrown. This is reported via Vue’s `config.errorHandler` hook. +Additionally, the SDK will capture the name and props state of the active component where the error was thrown. This is reported via Vue’s `config.errorHandler` hook. Then add this to your `app.js`: ```javascript import Vue from "vue"; -import * as Sentry from "@sentry/browser"; -import { Vue as VueIntegration } from "@sentry/integrations"; +import * as Sentry from '@sentry/vue'; Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [new VueIntegration({ Vue, attachProps: true })], + Vue: Vue, + dsn: '__PUBLIC_DSN__', }); ``` -Additionally, `Integrations.Vue` accepts a few different configuration options that let you change its behavior: +Additionally the SDK accepts a few different configuration options that let you change its behavior: - Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present. - Passing in `attachProps` is optional and is `true` if it is not provided. If you set it to `false`, Sentry will suppress sending all Vue components' props for logging. @@ -42,64 +41,50 @@ Additionally, `Integrations.Vue` accepts a few different configuration options t -Please note that if you enable this integration, Vue will not call its `logError` internally. This means that errors occurring in the Vue renderer will not show up in the developer console. +Please note that if you enable the SDK, Vue will not call its `logError` internally. This means that errors occurring in the Vue renderer will not show up in the developer console. If you want to preserve this functionality, make sure to pass the `logErrors: true` option. -In case you are using the CDN version or the Loader, we provide a standalone file for every integration, you can use it -like this: - -```html - - - - - - - - -``` +In case you are using the CDN version or the Loader, we provide a standalone file for every integration, you can use it +like this: + +```html + + + +``` ## Monitor Performance ```bash {tabTitle:npm} -npm install --save @sentry/browser @sentry/integrations @sentry/tracing +npm install --save @sentry/vue @sentry/tracing ``` ```bash {tabTitle:Yarn} -yarn add @sentry/browser @sentry/integrations @sentry/tracing +yarn add @sentry/vue @sentry/tracing ``` The most basic configuration for tracing your Vue app, which would track only the top-level component, looks like this: ```js +import Vue from "vue"; import * as Sentry from "@sentry/browser"; -import { Vue as VueIntegration } from "@sentry/integrations"; import { Integrations } from "@sentry/tracing"; -import Vue from "vue"; Sentry.init({ // ... integrations: [ new Integrations.BrowserTracing(), - new VueIntegration({ - Vue, - tracing: true, - }), ], // We recommend adjusting this value in production, or using tracesSampler @@ -111,9 +96,8 @@ Sentry.init({ If you want to track child components, and see more details about the rendering process, configure the integration to track them all: ```js -new VueIntegration({ +Sentry.init({ Vue, - tracing: true, tracingOptions: { trackComponents: true, }, diff --git a/src/platforms/javascript/guides/vue/integrations/components.mdx b/src/platforms/javascript/guides/vue/integrations/components.mdx index ba3ad331c2aff..a06b7e4b38f1c 100644 --- a/src/platforms/javascript/guides/vue/integrations/components.mdx +++ b/src/platforms/javascript/guides/vue/integrations/components.mdx @@ -21,19 +21,14 @@ Sentry built the new tracing capabilities into the original Vue error handler in The most basic configuration for tracing your Vue app, which would track only the top-level component, looks like this: ```js +import Vue from "vue"; import * as Sentry from "@sentry/browser"; -import { Vue as VueIntegration } from "@sentry/integrations"; import { Integrations } from "@sentry/tracing"; -import Vue from "vue"; Sentry.init({ // ... integrations: [ new Integrations.BrowserTracing(), - new VueIntegration({ - Vue, - tracing: true, - }), ], // We recommend adjusting this value in production, or using tracesSampler @@ -45,9 +40,8 @@ Sentry.init({ If you want to track child components, and see more details about the rendering process, configure the integration to track them all: ```js -new VueIntegration({ +Sentry.init({ Vue, - tracing: true, tracingOptions: { trackComponents: true, }, @@ -57,9 +51,11 @@ new VueIntegration({ Or, you can choose more granularity: ```js -new VueIntegration({ +Sentry.init({ Vue, - tracing: true, + integrations: [ + new Integrations.BrowserTracing(), + ], tracingOptions: { trackComponents: [ "App", @@ -75,9 +71,11 @@ new VueIntegration({ If you want to know if some components are, for example, removed during the initial page load, add a `destroy` hook to the default: ```js -new VueIntegration({ +Sentry.init({ Vue, - tracing: true, + integrations: [ + new Integrations.BrowserTracing(), + ], tracingOptions: { trackComponents: [ "App", @@ -95,9 +93,11 @@ You can specify how long a top-level activity should wait for the last component Every new rendering cycle is debouncing the timeout, and it starts counting from the beginning. Once the timeout is reached, tracking is completed, and all the information is sent to Sentry. ```js -new VueIntegration({ +Sentry.init({ Vue, - tracing: true, + integrations: [ + new Integrations.BrowserTracing(), + ], tracingOptions: { trackComponents: true, timeout: 4000, @@ -108,11 +108,6 @@ new VueIntegration({ **Configuration** ```js -/** - * When set to `true`, enables tracking of components lifecycle performance. - * Default: false - */ -tracing: boolean; tracingOptions: { /** * Decides whether to track components by hooking into its lifecycle methods. @@ -134,3 +129,57 @@ tracingOptions: { hooks: string[]; } ``` + +### Using Vue Router + +If you are using Vue Router, you can use our provided integration for better transaction names. Here is a full example how to use it: + +```js +import Vue from 'vue' +import App from './App' +import * as Sentry from '@sentry/vue' +import { Integrations } from '@sentry/tracing' +import Router from 'vue-router' +import HelloWorld from '@/components/HelloWorld' + +Vue.use(Router) + +const Foo = { template: '
foo
' } +const Bar = { template: '
bar
' } + +const router = new Router({ + routes: [ + { + path: '/', + name: 'HelloWorld', + component: HelloWorld + }, + { path: '/foo/:id', component: Foo }, + { path: '/bar', component: Bar } + ] +}) + +Vue.config.productionTip = false + +Sentry.init({ + Vue: Vue, + dsn: '___PUBLIC_DSN___', + tracesSampleRate: 1.0, + integrations: [ + new Integrations.BrowserTracing({ + routingInstrumentation: Sentry.vueRouterInstrumentation(router) + }) + ], + tracingOptions: { + trackComponents: true + } +}) + +/* eslint-disable no-new */ +new Vue({ + el: '#app', + router, + components: { App }, + template: '' +}) +``` \ No newline at end of file diff --git a/src/wizard/javascript/vue.md b/src/wizard/javascript/vue.md index 9bd061745dcd3..1e5275d5d856e 100644 --- a/src/wizard/javascript/vue.md +++ b/src/wizard/javascript/vue.md @@ -9,8 +9,7 @@ type: framework To begin collecting error and performance data from your Vue application, you'll need the following packages: -* `@sentry/browser` (Sentry's core browser SDK) -* `@sentry/integrations` (contains Sentry's Vue integration) +* `@sentry/vue` (Sentry's Vue SDK) * `@sentry/tracing` (instruments performance data) Below are instructions for using your favorite package manager, or alternatively loaded directly from our CDN. @@ -21,10 +20,10 @@ Install the dependencies: ```bash # Using yarn -yarn add @sentry/browser @sentry/integrations @sentry/tracing +yarn add @sentry/vue @sentry/tracing # Using npm -npm install --save @sentry/browser @sentry/integrations @sentry/tracing +npm install --save @sentry/vue @sentry/tracing ``` Next, initialize Sentry in your app entry point before you initialize your root component. @@ -32,16 +31,12 @@ Next, initialize Sentry in your app entry point before you initialize your root ```javascript import Vue from "vue"; import * as Sentry from "@sentry/browser"; -import { Vue as VueIntegration } from "@sentry/integrations"; import { Integrations } from "@sentry/tracing"; Sentry.init({ + Vue, dsn: "___PUBLIC_DSN___", integrations: [ - new VueIntegration({ - Vue, - tracing: true, - }), new Integrations.BrowserTracing(), ], @@ -51,49 +46,9 @@ Sentry.init({ }); ``` -### Using our CDN - -Alternatively, you can load these packages directly from our CDN using two script tags: - -```html - - -``` - -If you load the Sentry packages this way, they are available under the `Sentry` namespace on the global scope. - -Next, initialize Sentry in your `app.js`: - -```javascript -Sentry.init({ - dsn: "___PUBLIC_DSN___", - integrations: [ - new Sentry.Integrations.Vue({ - Vue, - tracing: true, - }), - new Sentry.Integrations.BrowserTracing(), - ], - - // We recommend adjusting this value in production, or using tracesSampler - // for finer control - tracesSampleRate: 1.0, -}); -``` - -After this, Sentry will automatically catch and report any uncaught exceptions, and report on the performance of your application. - ### Additional Options -Additionally, `Integrations.Vue` accepts a few different configuration options that let you change its behavior: +Additionally, the SDK accepts a few different configuration options that let you change its behavior: - Passing in `Vue` is optional, but if you do not pass it `window.Vue` must be present. - Passing in `attachProps` is optional and is `true` if it is not provided. If you set it to `false`, Sentry will suppress sending all Vue components' props for logging.