You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
On its own, `@sentry/browser` will report any uncaught exceptions triggered by your application.
20
+
On its own, `@sentry/vue` will report any uncaught exceptions triggered by your application.
21
21
22
-
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.
22
+
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.
Additionally, `Integrations.Vue` accepts a few different configuration options that let you change its behavior:
36
+
Additionally the SDK accepts a few different configuration options that let you change its behavior:
38
37
39
38
- Passing in `Vue` is optional, if you do not pass it `window.Vue` must be present.
40
39
- 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.
41
40
- 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.
42
41
43
42
<Alertlevel="warning"title="Vue Error Handling">
44
43
45
-
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.
44
+
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.
46
45
If you want to preserve this functionality, make sure to pass the `logErrors: true` option.
47
46
48
47
</Alert>
49
48
50
-
In case you are using the CDN version or the Loader, we provide a standalone file for every integration, you can use it
51
-
like this:
52
-
53
-
```html
54
-
<!-- Note that we now also provide a es6 build only -->
// We recommend adjusting this value in production, or using tracesSampler
@@ -45,9 +40,8 @@ Sentry.init({
45
40
If you want to track child components, and see more details about the rendering process, configure the integration to track them all:
46
41
47
42
```js
48
-
newVueIntegration({
43
+
Sentry.init({
49
44
Vue,
50
-
tracing:true,
51
45
tracingOptions: {
52
46
trackComponents:true,
53
47
},
@@ -57,9 +51,11 @@ new VueIntegration({
57
51
Or, you can choose more granularity:
58
52
59
53
```js
60
-
newVueIntegration({
54
+
Sentry.init({
61
55
Vue,
62
-
tracing:true,
56
+
integrations: [
57
+
newIntegrations.BrowserTracing(),
58
+
],
63
59
tracingOptions: {
64
60
trackComponents: [
65
61
"App",
@@ -75,9 +71,11 @@ new VueIntegration({
75
71
If you want to know if some components are, for example, removed during the initial page load, add a `destroy` hook to the default:
76
72
77
73
```js
78
-
newVueIntegration({
74
+
Sentry.init({
79
75
Vue,
80
-
tracing:true,
76
+
integrations: [
77
+
newIntegrations.BrowserTracing(),
78
+
],
81
79
tracingOptions: {
82
80
trackComponents: [
83
81
"App",
@@ -95,9 +93,11 @@ You can specify how long a top-level activity should wait for the last component
95
93
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.
96
94
97
95
```js
98
-
newVueIntegration({
96
+
Sentry.init({
99
97
Vue,
100
-
tracing:true,
98
+
integrations: [
99
+
newIntegrations.BrowserTracing(),
100
+
],
101
101
tracingOptions: {
102
102
trackComponents:true,
103
103
timeout:4000,
@@ -108,11 +108,6 @@ new VueIntegration({
108
108
**Configuration**
109
109
110
110
```js
111
-
/**
112
-
* When set to `true`, enables tracking of components lifecycle performance.
113
-
* Default: false
114
-
*/
115
-
tracing: boolean;
116
111
tracingOptions: {
117
112
/**
118
113
* Decides whether to track components by hooking into its lifecycle methods.
@@ -134,3 +129,57 @@ tracingOptions: {
134
129
hooks: string[];
135
130
}
136
131
```
132
+
133
+
### Using Vue Router
134
+
135
+
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:
If you load the Sentry packages this way, they are available under the `Sentry` namespace on the global scope.
72
-
73
-
Next, initialize Sentry in your `app.js`:
74
-
75
-
```javascript
76
-
Sentry.init({
77
-
dsn:"___PUBLIC_DSN___",
78
-
integrations: [
79
-
newSentry.Integrations.Vue({
80
-
Vue,
81
-
tracing:true,
82
-
}),
83
-
newSentry.Integrations.BrowserTracing(),
84
-
],
85
-
86
-
// We recommend adjusting this value in production, or using tracesSampler
87
-
// for finer control
88
-
tracesSampleRate:1.0,
89
-
});
90
-
```
91
-
92
-
After this, Sentry will automatically catch and report any uncaught exceptions, and report on the performance of your application.
93
-
94
49
### Additional Options
95
50
96
-
Additionally, `Integrations.Vue` accepts a few different configuration options that let you change its behavior:
51
+
Additionally, the SDK accepts a few different configuration options that let you change its behavior:
97
52
98
53
- Passing in `Vue` is optional, but if you do not pass it `window.Vue` must be present.
99
54
- 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.
0 commit comments