instrumentation-client.ts

// This file configures the initialization of Sentry on the client.
// 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";

export async function register() {
  if (typeof window === "undefined") return; // Only run on client

  // Skip Sentry initialization in development
  if (process.env.NODE_ENV !== "production") {
    console.log("[Sentry] Skipping initialization in development mode");
    return;
  }

  console.log("[Sentry] Initializing Sentry on client");
  console.log(
    `[Sentry] DSN configured: ${!!process.env.NEXT_PUBLIC_SENTRY_DSN}`
  );

  Sentry.init({
    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,

    // Adjust this value in production, or use tracesSampler for greater control
    tracesSampleRate: 1,

    // Setting this option to true will print useful information to the console while you're setting up Sentry.
    debug: false,

    replaysOnErrorSampleRate: 1.0,

    // This sets the sample rate to be 10%. You may want this to be 100% while
    // in development and sample at a lower rate in production
    replaysSessionSampleRate: 0.1,

    // You can remove this option if you're not planning to use the Sentry Session Replay feature:
    integrations: [
      Sentry.replayIntegration({
        // Additional Replay configuration goes in here, for example:
        maskAllText: true,
        blockAllMedia: true,
      }),
      // send console.log, console.warn, and console.error calls as logs to Sentry
      Sentry.consoleLoggingIntegration({ levels: ["log", "warn", "error"] }),
    ],

    // Enable logs to be sent to Sentry
    enableLogs: true,
  });

  console.log("[Sentry] Successfully initialized on client");
}

// Export the router transition hook to instrument client-side navigation
export const onRouterTransitionStart = Sentry.captureRouterTransitionStart;