Conversation
|
The latest updates on your projects. Learn more about Vercel for Git ↗︎
|
|
@sentry review |
| - **ORM:** Prisma | ||
| - **Authentication:** NextAuth.js | ||
| - **Authentication:** NextAuth.js / sendgrid for magic login |
There was a problem hiding this comment.
The README mentions adding sendgrid for magic login, but there's no actual implementation of sendgrid or magic login functionality in the codebase. This creates a discrepancy between documentation and actual features. Consider removing this addition until the feature is actually implemented, or create a tracking issue for the feature implementation.
Did we get this right? 👍 / 👎 to inform future reviews.
| // Disable source maps functionality | ||
| sourcemaps: { | ||
| disable: false, | ||
| }, |
There was a problem hiding this comment.
The sourcemaps configuration is contradictory. You're setting disable: false which means sourcemaps are enabled, but the property name suggests disabling. This configuration appears to conflict with the existing hideSourceMaps: true setting below. Additionally, this sourcemaps configuration format doesn't appear to be a standard Next.js configuration option. Consider removing this or clarifying the intent.
Did we get this right? 👍 / 👎 to inform future reviews.
| // 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, |
There was a problem hiding this comment.
Setting replaysSessionSampleRate to 1.0 (100%) will capture replay sessions for ALL users, which can be very expensive and may impact performance in production. This should be much lower (typically 0.1 or 0.01) for production environments. Consider using environment-based configuration.
Did we get this right? 👍 / 👎 to inform future reviews.
| // 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, |
There was a problem hiding this comment.
Setting both maskAllText: false and blockAllMedia: false completely disables Sentry's built-in privacy protections. This is a significant security concern as it will capture all user text input (including potentially sensitive data like passwords, PII, etc.) and all media. The comment acknowledges this but the implementation is still risky. Consider implementing custom masking rules instead.
Did we get this right? 👍 / 👎 to inform future reviews.
| --- | ||
| 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> |
There was a problem hiding this comment.
This file appears to be documentation content that may have been accidentally committed. The filename 'hold.mdx' suggests it might be temporary content. If this is not intended to be part of the application, it should be removed. If it is intended, it should be properly integrated into the application structure and given a more descriptive name.
Did we get this right? 👍 / 👎 to inform future reviews.
Updating Sentry session replay to capture more. Adding notes about Sentry functionality.