Hi, I am trying to integrate Sentry into a nextJS project.
I need to handle both server-side and client-side error for this project as we rely on SSR.
I have found three different packages for integration sentry/browser (for client), sentry/node (for server) and sentry/nextjs which is supposed to be the integration recommended by sentry.
My first issue is that nextjs also provide examples of how to implement sentry by integrating sentry/browser and sentry/node. I do not know which one would be the source of truth here.
On the sentry/nextjs there is not much example of integration to rely on.
The second issue is though I used the sentry-wizard and was able to see through the sentry dashboard that the release was recognized, I have no error being caught be it on server or client side.
Also when I run my app, it outputs sourcemaps errors:
- warning: could not determine a source map reference (Could not auto-detect referenced sourcemap for ~/_next/static/development/_buildManifest.js.)
(variation on the above) Follow Vercel’s example implementation here
Use our @sentry/nextjs SDK (and optionally set it up using the wizard)
The advantage of the first two methods is that both of those SDKs are long-established, and the only variable is how they interact with nextjs. The disadvantage is that they’re not specifically targeted for next, and anything we need to do to increase sentry/next compatibility and any next-specific features we add won’t happen there, nor will we be actively supporting and documenting that path.
The advantage of the third (our new SDK) is some amount of automatic setup, along with having access to the aforementioned compatibility fixes and next-specific features, as well as full documentation and support. The disadvantages are a) it’s new, and we’re still working out the kinks, and b) it’s currently built using next’s experimental plugin system, which has certain limitations and is subject to change.
The release is created by the webpack plugin at build time, independent of any actual catching of errors. (Good to know you have that part working, though! ) As for seeing errors, did you fill out the two Sentry.init() calls in the two sentry config files the wizard creates? If you have, can you put a breakpoint or log statement in each one to determine if it’s running? Once it is, you should be able to test it by either throwing an error in your code or calling Sentry.captureException(new Error("testing testing 123")). Keep in mind that because of the way the plugins work, the SDK only runs on the production server, not the dev server, and doesn’t run during build. (It should run in the front end regardless.)
As for the source map errors, that one at least applies to an internal next file, which doesn’t need to be source mapped. (You can go look at it - all it is is a mapping of urls to built JS chunk filepaths.) I believe this will be true of all files which throw such an error. If you find one where the original file does contain your code, please let us know.)
Thanks for the thorough explanation and thanks for the help.
I was able to get a version working somehow by merging option 2 and 3 together.
When I tried @sentry/nextjs with the documentation I could not get it working, the config was not loaded (my logs did not get through).
What helped me was using something similar to the util created in the vercel implementation (which is now outdated since nextjs is on version 10). Basically this enables to call the init within src (e.g. on _app).
Now the errors are show on my Sentry dashboard and I get the sourceMaps for server-side errors but not for client-side, I am not sure what I did wrong there…
Also do you provide an example of implementation like Vercel do ?
) As for seeing errors, did you fill out the two