-
-
Notifications
You must be signed in to change notification settings - Fork 1.4k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
docs(nuxt): Add missing code snippets (#11501)
* docs(nuxt): Add missing code snippets * Update platform-includes/user-feedback/example-widget/javascript.nuxt.mdx Co-authored-by: Liza Mock <liza.mock@sentry.io> * Apply suggestions from code review Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io> --------- Co-authored-by: Liza Mock <liza.mock@sentry.io> Co-authored-by: Lukas Stracke <lukas.stracke@sentry.io>
- Loading branch information
1 parent
60950b4
commit 683ab67
Showing
12 changed files
with
199 additions
and
2 deletions.
There are no files selected for viewing
This file contains 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 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 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 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 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 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 `@sentry/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 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 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" /> |
11 changes: 11 additions & 0 deletions
11
platform-includes/user-feedback/example-widget/javascript.nuxt.mdx
This file contains 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 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. |
This file contains 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 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: "john@doe.com", | ||
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 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", | ||
}), | ||
], | ||
}); | ||
``` |