デプロイしたアプリでSentryが動かない

SSGで個人開発アプリを作っていて、そのアプリを以下のような環境にデプロイしています。

本番：Cloudflare Pages
開発：Vercel

このアプリに、エラー追跡のためにSentryを入れました。

そしてきちんとエラーが追跡できるか確認できるために、以下のようなページを作って試しにエラーを発行してみました。

const ErrortestPage: NextPageWithLayout = () => {
  function issueError(){
    throw new Error("error da!!!!!!!!!!!!!!!!!!!")
  }
  return (
    <>
      <SEO title="match" description="descriotion match" />
      <button onClick={issueError}>issue error</button>
    </>
  );
};

すると、本番環境でだけエラーが送信されていませんでした。

なんで？と思って、試しにFirebase Hostingにもデプロイしてみて試してみると、その環境でも送信されませんでした。

つまり、今の状況をまとめると以下のような感じ。

本番：Cloudflare Pages（❌）
開発：Firebase Hosting（❌）
開発：Vercel（✅）
開発：localhost（✅）

Vercelとlocalhostで動いてるってことは、なにかしらサーバー系の機能が動いてるのでは？と思いました。なのでむしろこの2つが例外的な存在なのでは？と。

ためしにネットワークタブを見てみると、エラー送信のときに/monitoring?～～～～～のようなURLに送信しようとしていて、それが失敗していることに気づきました。

Sentryのドキュメントを見てると、それっぽい設定を発見。

https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/#configure-tunneling-to-avoid-ad-blockers

要するにSentryの設定で、

tunnelRoute: "/monitoring",

のように書くとNext.jsでプロキシが自動で立ち上げられて、「/monitoringへのアクセスがhttps://◯◯.ingest.sentry.io/api/◯◯に転送される」みたいなことになるっぽい。

だからCloudflare Pages や Firebase Hostingのように単純なホスティングしかできないサービスでは送信できなかったみたい。

そんなわけでtunnelRouteの設定を無効（コメントアウト）にした結果👇、無事Sentryに送信されるようになりました！🎉

ちなみにこの設定はAdblockのようなアクセスをブロックする系の拡張機能への対策らしい。

実際にtunnelRouteを無効にしてAdblockを入れると、以下のようにSentryへの送信がブロックされました。

ブロックされるのはどうかと思いましたが、以下のような理由からtunnelRouteの設定は無効にしました。

わざわざSentryのためだけにプロキシとか建てたくない
Cloudflare Pagesを使いたい（帯域制限が無制限っぽいので）
Adblockのようなブロックアプリを入れてる人は少数だろうし、Sentryを入れた目的は「全体的にどんなエラーが多発しているかを知りたい」だけなので、無視しても問題なさそう