Include example for tunnelling via nextjs api

[OkkarMin]

On this troubleshoot page example of nextjs, the tunnel example code is in PHP and C#.

Would be good if there is an example to do this with Typescript/JavaScript + NextJS

[bruno-garcia]

@OkkarMin Thanks for raising. We'll be happy to review and merge a PR.

[Naddiseo]

@OkkarMin I just had to solve this for myself, here's how I did it:

// next.config.js

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

const moduleExports = {
  async rewrites() {
    const sentryDSN = new URL(process.env.SENTRY_DSN);
    const sentryProjectId = sentryUrl.pathname.replace("/", "");
    sentryUrl.pathname = `/api/${sentryProjectId}/envelope/`;
    const sentryProxyURL = sentryUrl.toString();
    return [
      {
        source: "/sentry/:args*",
        destination: sentryProxyURL,
        basePath: false,
      }
    ]
  }
};
const SentryWebpackPluginOptions = {
  silent: true,
};

module.exports = withSentryConfig(moduleExports, SentryWebpackPluginOptions);

[OkkarMin]

@Naddiseo Would you mind elaborating more on it? I tried to do the same thing in my next.config.js and getting

ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info  - Loaded env from /Users/okar/Project/where-to-mug/.env.local
info  - Using webpack 5. Reason: Enabled by default https://nextjs.org/docs/messages/webpack5
TypeError [ERR_INVALID_URL]: Invalid URL: undefined
    at onParseError (internal/url.js:257:9)
    at new URL (internal/url.js:333:5)
    at Object.rewrites (/Users/okar/Project/where-to-mug/next.config.js:15:23)
    at loadRewrites (/Users/okar/Project/where-to-mug/node_modules/next/dist/lib/load-custom-routes.js:8:3789)
    at loadCustomRoutes (/Users/okar/Project/where-to-mug/node_modules/next/dist/lib/load-custom-routes.js:8:4743)
    at DevServer.prepare (/Users/okar/Project/where-to-mug/node_modules/next/dist/server/next-dev-server.js:15:703)
    at async /Users/okar/Project/where-to-mug/node_modules/next/dist/cli/next-dev.js:22:1 {
  input: 'undefined',
  code: 'ERR_INVALID_URL'
}

[Naddiseo]

@OkkarMin, Two other things I found: 1, don't include the tunnel option in sentry.server.config.js (which is where I had the "ERR_INVALID_URL" issue); and 2, I found that once deployed to vercel, I was finding that the rewrite to sentry wasn't actually working (it only worked in development). I ended up copying the "http-proxy" code out of nextjs to an endpoint and tunneling to that instead of using the rewrite method.

[OkkarMin]

Thank you @Naddiseo.

Took a look at @vladanpaunovic's PR #100 and replicated what he did 👍 and it's working well.

I will be leaving this open for now to be closed by the PR being merged