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.

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

Jump to bottom

docs(vue): Manually set up vueIntegration #10961

Merged
merged 3 commits into from
Aug 12, 2024
Merged

docs(vue): Manually set up vueIntegration #10961

Show file tree
Hide file tree
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
288999c
docs(vue): Manually set up `vueIntegration`
s1gr1d Aug 2, 2024
d2f147c
fix broken link
s1gr1d Aug 2, 2024
a77b1b7
add filename
s1gr1d Aug 12, 2024
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
29 changes: 29 additions & 0 deletions docs/platforms/javascript/common/configuration/integrations/vue.mdx
View file
Open in desktop
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
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think it would help to either add a filename to the code sample (such as main.js, etc.)or specify where this code should go in the preceding sentence.

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
View file
Open in desktop
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