Sentry replay customization

app/README.md

@@ -17,7 +17,7 @@ A modern fitness tracking application built with Next.js 14, TypeScript, and Tai
 - **Styling:** Tailwind CSS
 - **Database:** PostgreSQL (Vercel Postgres)
 - **ORM:** Prisma
-- **Authentication:** NextAuth.js
+- **Authentication:** NextAuth.js / sendgrid for magic login
 - **Monitoring:** Sentry
 - **Testing:** Jest, React Testing Library
 - **Code Coverage:** Codecov

app/next.config.js

@@ -50,6 +50,11 @@ module.exports = withSentryConfig(nextConfig, {
   // Automatically tree-shake Sentry logger statements to reduce bundle size
   disableLogger: true,
 
+  // Disable source maps functionality
+  sourcemaps: {
+    disable: false,
+  },
+
   // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
   // See the following for more information:
   // https://docs.sentry.io/product/crons/

app/sentry.client.config.ts

@@ -6,13 +6,15 @@ Sentry.init({
   // Enable error capturing with full sample rate
   tracesSampleRate: 1.0, // Capture 100% of transactions for performance monitoring
   // Add optional integrations for additional features
-  integrations: [
-    Sentry.replayIntegration(),
-  ],
   // Define how likely Replay events are sampled.
-  // 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,
+  replaysSessionSampleRate: 1.0,
   // Define how likely Replay events are sampled when an error occurs.
   replaysOnErrorSampleRate: 1.0,
-});  
+  integrations: [
+    Sentry.replayIntegration({
+    // NOTE: This will disable built-in masking. Only use this if your site has no sensitive data, or if you've already set up other options for masking or blocking relevant data, such as 'ignore', 'block', 'mask' and 'maskFn'.
+    maskAllText: false,
+    blockAllMedia: false,
+    }),
+  ],
+}); 

app/src/app/activities/hold.mdx

@@ -0,0 +1,188 @@
+---
+title: "Next.js"
+description: Learn how to set up and configure Sentry in your Next.js application using the installation wizard, capture your first errors, and view them in Sentry.
+sdk: sentry.javascript.nextjs
+categories:
+  - javascript
+  - browser
+  - server
+  - server-node
+---
+
+<PlatformContent includePath="llm-rules-platform" />
+
+<PlatformContent includePath="getting-started-prerequisites" />
+
+## Features
+
+In addition to capturing errors, you can monitor interactions between multiple services or applications by [enabling tracing](/concepts/key-terms/tracing/). You can also get to the root of an error or performance issue faster, by watching a video-like reproduction of a user session with [session replay](/product/explore/session-replay/web/getting-started/).
+
+
+## Step 1: Install
+
+To install Sentry using the installation wizard, run the following command within your project:
+
+```bash
+npx @sentry/wizard@latest -i nextjs
+```
+
+The wizard guides you through the setup process, asking you to enable additional (optional) Sentry features for your application beyond error monitoring.
+
+Select which Sentry features you plan to install in addition to Error Monitoring to get the corresponding installation and configuration instructions below.
+
+<OnboardingOptionButtons
+  options={["error-monitoring", "performance", "session-replay", "user-feedback", "logs"]}
+/>
+
+<PlatformContent includePath="getting-started-features-expandable" />
+
+This guide assumes that you enable all features and allow the wizard to create an example page and route. You can add or remove features at any time, but setting them up now will save you the effort of configuring them manually later.
+
+<Expandable title="What does the installation wizard change inside your application?">
+
+- Creates config files with the default `Sentry.init()` calls for all runtimes (Node.js, Browser, and Edge)
+- Adds a Next.js instrumentation hook to your project (`instrumentation.ts`)
+- Creates or updates your Next.js config with the default Sentry settings
+- Creates error handling components (`global-error.(jsx|tsx)` and `_error.jsx` for the Pages Router) if they don't already exist
+- Creates `.sentryclirc` with an auth token to upload source maps (this file is automatically added to `.gitignore`)
+- Adds an example page and route to your application to help verify your Sentry setup
+
+</Expandable>
+
+## Step 2: Verify Your Setup
+
+<Include name="nextjs-turbopack-warning-expandable.mdx" />
+
+If you haven't tested your Sentry configuration yet, let's do it now. You can confirm that Sentry is working properly and sending data to your Sentry project by using the example page and route created by the installation wizard:
+
+1. Open the example page `/sentry-example-page` in your browser. For most Next.js applications, this will be at localhost.
+2. Click the "Throw error" button. This triggers two errors:
+
+- a frontend error
+- an error within the API route
+
+Sentry captures both of these errors for you. Additionally, the button click starts a performance trace to measure the time it takes for the API request to complete.
+
+<Alert level="success" title="Tip">
+
+Don't forget to explore the example files' code in your project to understand what's happening after your button click.
+
+</Alert>
+
+### View Captured Data in Sentry
+
+Now, head over to your project on [Sentry.io](https://sentry.io) to view the collected data (it takes a couple of moments for the data to appear).
+
+<PlatformContent includePath="getting-started-browser-sandbox-warning" />
+
+<PlatformContent includePath="getting-started-verify-locate-data" />
+
+## Step 3: Configure
+
+If you wish to further customize the Sentry configurations from the wizard, here are the configuration files the wizard will create:
+
+<Alert level="info">
+Logs configuration is included in these snippets when selected, but are not included in the wizard.
+</Alert>
+
+### Client-Side Configuration
+
+```javascript {tabTitle:Client} {filename:instrumentation-client.(js|ts)}
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+
+  // Adds request headers and IP for users, for more info visit:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+
+  integrations: [
+    // ___PRODUCT_OPTION_START___ performance
+    Sentry.browserTracingIntegration(),
+    // ___PRODUCT_OPTION_END___ performance
+    // ___PRODUCT_OPTION_START___ session-replay
+    Sentry.replayIntegration(),
+    // ___PRODUCT_OPTION_END___ session-replay
+    // ___PRODUCT_OPTION_START___ user-feedback
+    Sentry.feedbackIntegration({
+      // Additional SDK configuration goes in here, for example:
+      colorScheme: "system",
+    }),
+    // ___PRODUCT_OPTION_END___ user-feedback
+  ],
+  // ___PRODUCT_OPTION_START___ logs
+
+  // Enable logs to be sent to Sentry
+  _experiments: { enableLogs: true },
+  // ___PRODUCT_OPTION_END___ logs
+
+  // ___PRODUCT_OPTION_START___ performance
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for tracing.
+  // We recommend adjusting this value in production
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+  tracesSampleRate: 1.0,
+  // ___PRODUCT_OPTION_END___ performance
+  // ___PRODUCT_OPTION_START___ session-replay
+
+  // Capture Replay for 10% of all sessions,
+  // plus for 100% of sessions with an error
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/session-replay/configuration/#general-integration-configuration
+  replaysSessionSampleRate: 0.1,
+  replaysOnErrorSampleRate: 1.0,
+  // ___PRODUCT_OPTION_END___ session-replay
+});
+```
+
+### Server-Side Configuration
+
+```javascript {tabTitle:Server} {filename:sentry.server.config.(js|ts)}
+import * as Sentry from "@sentry/nextjs";
+
+Sentry.init({
+  dsn: "___PUBLIC_DSN___",
+
+  // Adds request headers and IP for users, for more info visit:
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+  // ___PRODUCT_OPTION_START___ logs
+
+  // Enable logs to be sent to Sentry
+  _experiments: { enableLogs: true },
+  // ___PRODUCT_OPTION_END___ logs
+
+  // ___PRODUCT_OPTION_START___ performance
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for tracing.
+  // We recommend adjusting this value in production
+  // Learn more at
+  // https://docs.sentry.io/platforms/javascript/configuration/options/#traces-sample-rate
+  tracesSampleRate: 1.0,
+  // ___PRODUCT_OPTION_END___ performance
+});
+```
+
+For detailed manual setup instructions, see our [manual setup guide](/platforms/javascript/guides/nextjs/manual-setup/).
+
+## Next Steps
+
+At this point, you should have integrated Sentry into your Next.js application and should already be sending error and performance data to your Sentry project. 
+
+Now's a good time to customize your setup and get the most out of Sentry's features:
+
+- Customize your server-side insights by [instrumenting Next.js server actions](/platforms/javascript/guides/nextjs/apis/#server-actions), and use [options](/platforms/javascript/guides/nextjs/configuration/options/) to fully customize your error handling. For example, use [beforeSend](/platforms/javascript/guides/nextjs/configuration/options/#before-send) to filter out errors.
+- Send more details about errors and events by [manually capturing errors](/platforms/javascript/guides/nextjs/usage/), and try the [initialScope](/platforms/javascript/guides/nextjs/configuration/options/#initialscope) option to set context like global tags or user details for your errors.
+- Get visual playback of user sessions with [Session Replay](/platforms/javascript/guides/nextjs/session-replay/), and [customize](/platforms/javascript/guides/nextjs/session-replay/configuration/) it to set privacy and capture options.
+- Find the root of any issue faster by customizing your [traces](/platforms/javascript/guides/nextjs/tracing/) with [sending span metrics](/platforms/javascript/guides/nextjs/tracing/span-metrics/).
+- Hungry to learn even more about what Sentry can do? Check out our [product walkthroughs](/product/walkthrough/).
+- Learn more about our [Vercel integration](/organization/integrations/deployment/vercel/) to automatically send your Vercel deployments to Sentry.
+
+<Expandable permalink={false} title="Are you having problems setting up the SDK?">
+
+- If you encountered issues with our installation wizard, try [setting up Sentry manually](/platforms/javascript/guides/nextjs/manual-setup/)
+- [Get support](https://sentry.zendesk.com/hc/en-us/)
+
+</Expandable>