add configuration and api handler for tunneling sentry requests

Author: bhavabhuthi

app/api/sentry-monitoring/index.ts

@@ -0,0 +1,34 @@
+'use server';
+
+export const postAction = async ({ req }: any) => {
+  try {
+    const envelopeBytes = await req.arrayBuffer();
+    const envelope = new TextDecoder().decode(envelopeBytes);
+    const piece = envelope.split('\n')[0];
+    const header = JSON.parse(piece);
+    const dsn = new URL(header['dsn']);
+    const project_id = dsn.pathname?.replace('/', '');
+
+    if (dsn.hostname !== process.env.SENTRY_DSN_URL) {
+      throw new Error(`Invalid sentry hostname: ${dsn.hostname}`);
+    }
+
+    if (!project_id || ![process.env.SENTRY_PROJECT_ID]?.includes(project_id)) {
+      throw new Error(`Invalid sentry project id: ${project_id}`);
+    }
+
+    const upstream_sentry_url = `https://${process.env.SENTRY_DSN_URL}/api/${project_id}/envelope/`;
+    await fetch(upstream_sentry_url, {
+      method: 'POST',
+      body: envelopeBytes,
+    });
+
+    return new Response(JSON.stringify({}), { status: 200 });
+  } catch (e) {
+    console.error('error tunneling to sentry', e);
+    return new Response(
+      JSON.stringify({ error: 'error tunneling to sentry' }),
+      { status: 500 }
+    );
+  }
+};

next.config.mjs

@@ -1,6 +1,6 @@
-import {withSentryConfig} from '@sentry/nextjs';
 /** @type {import('next').NextConfig} */
 import { fileURLToPath } from 'node:url';
+import { withSentryConfig } from '@sentry/nextjs';
 import createJiti from 'jiti';
 import createNextIntlPlugin from 'next-intl/plugin';
 
@@ -12,37 +12,41 @@ const nextConfig = withNextIntl({
   transpilePackages: ['opub-ui'],
 });
 
-export default withSentryConfig(nextConfig, {
-// For all available options, see:
-// https://github.com/getsentry/sentry-webpack-plugin#options
+export default withSentryConfig(
+  nextConfig,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
 
-org: process.env.SENTRY_ORG_NAME,
-project: process.env.SENTRY_PROJECT_NAME,
+    org: process.env.SENTRY_ORG_NAME,
+    project: process.env.SENTRY_PROJECT_NAME,
 
-// Only print logs for uploading source maps in CI
-silent: !process.env.CI,
+    // Only print logs for uploading source maps in CI
+    silent: !process.env.CI,
 
-// For all available options, see:
-// https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+    // 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: true,
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
 
-// Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
-// This can increase your server load as well as your hosting bill.
-// Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
-// side errors will fail.
-// tunnelRoute: "/monitoring",
+    // Uncomment to route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+    // This can increase your server load as well as your hosting bill.
+    // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+    // side errors will fail.
+    tunnelRoute: '/api/sentry-monitoring',
 
-// Hides source maps from generated client bundles
-hideSourceMaps: true,
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
 
-// Automatically tree-shake Sentry logger statements to reduce bundle size
-disableLogger: true,
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
 
-// Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
-// See the following for more information:
-// https://docs.sentry.io/product/crons/
-// https://vercel.com/docs/cron-jobs
-automaticVercelMonitors: true,
-}, process.env.SENTRY_FEATURE_ENABLED);
+    // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+    // See the following for more information:
+    // https://docs.sentry.io/product/crons/
+    // https://vercel.com/docs/cron-jobs
+    // automaticVercelMonitors: true,
+  },
+  process.env.SENTRY_FEATURE_ENABLED
+);

sentry.client.config.ts

@@ -2,14 +2,17 @@
 // The config you add here will be used whenever a users loads a page in their browser.
 // https://docs.sentry.io/platforms/javascript/guides/nextjs/
 
-import * as Sentry from "@sentry/nextjs";
+import * as Sentry from '@sentry/nextjs';
 
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN_URL,
 
   // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 1,
 
+  // The 'tunnel' option allows you to route browser requests to Sentry through a specified Next.js route. This can help circumvent ad-blockers that may prevent Sentry from capturing errors and performance data.
+  tunnel: '/api/sentry-monitoring',
+
   // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
 });