Setup Sentry.io with Remix

entry.server.tsx

const env = getEnvVars();

function myTracesSampler(samplingContext: SamplingContext) {
  // Don't trace healthcheck or HEAD requests
  const { transactionContext } = samplingContext;
  if (
    transactionContext.name === 'routes/healthcheck/_index' ||
    transactionContext.tags?.method === 'HEAD'
  ) {
    return false;
  } else {
    return 1.0;
  }
}
if (env.SENTRY_NOTIFY) {
  Sentry.init({
    environment: env.RELEASE_STAGE,
    release: `${env.APP_VERSION}-${env.COMMIT_SHA}`,
    dsn: env.SENTRY_DSN,
    tracesSampleRate: 1,
    tracesSampler: myTracesSampler,

    integrations: [new Sentry.Integrations.Prisma({ client: prisma })],
  });
}

root.tsx

// root.tsx
export const loader = async ({ request }: LoaderArgs) => {
  const env = getEnvVars();
  const user = await getUser(request, { fresh: true });
  return json({
    user,
    ENV: {
      SERVER_URL: env.SERVER_URL,
      SENTRY_DSN: env.SENTRY_DSN,
      SENTRY_NOTIFY: env.SENTRY_NOTIFY,
      RELEASE_STAGE: env.RELEASE_STAGE,
      APP_VERSION: `${env.APP_VERSION}-${env.COMMIT_SHA}`,
    },
  });
};

function App() {
  const { user, ENV } = useLoaderData<typeof loader>();

  useEffect(() => {
    if (!ENV.SENTRY_NOTIFY) return;

    console.log(
      `🐛 init sentry client: ${ENV.RELEASE_STAGE} v${ENV.APP_VERSION}`,
    );
    Sentry.init({
      environment: ENV.RELEASE_STAGE,
      release: ENV.APP_VERSION,
      dsn: ENV.SENTRY_DSN,
      tracesSampleRate: 1,
      integrations: [
        new Sentry.BrowserTracing({
          routingInstrumentation: Sentry.remixRouterInstrumentation(
            useEffect,
            useLocation,
            useMatches,
          ),
        }),
      ],
    });
  }, [
    ENV.SENTRY_NOTIFY,
    ENV.RELEASE_STAGE,
    ENV.APP_VERSION,
    ENV.SENTRY_DSN,
  ]);
  
  useEffect(() => {
    if (!ENV.SENTRY_NOTIFY) return;
    if (user) {
      Sentry.setUser({
        id: String(user.id),
        email: user.email,
        name: user.name,
      });
    } else {
      Sentry.setUser(null);
    }
  }, [ENV.SENTRY_NOTIFY, user]
  );
  // ...
}

IMO Sentry.init should be in it's own useEffect so that changes to user don't lead you to call Sentry.init again.

True. Good catch. I'll split those out into separate effects.