How to fix Sentry /tunnel HTTP 405 error

#Engineering

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+).*)',
  ],
};