diff --git a/docs/platforms/javascript/common/crons/index.mdx b/docs/platforms/javascript/common/crons/index.mdx index 45e6af9673486..c04b2bd63cd23 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 299c75a57b95d..973222a156495 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 0000000000000..a4b73fd8bc6ba --- /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 0000000000000..de177fd16822d --- /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 0000000000000..c70291ae63913 --- /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 0000000000000..553609a590f40 --- /dev/null +++ b/platform-includes/session-replay/install/javascript.nuxt.mdx @@ -0,0 +1,3 @@ +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/session-replay/setup-canvas/javascript.nuxt.mdx b/platform-includes/session-replay/setup-canvas/javascript.nuxt.mdx new file mode 100644 index 0000000000000..e2c2d93052f41 --- /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 0000000000000..89cb0b53e4022 --- /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 0000000000000..a9418f703909c --- /dev/null +++ b/platform-includes/user-feedback/example-widget/javascript.nuxt.mdx @@ -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. 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 0000000000000..34e05ca914182 --- /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 0000000000000..c6cab1c42a73d --- /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 0000000000000..afdae5d32c82c --- /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", + }), + ], +}); +```