Make @sentry/nextjs tunnel work via next.confg.js.rewrites

[wscourge]

Problem Statement

When AdBlocker ULTIMATE (Firefox) is enabled, I get the following error client-side:

Cross-Origin Request Blocked: The Same Origin Policy disallows reading the remote resource at https://oXXXXXX.ingest.sentry.io/api/XXXXXXXX/envelope/?sentry_key=XXX&sentry_version=7. (Reason: CORS request did not succeed). Status code: (null).

Solution Brainstorm

I believe that the workaround for this would be to use NextJS rewrites in the next.conifg.js file:

const { withSentryConfig } = require("@sentry/nextjs")

const sentryWebpackPluginOptions = { ... }
module.exports = withSentryConfig(sentryWebpackPluginOptions, {
  ...
  rewrites: async function() {
    return [
       {
         source: "/sentry/:path*",
         // https://abcdefghijklmnopqrstquwxyzabcdef@o123456.ingest.sentry.io/1234567
         destination: `https://${process.env.SENTRY_DSN.split("@")[1].split("/")[0]}/:path*`,
       },    
    ]
  }
  ...
}

[lforst]

Hi, that's a very cool idea! I'm gonna backlog this - maybe we'll get around to implementing a thing so this gets injected automatically into the webpack config. It would probably be opt-in though, since this means more (potentially way more) traffic on the user's servers.

If you can't wait to see this in action, PRs are always welcome! If you want to somehow resolve the adblocker problem for yourself there is a tunnel option in the SDK which aims to deal with adblocker stuff.

[vijay-guttula]

crazy work around brother.