Integrating Sentry with the t3 stack (v8 edition)

[lforst]

This is a small guide on how to integrate Sentry with https://create.t3.gg/. This guide is a successor to the original guide written by @AbhiPrasad.

Initial Setup

First, create your test app with npm create t3-app@latest.

Next, follow our Next.js SDK setup guide by running npx @sentry/wizard@latest -i nextjs. This will configure and install our Next.js SDK with the appropriate Sentry project.

You can test this out by running npm run dev and checking out http://localhost:3000/sentry-example-page

Now depending on what you've added, use our optional integrations/setup.

Optional setup

Prisma

If you've configured prisma, add the Sentry Prisma integration to your sentry.server.config.ts file.

// sentry.server.config.ts
import * as Sentry from "@sentry/nextjs";

Sentry.init({
  // Your other options here...
  
  integrations: [Sentry.prismaIntegration()],
});

Also, make sure to enable the tracing feature flag in the generator block of your Prisma schema:

generator client {
   provider        = "prisma-client-js"
+  previewFeatures = ["tracing"]
}

NextAuth.js

If you've set up nextAuth, you can configure it's events to attach information to Sentry. For example below I've updated src/server/auth.ts to set the user on sign in. You can also create Sentry breadcrumbs on the different events emitted.

diff --git a/src/server/auth.ts b/src/server/auth.ts
index e3f5444..9759c7d 100644
--- a/src/server/auth.ts
+++ b/src/server/auth.ts
@@ -8,6 +8,7 @@ import {
 import DiscordProvider from "next-auth/providers/discord";
 import { env } from "~/env.mjs";
 import { prisma } from "~/server/db";
+import * as Sentry from "@sentry/nextjs";
 
 /**
  * Module augmentation for `next-auth` types. Allows us to add custom properties to the `session`
@@ -45,6 +46,14 @@ export const authOptions: NextAuthOptions = {
       },
     }),
   },
+  events: {
+    signIn({ user }) {
+      Sentry.setUser({ id: user.id });
+    },
+    signOut() {
+      Sentry.setUser(null);
+    },
+  },
   adapter: PrismaAdapter(prisma),
   providers: [
     DiscordProvider({

tRPC

If you're using tRPC, you can set up Sentry's tRPC middleware by updating src/server/api/trpc.ts to extend your procedure with Sentry.trpcMiddleware().

diff --git a/src/server/api/trpc.ts b/src/server/api/trpc.ts
index c2491f0..2540ad5 100644
--- a/src/server/api/trpc.ts
+++ b/src/server/api/trpc.ts
@@ -14,6 +14,7 @@ import superjson from "superjson";
 import { ZodError } from "zod";
 import { getServerAuthSession } from "~/server/auth";
 import { prisma } from "~/server/db";
+import * as Sentry from "@sentry/nextjs";
 
 /**
  * 1. CONTEXT
@@ -119,6 +120,14 @@ const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
   });
 });
 
+const sentryMiddleware = t.middleware(
+  Sentry.trpcMiddleware({
+    attachRpcInput: true,
+  })
+);
+
 /**
  * Protected (authenticated) procedure
  *
@@ -127,4 +136,4 @@ const enforceUserIsAuthed = t.middleware(({ ctx, next }) => {
  *
  * @see https://trpc.io/docs/procedures
  */
-export const protectedProcedure = t.procedure.use(enforceUserIsAuthed);
+export const protectedProcedure = t.procedure.use(sentryMiddleware).use(enforceUserIsAuthed);

[hussamkhatib]

Will the client errors also have the context of the user that was set in the signIn and signOut events of next-auth ?
@lforst

[lforst]

No. You'll need to find a place in your clientside code to set the user with Sentry.setUser()

[hussamkhatib]

cool, that makes sense why ip addresses(if at all) are shown instead of the user email.
By the way I had to use global scope for it to get working.
Sentry.getGlobalScope().setUser({ id: user.id });

[juztim]

How could we ignore certain errors using this approach? Maybe manually captureException in the tRPC onError callback instead of the middleware so we get more control?

[lforst]

This docs page outlines all of the possible approaches: https://docs.sentry.io/platforms/javascript/configuration/filtering/

[juztim]

Yeah I saw that page too but it would be nice if it would be possible to set this on the tRPC integration level so it can be filtered using tRPC error codes