Next.js middleware support

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

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

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

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.

@vladanpaunovic

@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.

@boennemann

@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.

@lforst

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

@ndom91

@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.

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!

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.

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

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: #6125
Original issue here: #6119

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!

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.

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

@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!

@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.

@lforst

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

Navigation Menu

Repository navigation

Next.js middleware support #4206

7 remaining items

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Next.js middleware support #4206

Description

Activity

mikestopcontinues commented on Jan 7, 2022

smeubank commented on May 19, 2022

vladanpaunovic commented on Jun 8, 2022

boennemann commented on Jun 12, 2022

vladanpaunovic commented on Jun 13, 2022

smeubank commented on Jun 20, 2022

7 remaining items

lforst commented on Sep 13, 2022

ndom91 commented on Sep 15, 2022

jokull commented on Sep 15, 2022

bramski commented on Oct 26, 2022

smeubank commented on Nov 3, 2022

lforst commented on Jan 16, 2023

leo-cheron commented on Feb 5, 2023

lforst commented on Feb 6, 2023

codemilli commented on Apr 2, 2024

lforst commented on Apr 2, 2024

codemilli commented on Apr 2, 2024

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions