-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
docs(nuxt): Add missing code snippets #11501
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
Merged
Merged
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
11 changes: 11 additions & 0 deletions
11
platform-includes/profiling/automatic-instrumentation-headers/javascript.nuxt.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| In Next.js you can configure document response headers via the `headers` option in `next.config.js`: | ||
|
|
||
| ```javascript {tabTitle:ESM} {filename:nuxt.config.ts} | ||
| export default defineNuxtConfig({ | ||
| routeRules: { | ||
| '/**': { | ||
| headers: { 'Document-Policy': 'js-profiling' } | ||
| } | ||
| } | ||
| }); | ||
| ``` |
11 changes: 11 additions & 0 deletions
11
platform-includes/profiling/automatic-instrumentation-intro/javascript.nuxt.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,11 @@ | ||
| ```bash {tabTitle:npm} | ||
| npm install @sentry/nuxt --save | ||
| ``` | ||
|
|
||
| ```bash {tabTitle:yarn} | ||
| yarn add @sentry/nuxt | ||
| ``` | ||
|
|
||
| ```bash {tabTitle:pnpm} | ||
| pnpm add @sentry/nuxt | ||
| ``` |
47 changes: 47 additions & 0 deletions
47
platform-includes/profiling/automatic-instrumentation-setup/javascript.nuxt.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| ```javascript {filename:sentry.client.config.js|ts} | ||
| import * as Sentry from "@sentry/nuxt"; | ||
|
|
||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
| integrations: [ | ||
| // Add browser profiling integration to the list of integrations | ||
| Sentry.browserProfilingIntegration(), | ||
| ], | ||
|
|
||
| // Set tracesSampleRate to 1.0 to capture 100% | ||
| // of transactions for tracing. | ||
| // We recommend adjusting this value in production | ||
| tracesSampleRate: 1.0, | ||
| // Set `tracePropagationTargets` to control for which URLs trace propagation should be enabled | ||
| tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/], | ||
|
|
||
| // Set profilesSampleRate to 1.0 to profile every transaction. | ||
| // Since profilesSampleRate is relative to tracesSampleRate, | ||
| // the final profiling rate can be computed as tracesSampleRate * profilesSampleRate | ||
| // For example, a tracesSampleRate of 0.5 and profilesSampleRate of 0.5 would | ||
| // result in 25% of transactions being profiled (0.5*0.5=0.25) | ||
| profilesSampleRate: 1.0, | ||
| }); | ||
| ``` | ||
|
|
||
| Alternatively, instead of a `profilesSampleRate` your can also provide a `profilesSampler` function: | ||
|
|
||
| ```javascript {filename:sentry.client.config.js|ts} | ||
| const Sentry = require("@sentry/nuxt"); | ||
|
|
||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
| integrations: [ | ||
| // Add browser profiling integration to the list of integrations | ||
| Sentry.browserTracingIntegration(), | ||
| Sentry.browserProfilingIntegration(), | ||
| ], | ||
| tracesSampleRate: 1.0, | ||
|
|
||
| // This function will be called for every sampled span | ||
| // to determine if it should be profiled | ||
| profilesSampler: (samplingContext) => { | ||
| return 1.0; | ||
| }, | ||
| }); | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| The Replay integration is **already included** with the Nuxt SDK package. | ||
|
|
||
| Check the setup guide on how to <PlatformLink to="/">install and configure the Sentry Nuxt SDK</PlatformLink>. | ||
17 changes: 17 additions & 0 deletions
17
platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,17 @@ | ||
| ```javascript {13} {filename:sentry.client.config.ts} | ||
| import * as Sentry from "@sentry/nuxt"; | ||
|
|
||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
| replaysSessionSampleRate: 0.1, | ||
| replaysOnErrorSampleRate: 1.0, | ||
|
|
||
| integrations: [ | ||
| // Keep the Replay integration as before | ||
| Sentry.replayIntegration(), | ||
|
|
||
| // The following is all you need to enable canvas recording with Replay | ||
| Sentry.replayCanvasIntegration(), | ||
| ], | ||
| }); | ||
| ``` |
47 changes: 47 additions & 0 deletions
47
platform-includes/session-replay/setup/javascript.nuxt.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,47 @@ | ||
| On your client-side Nuxt app, add: | ||
|
|
||
| ```javascript {tabTitle:TypeScript} {8,12,14-20} {filename:sentry.client.config.ts} | ||
| import * as Sentry from "@sentry/nuxt"; | ||
|
|
||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
|
|
||
| // This sets the sample rate to be 10%. You may want this to be 100% while | ||
| // in development and sample at a lower rate in production | ||
| replaysSessionSampleRate: 0.1, | ||
|
|
||
| // If the entire session is not sampled, use the below sample rate to sample | ||
| // sessions when an error occurs. | ||
| replaysOnErrorSampleRate: 1.0, | ||
|
|
||
| integrations: [ | ||
| Sentry.replayIntegration({ | ||
| // Additional SDK configuration goes in here, for example: | ||
| maskAllText: true, | ||
| blockAllMedia: true, | ||
| }), | ||
| ], | ||
| }); | ||
| ``` | ||
|
|
||
| ### Verify | ||
|
|
||
| While you're testing, we recommend that you set `replaysSessionSampleRate` to `1.0`. This ensures that every user session will be sent to Sentry. | ||
|
|
||
| Once testing is complete, **we recommend lowering this value in production**. We still recommend keeping `replaysOnErrorSampleRate` set to `1.0`, so that, whenever possible, every error has an associated replay with additional debugging context. | ||
|
|
||
|
|
||
| ### PII & Privacy Considerations | ||
|
|
||
| Personally identifiable information (PII) and privacy are important considerations when enabling Session Replay. There are multiple ways in which Sentry helps you avoid collecting PII, including: | ||
| - [Masking](/platforms/javascript/session-replay/privacy/#masking), which replaces the text content with something else -- the default behavior being to replace each character with a *. | ||
| - Making [network request, response bodies, and headers](/platforms/javascript/session-replay/privacy/#network-request-and-response-bodies-and-headers) an opt-in feature, because the best way to avoid getting PII into Sentry is by not adding URLs of endpoints that may contain PII. | ||
|
|
||
| While we have certain privacy considerations in place, Sentry's Session Replay allows you to set up the [privacy configurations](/platforms/javascript/session-replay/privacy/#privacy-configuration) that work best for your use case. For example, if you're working on a static website that's free of PII or other types of private data, you can opt out of the default text masking and image blocking settings. | ||
| To learn more about Session Replay privacy, [read our docs.](/platforms/javascript/session-replay/privacy/) | ||
|
|
||
| ### Lazy-loading Replay | ||
|
|
||
| Once you've added the integration, Replay will start automatically. If you don't want to start it immediately (lazy-load it), you can use `addIntegration`: | ||
|
|
||
| <PlatformContent includePath="configuration/integrations/lazy-loading-replay" /> |
14 changes: 14 additions & 0 deletions
14
platform-includes/user-feedback/example-widget/javascript.nuxt.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,14 @@ | ||
| In Nuxt, the best place to collect user feedback on the **client side** is inside a plugin: | ||
|
|
||
| ```javascript {tabTitle:TypeScript} {filename:plugins/report-errors.ts} | ||
| export default defineNuxtPlugin((nuxtApp) => { | ||
| nuxtApp.hook('vue:error', (error, instance, info) => { | ||
| Sentry.showReportDialog({ /* optional options */}); | ||
| }) | ||
| }) | ||
| ``` | ||
|
|
||
| To collect user feedback for errors on the **server side**, you can create an error page by following the [error handling](https://nuxt.com/docs/getting-started/error-handling#nitro-server-errors) instructions in the Nuxt docs. | ||
|
|
||
|
|
||
|
|
||
s1gr1d marked this conversation as resolved.
Outdated
Show resolved
Hide resolved
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,3 @@ | ||
| The User Feedback integration is **already included** in the Nuxt SDK package. | ||
|
|
||
| Check the setup guide on how to <PlatformLink to="/">install and configure the Sentry Nuxt SDK</PlatformLink>. |
33 changes: 33 additions & 0 deletions
33
platform-includes/user-feedback/sdk-api-example/javascript.nuxt.mdx
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,33 @@ | ||
| ```javascript | ||
| import * as Sentry from "@sentry/nuxt"; | ||
|
|
||
| const eventId = Sentry.captureMessage("User Feedback"); | ||
| // OR: const eventId = Sentry.lastEventId(); | ||
|
|
||
| const userFeedback = { | ||
| name: "John Doe", | ||
| email: "[email protected]", | ||
| message: "I really like your App, thanks!", | ||
| associatedEventId: eventId, | ||
| }; | ||
| Sentry.captureFeedback(userFeedback); | ||
| ``` | ||
|
|
||
| You can also attach further data to the feedback event by passing a hint as a second argument. This is similar to other `capture` methods: | ||
|
|
||
| ```javascript | ||
| Sentry.captureFeedback( | ||
| { message: "I really like your App, thanks!" }, | ||
| { | ||
| captureContext: { | ||
| tags: { key: "value" }, | ||
| }, | ||
| attachments: [ | ||
| { | ||
| filename: "screenshot.png", | ||
| data: "base64-encoded-image", | ||
| }, | ||
| ], | ||
| } | ||
| ); | ||
| ``` |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,16 @@ | ||
| On your client-side Nuxt app, add: | ||
|
|
||
| ```javascript {tabTitle:TypeScript} {filename:sentry.client.config.ts} | ||
| import * as Sentry from "@sentry/nuxt"; | ||
|
|
||
| Sentry.init({ | ||
| dsn: "___PUBLIC_DSN___", | ||
|
|
||
| integrations: [ | ||
| Sentry.feedbackIntegration({ | ||
| // Additional SDK configuration goes in here, for example: | ||
| colorScheme: "system", | ||
| }), | ||
| ], | ||
| }); | ||
| ``` |
Oops, something went wrong.
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.