diff --git a/docs/platforms/javascript/common/configuration/integrations/vue.mdx b/docs/platforms/javascript/common/configuration/integrations/vue.mdx index ea39b8c5bb5d2..12b60fe40cfde 100644 --- a/docs/platforms/javascript/common/configuration/integrations/vue.mdx +++ b/docs/platforms/javascript/common/configuration/integrations/vue.mdx @@ -7,7 +7,7 @@ supported: - This integration is enabled by default (recommended) but can also be added manually. +This integration is enabled by default (recommended) but can also be added manually. @@ -23,18 +23,19 @@ If the Vue application is not defined from the start, you can add error monitori To manually add the integration for late-defined Vue applications: ```javascript {filename:main.js} -import * as Sentry from '@sentry/vue'; +import * as Sentry from "@sentry/vue"; Sentry.init({ - dsn: '...', + dsn: "...", // Filter out default `Vue` integration - integrations: integrations => integrations.filter(integration => integration.name !== 'Vue'), + integrations: (integrations) => + integrations.filter((integration) => integration.name !== "Vue"), }); // Sometimes later const app = createApp({ - template: '
hello
', + template: "
hello
", }); Sentry.addIntegration(Sentry.vueIntegration({ app })); -` +``` diff --git a/docs/platforms/javascript/guides/vue/index.mdx b/docs/platforms/javascript/guides/vue/index.mdx index 7550b4565d7ed..6db1a53b1509c 100644 --- a/docs/platforms/javascript/guides/vue/index.mdx +++ b/docs/platforms/javascript/guides/vue/index.mdx @@ -1,5 +1,6 @@ --- title: Vue +description: "Learn how to manually set up Sentry in your Vue app and capture your first errors." sdk: sentry.javascript.vue categories: - javascript @@ -8,17 +9,25 @@ categories: -## Features +## Step 1: Install -In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/). +Choose the features you want to configure, and this guide will show you how: -Select which Sentry features you'd like to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below. + -## Install + - +### Install the Sentry SDK -Sentry captures data by using an SDK within your application's runtime. +Run the command for your preferred package manager to add the Sentry SDK to your application: ```bash {tabTitle:npm} npm install @sentry/vue --save @@ -32,9 +41,7 @@ yarn add @sentry/vue pnpm add @sentry/vue ``` -## Configure - -Configuration should happen as early as possible in your application's lifecycle. +## Step 2: Configure To initialize Sentry in your Vue application, add the following code snippet to your `main.js`: @@ -53,11 +60,11 @@ const router = createRouter({ Sentry.init({ app, dsn: "___PUBLIC_DSN___", - + // Adds request headers and IP for users, for more info visit: // https://docs.sentry.io/platforms/javascript/guides/vue/configuration/options/#sendDefaultPii sendDefaultPii: true, - + integrations: [ // ___PRODUCT_OPTION_START___ performance Sentry.browserTracingIntegration({ router }), @@ -168,24 +175,65 @@ new Vue({ }).$mount("#app"); ``` + + 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). -### Late-Defined Vue Apps + + +### Configuration for Late-Defined Vue Apps + +If your 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, update your `main.js` file: -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 Vue Integration. +```javascript {filename:main.js} +import * as Sentry from "@sentry/vue"; -### Pinia Plugin +Sentry.init({ + dsn: "...", + // Filter out default `Vue` integration + integrations: (integrations) => + integrations.filter((integration) => integration.name !== "Vue"), +}); -Sentry Vue SDK provides a Pinia plugin to capture Pinia action and state data. Learn more about the [Pinia Plugin](./features/pinia) and its options. +// Sometimes later +const app = createApp({ + template: "
hello
", +}); + +Sentry.addIntegration(Sentry.vueIntegration({ app })); +``` - +### Configuration for Pinia -## Verify +To capture Pinia state data, use `Sentry.createSentryPiniaPlugin()` and add it to your Pinia store instance: -This snippet includes an intentional error, so you can test that everything is working as soon as you set it up. +```javascript +import { createPinia } from "pinia"; +import { createSentryPiniaPlugin } from "@sentry/vue"; -Add a button to your page that throws an error: +const pinia = createPinia(); + +pinia.use(createSentryPiniaPlugin()); +``` + +Learn more about the [Pinia Plugin](./features/pinia) and its options. + +## Step 3: Add Readable Stack Traces With Source Maps (Optional) + + + +## Step 4: Avoid Ad Blockers With Tunneling (Optional) + + + +## Step 5: Verify Your Setup + +Let's test your setup and confirm that Sentry is working correctly and sending data to your Sentry project. + +### Issues + +To verify that Sentry is capturing errors and creating issues in your Sentry project, add the following test button to one of your pages, which will trigger an error that Sentry will capture when you click it: ```javascript {filename:App.vue} // ... @@ -202,10 +250,62 @@ export default { }; ``` - + + Open the page in a browser and click the button to trigger a frontend error. + -Learn more about manually capturing an error or message in our Usage documentation. + - + +### Tracing + +To test your tracing configuration, update the previous code snippet to start a performance trace to measure the time it takes for your code to execute: + +```javascript {filename:App.vue} +// ... + +// ... + +export default { + // ... + methods: { + throwError() { + Sentry.startSpan({ op: "test", name: "Example Frontend Span" }, async () => { + // Simulate an asynchronous operation + await new Promise(resolve => setTimeout(resolve, 99)); + + throw new Error("Sentry Error"); + }); + } + } +}; + +``` + +Open the page in a browser and click the button to trigger a frontend error and performance trace. + + + +### View Captured Data in Sentry + +Now, head over to your project on [Sentry.io](https://sentry.io/) to view the collected data (it takes a couple of moments for the data to appear). + + + +## Next Steps + +At this point, you should have integrated Sentry into your Vue application and should already be sending data to your Sentry project. + +Now's a good time to customize your setup and look into more advanced topics. Our next recommended steps for you are: + +- Extend Sentry to your backend using one of our [SDKs](/) +- Continue to customize your configuration +- Make use of Vue-specific features +- Learn how to manually capture errors + + + +- Find various topics in Troubleshooting +- [Get support](https://sentry.zendesk.com/hc/en-us/) -To view and resolve the recorded error, log into [sentry.io](https://sentry.io) and select your project. Clicking on the error's title will open a page where you can see detailed information and mark it as resolved. +