Tunnel in NextJS results in error.

[Qocotzxin]

Hi, I'm trying to use tunnelRoute option to avoid ad blockers in a NextJS project. This correctly sends the captureException requests to a route handler I created under monitoring/route.ts (I'm using App Router). The problem is that the request uses GET method, and NextJS is not able to retrieve the body from it (it seems to be a problem with DELETE as well, you can see an issue here). So I'm wondering if there is a way for me to change the method to a POST within captureException so I can correctly retrieve the data. Maybe I'm doing something wrong here or maybe I need to raise this in Next repo, but wanted to ask first, maybe someone ran into this issue before? Couldn't find anything specific to this.

Thanks!

[Qocotzxin]

I'll close this question because I found the problem (and maybe is useful for someone else running into this issue). Sentry was correctly sending a POST request, but because I had a middleware that I use for localization purposes, it was redirecting the request as a GET instead. I just added the monitoring route to the matcher and now it works perfectly fine. Thanks!

[Tomekmularczyk]

was that next-intl middleware extension? if so can you show how you fixed it, also, could you paste a code for that monitoring route? I cannot find any example of how this route should look like

[Qocotzxin]

I'm not using any extension, just traditional middleware in Next 14 (it was the same code with v13). The only change I made to make it work is update the matcher in configuration to avoid running against api routes and moved all my endpoints to app/api.

export const config = {
  matcher: ["/((?!api|_next/static|_next/image|favicon.ico|manifest.json).*)"],
};

Regarding the monitoring route it looks like this:

// api/monitoring/route.ts
export async function POST(req: Request) {
  try {
    if (!req.body) {
      return Response.json(
        { error: "Error can't be tunneled because the body is empty." },
        { status: 400 }
      );
    }

    const envelope = await req.text();

    const piece = envelope.split("\n")[0];
    const header = JSON.parse(piece);

    const dsn = new URL(header.dsn);
    if (dsn.hostname !== process.env.SENTRY_HOST) {
      return Response.json(
        { error: `Invalid Sentry host: ${dsn.hostname}` },
        { status: 400 }
      );
    }

    const project_id = dsn.pathname.substring(1);
    if (project_id !== process.env.SENTRY_PROJECT_ID) {
      return Response.json(
        { error: `Invalid Project ID: ${project_id}` },
        { status: 400 }
      );
    }

    const url = `https://${process.env.SENTRY_HOST}/api/${project_id}/envelope/`;
    await fetch(url, {
      method: "POST",
      body: envelope,
      headers: {
        "Content-Type": "application/x-sentry-envelope",
      },
    });
  } catch (e) {
    return Response.json(
      {
        error: "Could not tunnel Sentry error correctly.",
        data: (e as Error).message,
      },
      { status: 500 }
    );
  }

  return Response.json({ message: "Error sent." }, { status: 200 });
}

And finally, your next's config file should be something like this (tunnelRoute options is the key here):

module.exports = withSentryConfig(
  nextConfig,
  {
    // For all available options, see:
    // https://github.com/getsentry/sentry-webpack-plugin#options

    // Suppresses source map uploading logs during build
    silent: true,
    org: "your-org",
    project: "your-project",
  },
  {
    // For all available options, see:
    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/

    // Upload a larger set of source maps for prettier stack traces (increases build time)
    widenClientFileUpload: false,

    // Transpiles SDK to be compatible with IE11 (increases bundle size)
    transpileClientSDK: false,

    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
    tunnelRoute: "/api/monitoring",

    // Hides source maps from generated client bundles
    hideSourceMaps: true,

    // Automatically tree-shake Sentry logger statements to reduce bundle size
    disableLogger: true,
  },
);

After all this it works perfectly fine, hope it helps @Tomekmularczyk !

[Tomekmularczyk]

thanks!