From a7681ac3813930287fdf0430a1f12dee60574224 Mon Sep 17 00:00:00 2001 From: s1gr1d Date: Mon, 7 Oct 2024 14:14:41 +0200 Subject: [PATCH 1/3] docs(nuxt): Add missing code snippets --- .../javascript/common/crons/index.mdx | 1 - .../common/crons/troubleshooting.mdx | 1 - .../javascript.nuxt.mdx | 11 +++++ .../javascript.nuxt.mdx | 11 +++++ .../javascript.nuxt.mdx | 47 +++++++++++++++++++ .../install/javascript.nuxt.mdx | 3 ++ .../setup-canvas/javascript.nuxt.mdx | 17 +++++++ .../session-replay/setup/javascript.nuxt.mdx | 47 +++++++++++++++++++ .../example-widget/javascript.nuxt.mdx | 14 ++++++ .../user-feedback/install/javascript.nuxt.mdx | 3 ++ .../sdk-api-example/javascript.nuxt.mdx | 33 +++++++++++++ .../user-feedback/setup/javascript.nuxt.mdx | 16 +++++++ 12 files changed, 202 insertions(+), 2 deletions(-) create mode 100644 platform-includes/profiling/automatic-instrumentation-headers/javascript.nuxt.mdx create mode 100644 platform-includes/profiling/automatic-instrumentation-intro/javascript.nuxt.mdx create mode 100644 platform-includes/profiling/automatic-instrumentation-setup/javascript.nuxt.mdx create mode 100644 platform-includes/session-replay/install/javascript.nuxt.mdx create mode 100644 platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx create mode 100644 platform-includes/session-replay/setup/javascript.nuxt.mdx create mode 100644 platform-includes/user-feedback/example-widget/javascript.nuxt.mdx create mode 100644 platform-includes/user-feedback/install/javascript.nuxt.mdx create mode 100644 platform-includes/user-feedback/sdk-api-example/javascript.nuxt.mdx create mode 100644 platform-includes/user-feedback/setup/javascript.nuxt.mdx diff --git a/docs/platforms/javascript/common/crons/index.mdx b/docs/platforms/javascript/common/crons/index.mdx index 45e6af9673486b..c04b2bd63cd23f 100644 --- a/docs/platforms/javascript/common/crons/index.mdx +++ b/docs/platforms/javascript/common/crons/index.mdx @@ -19,7 +19,6 @@ supported: - javascript.hapi - javascript.koa - javascript.nestjs - - javascript.nuxt - javascript.cloudflare --- diff --git a/docs/platforms/javascript/common/crons/troubleshooting.mdx b/docs/platforms/javascript/common/crons/troubleshooting.mdx index 299c75a57b95d9..973222a156495e 100644 --- a/docs/platforms/javascript/common/crons/troubleshooting.mdx +++ b/docs/platforms/javascript/common/crons/troubleshooting.mdx @@ -19,7 +19,6 @@ supported: - javascript.hapi - javascript.koa - javascript.nestjs - - javascript.nuxt - javascript.cloudflare --- diff --git a/platform-includes/profiling/automatic-instrumentation-headers/javascript.nuxt.mdx b/platform-includes/profiling/automatic-instrumentation-headers/javascript.nuxt.mdx new file mode 100644 index 00000000000000..a4b73fd8bc6bab --- /dev/null +++ b/platform-includes/profiling/automatic-instrumentation-headers/javascript.nuxt.mdx @@ -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' } + } + } +}); +``` diff --git a/platform-includes/profiling/automatic-instrumentation-intro/javascript.nuxt.mdx b/platform-includes/profiling/automatic-instrumentation-intro/javascript.nuxt.mdx new file mode 100644 index 00000000000000..de177fd16822d0 --- /dev/null +++ b/platform-includes/profiling/automatic-instrumentation-intro/javascript.nuxt.mdx @@ -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 +``` diff --git a/platform-includes/profiling/automatic-instrumentation-setup/javascript.nuxt.mdx b/platform-includes/profiling/automatic-instrumentation-setup/javascript.nuxt.mdx new file mode 100644 index 00000000000000..c70291ae639130 --- /dev/null +++ b/platform-includes/profiling/automatic-instrumentation-setup/javascript.nuxt.mdx @@ -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; + }, +}); +``` diff --git a/platform-includes/session-replay/install/javascript.nuxt.mdx b/platform-includes/session-replay/install/javascript.nuxt.mdx new file mode 100644 index 00000000000000..84c826ad0ce686 --- /dev/null +++ b/platform-includes/session-replay/install/javascript.nuxt.mdx @@ -0,0 +1,3 @@ +The Replay integration is **already included** with the Nuxt SDK package. + +Check the setup guide on how to install and configure the Sentry Nuxt SDK. diff --git a/platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx b/platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx new file mode 100644 index 00000000000000..e2c2d93052f41d --- /dev/null +++ b/platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx @@ -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(), + ], +}); +``` diff --git a/platform-includes/session-replay/setup/javascript.nuxt.mdx b/platform-includes/session-replay/setup/javascript.nuxt.mdx new file mode 100644 index 00000000000000..89cb0b53e40227 --- /dev/null +++ b/platform-includes/session-replay/setup/javascript.nuxt.mdx @@ -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`: + + diff --git a/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx b/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx new file mode 100644 index 00000000000000..463f02a44cd497 --- /dev/null +++ b/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx @@ -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 like described in the Nuxt docs on [error handling](https://nuxt.com/docs/getting-started/error-handling#nitro-server-errors). + + + diff --git a/platform-includes/user-feedback/install/javascript.nuxt.mdx b/platform-includes/user-feedback/install/javascript.nuxt.mdx new file mode 100644 index 00000000000000..34e05ca9141825 --- /dev/null +++ b/platform-includes/user-feedback/install/javascript.nuxt.mdx @@ -0,0 +1,3 @@ +The User Feedback integration is **already included** in the Nuxt SDK package. + +Check the setup guide on how to install and configure the Sentry Nuxt SDK. diff --git a/platform-includes/user-feedback/sdk-api-example/javascript.nuxt.mdx b/platform-includes/user-feedback/sdk-api-example/javascript.nuxt.mdx new file mode 100644 index 00000000000000..c6cab1c42a73d1 --- /dev/null +++ b/platform-includes/user-feedback/sdk-api-example/javascript.nuxt.mdx @@ -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", + }, + ], + } +); +``` diff --git a/platform-includes/user-feedback/setup/javascript.nuxt.mdx b/platform-includes/user-feedback/setup/javascript.nuxt.mdx new file mode 100644 index 00000000000000..afdae5d32c82c8 --- /dev/null +++ b/platform-includes/user-feedback/setup/javascript.nuxt.mdx @@ -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", + }), + ], +}); +``` From 89def1b45208ad19d2c2ee5dcca5374b29992d73 Mon Sep 17 00:00:00 2001 From: Sigrid Huemer <32902192+s1gr1d@users.noreply.github.com> Date: Tue, 15 Oct 2024 09:39:34 +0200 Subject: [PATCH 2/3] Update platform-includes/user-feedback/example-widget/javascript.nuxt.mdx Co-authored-by: Liza Mock --- .../user-feedback/example-widget/javascript.nuxt.mdx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx b/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx index 463f02a44cd497..ec4595037347bb 100644 --- a/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx +++ b/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx @@ -8,7 +8,7 @@ export default defineNuxtPlugin((nuxtApp) => { }) ``` -To collect user feedback for errors on the **server side**, you can create an error page like described in the Nuxt docs on [error handling](https://nuxt.com/docs/getting-started/error-handling#nitro-server-errors). +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. From 4c3f03fe83d26acd8af2af7d67585ec38cab8105 Mon Sep 17 00:00:00 2001 From: Sigrid Huemer <32902192+s1gr1d@users.noreply.github.com> Date: Tue, 15 Oct 2024 10:46:47 +0200 Subject: [PATCH 3/3] Apply suggestions from code review Co-authored-by: Lukas Stracke --- platform-includes/session-replay/install/javascript.nuxt.mdx | 2 +- .../user-feedback/example-widget/javascript.nuxt.mdx | 3 --- 2 files changed, 1 insertion(+), 4 deletions(-) diff --git a/platform-includes/session-replay/install/javascript.nuxt.mdx b/platform-includes/session-replay/install/javascript.nuxt.mdx index 84c826ad0ce686..553609a590f404 100644 --- a/platform-includes/session-replay/install/javascript.nuxt.mdx +++ b/platform-includes/session-replay/install/javascript.nuxt.mdx @@ -1,3 +1,3 @@ -The Replay integration is **already included** with the Nuxt SDK package. +The Replay integration is **already included** with the `@sentry/nuxt` SDK package. Check the setup guide on how to install and configure the Sentry Nuxt SDK. diff --git a/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx b/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx index ec4595037347bb..a9418f703909c0 100644 --- a/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx +++ b/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx @@ -9,6 +9,3 @@ export default defineNuxtPlugin((nuxtApp) => { ``` 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. - - -