Skip to content
Merged
Show file tree
Hide file tree
Changes from 2 commits
Commits
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
19 changes: 19 additions & 0 deletions docs/platforms/javascript/common/configuration/options.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -292,6 +292,25 @@ By the time `beforeSend` is executed, all scope data has already been applied to

</SdkOption>

<PlatformSection supported={["javascript.vue", "javascript.nuxt"]}>

<SdkOption name="attachProps" type='boolean' defaultValue='true' categorySupported={['browser']}>

When enabled, all props of the Vue component where the error was thrown in are attached to the event.

</SdkOption>

<SdkOption name="attachErrorHandler" type='boolean' defaultValue='true' categorySupported={['browser']}>
By default, the SDK attaches a [Vue error handler](https://vuejs.org/api/application.html#app-config-errorhandler)
to capture Vue exceptions and report them to Sentry.
When `attachErrorHandler` is set to `false`, automatic error reporting is disabled.

Usually, this option should stay enabled, unless you want to set up Sentry error reporting yourself.
For example, the Sentry Nuxt SDK does not attach an error handler as it's using the error hooks provided by Nuxt.
</SdkOption>

</PlatformSection>

## Tracing Options

<SdkOption name="tracesSampleRate" type='number' envVar='SENTRY_TRACES_SAMPLE_RATE'>
Expand Down
12 changes: 2 additions & 10 deletions docs/platforms/javascript/guides/vue/index.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -38,7 +38,7 @@ Configuration should happen as early as possible in your application's lifecycle

To initialize Sentry in your Vue application, add the following code snippet to your `main.js`:

```javascript {tabTitle:Vue 3} {filename:main.js} {"onboardingOptions": {"performance": "16, 19-25", "session-replay": "17, 29-35"}}
```javascript {tabTitle:Vue 3} {filename:main.js} {3, 12-36} {"onboardingOptions": {"performance": "16, 19-25", "session-replay": "17, 29-35"} }
import { createApp } from "vue";
import { createRouter } from "vue-router";
import * as Sentry from "@sentry/vue";
Expand Down Expand Up @@ -80,7 +80,7 @@ app.use(router);
app.mount("#app");
```

```javascript {tabTitle:Vue 2} {filename:main.js} {"onboardingOptions": {"performance": "15, 18-24", "session-replay": "16, 28-34"}}
```javascript {tabTitle:Vue 2} {filename:main.js} {3, 11-35} {"onboardingOptions": {"performance": "15, 18-24", "session-replay": "16, 28-34"}}
import Vue from "vue";
import Router from "vue-router";
import * as Sentry from "@sentry/vue";
Expand Down Expand Up @@ -127,14 +127,6 @@ new Vue({

If you're creating more than one Vue 3 app within your application, check out how to initialize the SDK for [multiple apps](./features/multiple-apps).

### Vue-Specific configuration

The SDK accepts a few Vue-specific `Sentry.init` configuration options:

- `attachProps` (defaults to `true`) - Includes all Vue components' props with the events.
- `logErrors` (defaults to `true`) - Decides whether SDK should call Vue's original `logError` function as well.
- Check out how to [Track Vue Components](./features/component-tracking) for performance.

### Late-Defined Vue Apps

If the Vue application is not defined from the start, you can add error monitoring for Vue-specific errors later on.
Expand Down