Next.js: with-sentry-simple example doesn't work in server although it says it does.

[iliran11]

The readme.md of the example states it works on the server-side.

This is a simple example showing how to use Sentry to catch & report errors on both client + server-side.

However, The example using @sentry/browser which doesn't work on the server (node environment)

Where can I simple alternative for using sentry on the server-side? the other example with-sentry seems too complicated.

for some reason import @sentry/node (latest version) in a simple nextjs project is met with an error

[ wait ]  compiling ...
[ error ] ./node_modules/@sentry/node/esm/integrations/console.js
Module not found: Can't resolve 'console' in '/Users/lirancohen/Projects/amp-app/node_modules/@sentry/node/esm/integrations'

[huanglijiao]

I alse have the question. https://github.com/zeit/next.js/issues/8292

[etiennejcharles]

Yeah I'm having the same issue, trying to understand what's up. Il try and provide some input whenI get something as well

[shuhei-tagawa]

Try to put below on next.config.js as the example with-sentry.

    if (!isServer) {
      config.resolve.alias['@sentry/node'] = '@sentry/browser'
    }

[stovmascript]

@shuhei-tagawa The alias shouldn't be needed in with-sentry-simple (it makes sense in with-sentry because it's using a complex helper file for usage with a custom server).

I would import the node package instead of the browser one here: https://github.com/zeit/next.js/blob/97e40057bb6518a6cd058883c65e5d8cab791cf4/examples/with-sentry-simple/pages/_document.js#L2

-import * as Sentry from '@sentry/browser'
+import * as Sentry from '@sentry/node'

and make sure @sentry/node is installed alongside @sentry/browser.

[WestonThayer]

Some notes on how to get this working:

• _app.js is not client-side only, it it called on the server as well (you can verify this yourself with some console logs). Thus @shuhei-tagawa's idea above to have next.config.js swap out @sentry/node makes sense
• The code in _document.js is unnecessary. _app.js will run on the server and Sentry.init installs its own hooks for unhandledRejection and uncaughtException
• Although it's not documented, Next.js handles quite a few errors itself (I wish this was documented). You (and Sentry) can not detect them unless you override _error.js. They are passed to getInitialProps({ err }), except in the case of https://github.com/zeit/next.js/issues/8592. Thus, within _error.js, you can use Sentry.captureException. Here are the cases I've found where Next.js will handle the errors:
  
  
  
  • exception in getInitialProps on the server
  
  
  • exception in getInitialProps on the client (in hydration or navigation)
  
  
  • top-of-module exception on the client side (ex: const env = process.env; const v = env.VAR will throw on the client, because process does not exist)
  
  
  • exception in React lifecycle (render, componentDidMount, componentDidUpdate)
  
  

Note that @sentry/browser will still run in a Node environment, it just won't hook itself in as well as @sentry/node would.

I'll see if I can make a PR to the example if I get time. @leerob maybe we can collaborate. I want there to be a simple way to integrate Next.js with Sentry as well, that doesn't involve a custom server.

[leerob]

@WestonThayer Thanks for all the info. A PR to the example would be super helpful!

[WestonThayer]

PR here: https://github.com/zeit/next.js/pull/8684

But while both server-side and client-side exceptions are tracked well for me locally, the reason folks here aren't seeing server-side exceptions logged when deployed to production with Zeit Now is likely due to https://github.com/zeit/next.js/issues/8685, which I don't know of a fix for.

[Vadorequest]

For people looking to implement Sentry with Next.js, make sure to check out https://github.com/UnlyEd/next-right-now

Interesting parts are:

• https://github.com/UnlyEd/next-right-now/blob/master/src/utils/sentry.ts (Sentry config)
• https://github.com/UnlyEd/next-right-now/blob/master/src/pages/_app.tsx (Various Sentry usage)
• https://github.com/UnlyEd/next-right-now/blob/master/src/pages/index.tsx (Various Sentry usage)
• https://github.com/UnlyEd/next-right-now/blob/master/src/pages/_error.tsx (Sentry to catch errors)
• https://github.com/UnlyEd/next-right-now/blob/master/next.config.js#L60 (universal Sentry)

[saltz]

@Vadorequest

Thank you for this great boilerplate project as a reference point. I'm still encountering one problem regarding source maps. For some reason, my source maps are not uploaded to sentry while even using the @zeit/next-source-maps package. any ideas?

[Vadorequest]

@saltz If you're trying it out locally then I'm pretty sure it doesn't work. I believe it does work on production. I think that's because uploading source maps to sentry takes some time and wasn't implemented in development. I may be wrong.

[saltz]

@Vadorequest

@saltz If you're trying it out locally then I'm pretty sure it doesn't work. I believe it does work on production. I think that's because uploading source maps to sentry takes some time and wasn't implemented in development. I may be wrong.

No sorry, I forgot to mention, the web-app is deployed and is running using the command next start.
But exceptions generated using this web-app are not provided with source maps.

[Vadorequest]

@saltz Thank you for your feedback. I can confirm that it doesn't work either on my side.

I'm not sure where the issues comes from though, this will require some investigation. i'll try to take a quick look.

Created an issue to track this for NRN:
https://github.com/UnlyEd/next-right-now/issues/28

[5tormTrooper]

Is there a simple fix for getting with-sentry-simple working? There should be a simple way to integrate Sentry with Next.js (next-right-now is way too opinionated).

I've followed the latest example exactly and am still getting the Module not found: Can't resolve 'console' error.

[saltz]

@5tormTrooper This error usually occurs when you did not wrap your custom webpack config in the withSourceMap function provided from the @zeit/next-source-maps package.

https://github.com/UnlyEd/next-right-now/blob/master/next.config.js#L8

Currently only the 0.0.4-canary.1 version of the package works.

[Vadorequest]

@5tormTrooper I don't know when you looked at NRN, and you're right it's opinionated but I'm currently working on different "presets", the goal being to release different presets with different built-in features, and eventually end up with a "simple" preset with the minimal stuff for easier re-use and avoid "too much opinions".

Read more at https://unlyed.github.io/next-right-now/concepts/presets

I've had my hands full due to COVID-19 crisis, but I'll definitely release simpler presets at some point.

[5tormTrooper]

Thanks for the responses.
@saltz I am already running with v0.0.4-canary.1, and have wrapped the webpack config exactly like in the Next.js example. I don't see any significant difference between that and the next-right-now config, aside from the ENV and version config.

@Vadorequest simpler presets would be awesome :)

My install is based off this starter btw.