Skip to content

Instantly share code, notes, and snippets.

@kiliman
Last active April 10, 2024 15:46
Show Gist options
  • Save kiliman/e3f5a43c2d6cbafcead2ff13e5d51e83 to your computer and use it in GitHub Desktop.
Save kiliman/e3f5a43c2d6cbafcead2ff13e5d51e83 to your computer and use it in GitHub Desktop.
Setup Sentry.io with Remix
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
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]
);
// ...
}
@AbhiPrasad
Copy link

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

@kiliman
Copy link
Author

kiliman commented Jul 5, 2023

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

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment