TLDR
Just add /tunnel or /monitoring routes to your Next.js middleware matcher ignored list, these routes should be rewritten to Sentry’s service, don’t need to be handled by your Next.js middleware.
Sentry is a popular service used to monitor product errors, which Quotion is also using.
I build Quotion with Vercel Platforms Starter Kit, and Sentry works well with this shiny new technology. However, we encountered an HTTP 405 error on our production, like this:
I checked the Sentry docs, but nothing helped. One day, while searching for something inside the Next.js build output folder .next, I found that the Sentry /tunnel API is being used for rewriting to Sentry's API:
That's when I realized why this 405 error was occurring. Vercel Platforms Starter Kit rewrites almost everything to subfolders to create a multi-tenancy platform. Therefore, we need to bypass this special /tunnel API in the Next.js middleware. Based on my middleware matcher configuration, I only need to change the Sentry configuration to <strong>/api/tunnel</strong>. For example, this is my middleware configuration:
export const config = {
matcher: [
/*
* Match all paths except for:
* 1. /api/ routes
* 2. /_next/ (Next.js internals)
* 3. /images/ (static images)`
* 4. /_static (inside /public)
* 5. /_vercel (Vercel internals)
* 6. all root files inside /public (e.g. /favicon.ico)
*/
'/((?!api/|_next/|images/|_static|_vercel|[\\w-]+\\.\\w+).*)',
],
};If you don't want to change the Sentry configuration, you can also add your Sentry API to the matcher RegExp:
export const config = {
matcher: [
// 👇
'/((?!api/|tunnel|_next/|images/|_static|_vercel|[\\w-]+\\.\\w+).*)',
],
};