Skip to content

ref: Update Vue docs for SDK #2689

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 4 commits into from
Dec 2, 2020
Merged

ref: Update Vue docs for SDK #2689

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1980f25
ref: Update Vue docs for SDK
HazAT Nov 16, 2020
5967b83
ref: Update vue docs
HazAT Nov 16, 2020
282fcdd
ref: Update bundle
HazAT Nov 16, 2020
2ccc4c5
ref: Add router example
HazAT Nov 23, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
78 changes: 31 additions & 47 deletions src/platforms/javascript/guides/vue/index.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,99 +7,84 @@ 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.
- Passing in `logErrors` is optional and is `false` if it is not provided. If you set it to `true`, Sentry will call original Vue's `logError` function as well.

<Alert level="warning" title="Vue Error Handling">

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.

</Alert>

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
<!-- Note that we now also provide a es6 build only -->
<!-- <script src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.es6.min.js" integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.es6.min.js', 'sha384-base64') }}" crossorigin="anonymous"></script> -->
<script
src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.min.js"
integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.min.js', 'sha384-base64') }}"
crossorigin="anonymous"
></script>

<!-- If you include the integration it will be available under Sentry.Integrations.Vue -->
<script
src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/vue.min.js"
integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'vue.min.js', 'sha384-base64') }}"
crossorigin="anonymous"
></script>

<script>
Sentry.init({
dsn: "___PUBLIC_DSN___",
integrations: [new Sentry.Integrations.Vue({ Vue, attachProps: true })],
});
</script>
```
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
<script
src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/vue.min.js"
integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'vue.min.js', 'sha384-base64') }}"
crossorigin="anonymous"
></script>

<script>
Sentry.init({
Vue,
dsn: "___PUBLIC_DSN___",
});
</script>
```

## 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
Expand All @@ -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,
},
Expand Down
87 changes: 68 additions & 19 deletions src/platforms/javascript/guides/vue/integrations/components.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand All @@ -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,
},
Expand All @@ -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",
Expand All @@ -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",
Expand All @@ -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,
Expand All @@ -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.
Expand All @@ -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: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }

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: '<App/>'
})
```
55 changes: 5 additions & 50 deletions src/wizard/javascript/vue.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.
Expand All @@ -21,27 +20,23 @@ 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.

```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(),
],

Expand All @@ -51,49 +46,9 @@ Sentry.init({
});
```

### Using our CDN

Alternatively, you can load these packages directly from our CDN using two script tags:

```html
<script
src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/bundle.tracing.min.js"
integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'bundle.tracing.min.js', 'sha384-base64') }}"
crossorigin="anonymous"
></script>
<script
src="https://browser.sentry-cdn.com/{{ packages.version('sentry.javascript.browser') }}/vue.min.js"
integrity="sha384-{{ packages.checksum('sentry.javascript.browser', 'vue.min.js', 'sha384-base64') }}"
crossorigin="anonymous"
></script>
```

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.
Expand Down