Migration guide from `@sentry/browser` to `@sentry/react` with Next.js

[Vadorequest]

Is there a guide explaining how to migrate from @sentry/browser to @sentry/browser in with Next.js?

I'm one of the maintainers of Next Right Now and I wish to change our current implementation (see issue)

I have a few topics in mind:

• Should @sentry/react be used with Next.js? The official example still uses @sentry/browser
• Example using ErrorBoundary and how/where it might be done considering SSG and/or SSR (does it need to be done differently depending on the rendering mode?)
• Similar question regarding FallbackComponent for SSG/SSR concerns.
• Example using Profiler, should it be done in _app?
• I'm concerned about the Webpack trick regarding @sentry/server being dynamically replaced by @sentry/browser during build, as it seems to fail from Next.js v10.0.4+, is it still recommended doing that?

---

Additionally, if someone from the Sentry team would like to review the Next Right Now Sentry configuration and usage, it would be awesome. Even directions regarding what improvements we might do would be a great help (I see with-sentry has got quite a few new features/enhancements). Here are some examples of how Sentry is configured/used in Next Right Now:

• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/utils/monitoring/sentry.ts
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/next.config.js#L237-L257
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/components/errors/DefaultErrorLayout.tsx
• https://github.com/UnlyEd/next-right-now/blob/v2-mst-aptd-at-lcz-sty/src/pages/api/startVercelDeployment.ts#L112-L119
• Error-handling demo

[kamilogorek]

@Vadorequest we are currently working on the integrated Next.js+Sentry solution. There's already a work-in-progress here vercel/next.js#18272 which should be shipped in Q1. I'll make sure to keep this issue updated as we go.

[kmdev1]

Hey @kamilogorek, I was just wondering if there's anything I could support with to help get the PR accepted?

[michaelmerrill]

Any news on the NextJS/Sentry plugin?

Also, in the with-sentry example it states that not all errors will be caught by sentry when using vercel (as of yet). Will this be fixed with the plugin?

[nandorojo]

@kamilogorek do you know if this will have any effect on bundle size? Currently Sentry is the largest bundle in my _app.js.

[kamilogorek]

The next package itself won't have any positive effect on the bundle size, as it itself will be dependent on the @sentry/react package.

[quantizor]

@kamilogorek do you know if this will have any effect on bundle size? Currently Sentry is the largest bundle in my _app.js.

Swap out @sentry/node with @sentry/browser in your webpack config if isServer is false

[gavrilikhin-d]

@kamilogorek do you know if this will have any effect on bundle size? Currently Sentry is the largest bundle in my _app.js.

Swap out @sentry/node with @sentry/browser in your webpack config if isServer is false

Could you explain how to do it, please?