-
-
Notifications
You must be signed in to change notification settings - Fork 1.7k
Integrating Sentry with the t3 stack (v8 edition) #13103
-
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
Screenshot 2023年07月11日 at 9 56 24 AM
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);
Beta Was this translation helpful? Give feedback.
All reactions
-
❤️ 4
Replies: 3 comments 6 replies
-
Will the client errors also have the context of the user that was set in the signIn and signOut events of next-auth ?
@lforst
Beta Was this translation helpful? Give feedback.
All reactions
-
No. You'll need to find a place in your clientside code to set the user with Sentry.setUser()
Beta Was this translation helpful? Give feedback.
All reactions
-
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 });
Beta Was this translation helpful? Give feedback.
All reactions
-
🚀 2
-
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?
Beta Was this translation helpful? Give feedback.
All reactions
-
This docs page outlines all of the possible approaches: https://docs.sentry.io/platforms/javascript/configuration/filtering/
Beta Was this translation helpful? Give feedback.
All reactions
-
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
Beta Was this translation helpful? Give feedback.
All reactions
-
Isn't sentry.server.config.ts deprecated in v8.x?
From the migration docs:
With version 8 of the SDK we will no longer support the use of sentry.server.config.ts and sentry.edge.config.ts files. Instead, please initialize the Sentry Next.js SDK for the serverside in a Next.js instrumentation hook. sentry.client.config.ts|js is still supported and encouraged for initializing the clientside SDK.
The following is an example of how to initialize the serverside SDK in a Next.js instrumentation hook:
First, enable the Next.js instrumentation hook by setting the experimental.instrumentationHook to true in your next.config.js.
Next, create a instrumentation.ts|js file in the root directory of your project (or in the src folder if you have have one).
Now, export a register function from the instrumentation.ts|js file and call Sentry.init() inside of it:
import * as Sentry from '@sentry/nextjs';
export function register() {
if (process.env.NEXT_RUNTIME === 'nodejs') {
Sentry.init({
dsn: 'YOUR_DSN',
// Your Node.js Sentry configuration...
});
}
if (process.env.NEXT_RUNTIME === 'edge') {
Sentry.init({
dsn: 'YOUR_DSN',
// Your Edge Runtime Sentry configuration...
});
}
}
Beta Was this translation helpful? Give feedback.
All reactions
-
Oh we need to update those docs. It's better to import the sentry.server|edge.config.ts files from the instrumentation.ts file to avoid problems with certain APIs only being available on certain runtimes. Officially, they're not a thing that exists anymore.
Beta Was this translation helpful? Give feedback.
All reactions
-
Beta Was this translation helpful? Give feedback.
All reactions
-
👍 1