Skip to content
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.

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

docs(vue): Manually set up vueIntegration #10961

Merged
merged 3 commits into from
Aug 12, 2024
Merged
Show file tree
Hide file tree
Changes from all 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
Original file line number Diff line number Diff line change
Expand Up @@ -5,8 +5,37 @@ supported:
- javascript.vue
---

<Alert level="info">

This integration is enabled by default (recommended) but can also be added manually.

</Alert>

_Import name: `Sentry.vueIntegration`_

This integration is enabled by default. If you'd like to modify your default integrations, read [this](./../#modifying-default-integrations).

Adds error and span instrumentation for Vue applications.

## Manual Setup

If the Vue application is not defined from the start, you can add error monitoring for Vue-specific errors later on.
To manually add the integration for late-defined Vue applications:

```javascript {filename:main.js}
import * as Sentry from '@sentry/vue';

Sentry.init({
dsn: '...',
// Filter out default `Vue` integration
integrations: integrations => integrations.filter(integration => integration.name !== 'Vue'),
});

// Sometimes later
const app = createApp({
template: '<div>hello</div>',
});

Sentry.addIntegration(Sentry.vueIntegration({ app }));
`

6 changes: 6 additions & 0 deletions platform-includes/getting-started-config/javascript.vue.mdx
Original file line number Diff line number Diff line change
Expand Up @@ -96,3 +96,9 @@ 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.
- `trackComponents` (defaults to `false`) - Track your app's components. Learn more about [component tracking](./features/component-tracking) and all its options.


### 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.
To manually add the integration for late-defined Vue applications check out the docs for the <PlatformLink to="/configuration/integrations/vue/">Vue Integration</PlatformLink>.
Loading