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 <[email protected]>

* Apply suggestions from code review

Co-authored-by: Lukas Stracke <[email protected]>

---------

Co-authored-by: Liza Mock <[email protected]>
Co-authored-by: Lukas Stracke <[email protected]>

Author: 3 people

docs/platforms/javascript/common/crons/index.mdx

@@ -19,7 +19,6 @@ supported:
   - javascript.hapi
   - javascript.koa
   - javascript.nestjs
-  - javascript.nuxt
   - javascript.cloudflare
 ---
 

docs/platforms/javascript/common/crons/troubleshooting.mdx

@@ -19,7 +19,6 @@ supported:
   - javascript.hapi
   - javascript.koa
   - javascript.nestjs
-  - javascript.nuxt
   - javascript.cloudflare
 ---
 

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' }
+    }
+  }
+});
+```

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
+```

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;
+  },
+});
+```

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 <PlatformLink to="/">install and configure the Sentry Nuxt SDK</PlatformLink>.

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(),
+  ],
+});
+```

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`:
+
+<PlatformContent includePath="configuration/integrations/lazy-loading-replay" />

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.

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 <PlatformLink to="/">install and configure the Sentry Nuxt SDK</PlatformLink>.