Next.js middleware support

[iker-barriocanal]

The middleware is a new feature in Next.js v12, currently not supported by the Next.js SDK. The release blog post says it's in beta, but the middleware docs aren't that specific and don't say whether it's a prerelease.

what to cover: -[ ] Error tracking -[ ] Performance monitoring

[mikestopcontinues]

Anyone have a draft of how to make this happen while the feature gets developed?

[smeubank]

Sharing input from another channel here

If you can support Workers, should be a similar runtime as Middleware

https://nextjs.org/docs/api-reference/edge-runtime

[vladanpaunovic]

Given that middleware in Next.js is still in beta (now more explicitly displayed) and under rapid development, I will close this issue until their API is stable.

[boennemann]

@vladanpaunovic Is there a way to disable just the server part of @sentry/nextjs? Because while I understand that you don't want to support beta/middleware this also blocking any adoption of https://nextjs.org/docs/advanced-features/react-18/switchable-runtime now.

[vladanpaunovic]

@boennemann, you can't disable the server part in @sentry/nextjs at the moment, but what you can do is use @sentry/react in the meantime.

[smeubank]

Feedback from Vercel:

The Middleware API is now stable - we're planning for a stable release with 12.2 here very soon. (Stable on latest canary) here are the changes from when it was first introduced. https://github.com/vercel/next.js/blob/canary/errors/middleware-upgrade-guide.md

reopoening issue. @lforst & @vladanpaunovic let's continue our conversation around E2E tests, canary releases, and how/if it could help us with such features

[smeubank]

https://nextjs.org/blog/next-12-2#middleware-stable

With NextJs 12.2 there is stable middleware support

[heldr]

Yeap, ideally not only middleware support but also the core of it, which is Edge Runtime ecosystem:

• Edge API Routes
• Edge SSR for React 18
• and Middleware as we already know

[athammer]

I believe this and this issue is one in the same as Next.js uses cloudflare workers for it's edge infra. I know this is an older issue just wanted to link them.

I would also love this support. I was trying to use the new edge runtime but got the error below when trying to just use captureException.

TypeError: Cannot read properties of undefined (reading 'getElementById')
    at node_modules/@sentry/nextjs/esm/performance/client.js:22:26
    at node_modules/@sentry/nextjs/esm/performance/client.js:94:54
    at node_modules/@sentry/tracing/esm/browser/browsertracing.js:99:0
    at node_modules/@sentry/core/esm/integration.js:64:0
    at <anonymous>
    at node_modules/@sentry/core/esm/integration.js:60:0
    at node_modules/@sentry/core/esm/baseclient.js:217:27
    at node_modules/@sentry/hub/esm/hub.js:65:0
    at node_modules/@sentry/core/esm/sdk.js:32:0
    at node_modules/@sentry/browser/esm/sdk.js:110:2
    at node_modules/@sentry/react/esm/sdk.js:18:2
    at node_modules/@sentry/nextjs/esm/index.client.js:31:2
    at sentry.server.config.js:11:0

[ndom91]

Seeing the same error as @athammer.

Is there still no way to disable the sentry server-side error capturing in @sentry/nextjs?

[lforst]

@ndom91 For now you could try not calling Sentry.init() in sentry.server.config.js and removing all the imports there, or you could uninstall the Next.js package and use @sentry/browser instead. Both are a bit ugly but I would have to experiment a bit to find a potentially cleaner solution.

Also wanna give a small update on this issue: We're currently discussing internally what it would take to make Next.js middleware support and/or an SDK for additional runtimes happen. We're definitely excited that the demand for the SDK is high and are looking forward to making this a reality.

[ndom91]

I ended up rewriting my one runtime: experimental-edge route to just be a normal node style API route for now to keep server-side error capturing everywhere else as well. Thanks for the quick reply though and best of luck!

[jokull]

I ended up rewriting my one runtime: experimental-edge route to just be a normal node style API route for now to keep server-side error capturing everywhere else as well. Thanks for the quick reply though and best of luck!

Ended up doing the same - very excited about this support though, middleware is so much faster.

[bramski]

Okay this is now going to stop us from using Sentry in our production app. What's the ETA to get this working?

[smeubank]

hi all

we did a write up on possible work we are considering: 2023 and the JavaScript SDK

One of those items is in regards to support for WinterCG, which is ultimately the blocker for full support of Vercel Middlewares. See Edge Middleware Limitations

As a solution to help people who are blocked until then we will adding an option that allows users to opt out.

PR here: https://github.com/getsentry/sentry-javascript/pull/6125 Original issue here: https://github.com/getsentry/sentry-javascript/issues/6119

[lforst]

What's up everybody, we finally released version 7.31.0 of the SDK which adds support for Next.js middleware.

To get errors and transactions for your middleware, simply update the SDK to the newest version and add a sentry.edge.config.js or sentry.edge.config.ts file in the root of your project:

// sentry.edge.config.js or sentry.edge.config.ts

import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN || "YOUR DSN HERE",
  tracesSampleRate: 1.0,
});

For more info on this see the docs: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

Let us know if you find any issues!

[leo-cheron]

What's up everybody, we finally released version 7.31.0 of the SDK which adds support for Next.js middleware.

To get errors and transactions for your middleware, simply update the SDK to the newest version and add a sentry.edge.config.js or sentry.edge.config.ts file in the root of your project:

// sentry.edge.config.js or sentry.edge.config.ts

import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN || "YOUR DSN HERE",
  tracesSampleRate: 1.0,
});

For more info on this see the docs: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

Let us know if you find any issues!

After adding & configured the sentry.edge.config.js, I ran some test with the v7.36 on client / serverless & edge runtime (same environment) by:

• throwing an error
• manually call Sentry.captureMessage & Sentry.captureException

It's working properly on the client & serverless functions, but any Sentry request triggered from the edge runtime is ignored and won't show up in Sentry.

[lforst]

@mrgnou Hi, can you share a small reproduction example? Thanks!

[codemilli]

What's up everybody, we finally released version 7.31.0 of the SDK which adds support for Next.js middleware.

To get errors and transactions for your middleware, simply update the SDK to the newest version and add a sentry.edge.config.js or sentry.edge.config.ts file in the root of your project:

// sentry.edge.config.js or sentry.edge.config.ts

import * as Sentry from "@sentry/nextjs";

const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN;

Sentry.init({
  dsn: SENTRY_DSN || "YOUR DSN HERE",
  tracesSampleRate: 1.0,
});

For more info on this see the docs: https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

Let us know if you find any issues!

@lforst Thanks for the feature! However I run my nextjs app in a personal instance not in Vercel. So I don't actually need this config file I think, but It keeps telling below message. How can I turn off this?

You are using Next.js features that run on the Edge Runtime. Please add a "sentry.edge.config.js" or a "sentry.edge.config.ts" file to your project root in which you initialize the Sentry SDK with "Sentry.init()"

[lforst]

@lforst Thanks for the feature! However I run my nextjs app in a personal instance not in Vercel. So I don't actually need this config file I think, but It keeps telling below message. How can I turn off this?

@codemilli Even if you are not deploying to Vercel, Next.js will use the edge runtime for middleware and edge routes. That means, if you want Sentry to collect errors for middleware, you need sentry.edge.config.ts. If you don't want it to do anything, you can just make that file empty.

[codemilli]

@lforst Thanks for the comment! sorry for misunderstanding by just reading the name 🙏