Hi,
I have tried to read the instructions and look at existing issues but have not found exact answers how to integrate Sentry into a Next,js project.
I need to handle client-side errors (SSR isn’t currently in use) and I’m using the latest Next.js (10.2.2) and React (17.0.2) libraries.
I started looking at @sentry/nextjs (Next.js | Sentry Documentation) which actually is a wrapper around @sentry/node for the server and @sentry/react for the client.
The basic installation, configure and verify is easy to do by following the instructions. The problems begin to emerge in actual development and deployment.
Here are the top 3 biggest issues:
- How to disable Sentry in localhost (development server) development?
- How to control (enable/disable) Sentry releases in build stage?
- How to update/maintain/sync releases (source maps) between Sentry and app?
Sentry in localhost (development server) development?
next dev
This is the most used command when doing daily development activities with Next.js app.
Sentry is enabled by default and app sends an error logs to the Sentry server.
I don’t want Sentry feature turned on in localhost development (development server).
How to control (enable/disable) Sentry releases in build stage?
next build & next start
These are the commands when it’s time to build and deploy app.
The build command next build will upload source maps and release files to the Sentry automatically. This means that new release will appear on the Sentry side.
When I deploy and start next start the builded app it starts to send an error messages to the Sentry which is fine but then it comes to the “release mismatch”.
How to update/maintain/sync releases (source maps) between Sentry and app?
I can’t really explain this exactly but I don’t understand how this works.
If I have understood correctly the idea is just to capture/send app errors to the Sentry. If that is correct then “release control” is very difficult or implemented somehow funny.
If I don’t specify “release: String” in the sentry.client/server.config.js and next.config.js files (or via ENV variable) the Sentry does this randomly and is done twice. During the build stage (next.config.js) and during the app initialization (sentry.client.config). Source maps are uploaded to the Sentry during the build. This creates the first release, inc. maps. When app sends an error log the Sentry creates an other release including error log (issue). This release doesn’t include source maps.
If I specify “release: my-app@1.0.0” in the conf. files or via ENV variable then app will send an error logs to the specified release and there is only one release on the Sentry side. Setting the release value is quite tricky, however. Client sees only NEXT_PUBLIC_ variables and so on.
I don’t fully understand what’s the purpose of ‘release’ and ‘environment’ variables and how they should be used.
I just need to handle client-side errors now. Could you send an example/instructions how to do this in the easiest way ?
- error tracking is enabled in production environment
- error tracking is disabled in localhost environment
- error logs (issues) goes to the right release on the Sentry server (release inc. source maps and created/deployed during the build phase)
Thanks,
Heikki