⬆️ Upgrade sentry and improve its reliability

apps/builder/next.config.mjs

@@ -54,20 +54,32 @@ const nextConfig = {
   },
 }
 
-const sentryWebpackPluginOptions = {
-  silent: true,
-  release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA + '-builder',
-}
+export default withSentryConfig(
+  nextConfig,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
 
-export default process.env.NEXT_PUBLIC_SENTRY_DSN
-  ? withSentryConfig(
-      {
-        ...nextConfig,
-        sentry: {
-          hideSourceMaps: true,
-          widenClientFileUpload: true,
-        },
-      },
-      sentryWebpackPluginOptions
-    )
-  : nextConfig
+    // Suppresses source map uploading logs during build
+    silent: true,
+    release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA + '-builder',
+    org: process.env.SENTRY_ORG,
+    project: process.env.SENTRY_PROJECT,
+  },
+  {
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+    tunnelRoute: '/monitoring',
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
+
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+  }
+)

apps/builder/package.json

@@ -26,13 +26,13 @@
     "@giphy/react-components": "7.1.0",
     "@googleapis/drive": "8.0.0",
     "@paralleldrive/cuid2": "2.2.1",
-    "@sentry/nextjs": "7.66.0",
+    "@sentry/nextjs": "7.73.0",
     "@tanstack/react-query": "^4.29.19",
     "@tanstack/react-table": "8.9.3",
-    "@trpc/client": "10.34.0",
-    "@trpc/next": "10.34.0",
-    "@trpc/react-query": "10.34.0",
-    "@trpc/server": "10.34.0",
+    "@trpc/client": "10.40.0",
+    "@trpc/next": "10.40.0",
+    "@trpc/react-query": "10.40.0",
+    "@trpc/server": "10.40.0",
     "@typebot.io/bot-engine": "workspace:*",
     "@typebot.io/emails": "workspace:*",
     "@typebot.io/env": "workspace:*",

apps/builder/sentry.server.config.js → apps/builder/sentry.server.config.ts

@@ -1,6 +1,12 @@
 import * as Sentry from '@sentry/nextjs'
+import prisma from '@typebot.io/lib/prisma'
 
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA + '-builder',
+  integrations: [
+    new Sentry.Integrations.Prisma({
+      client: prisma,
+    }),
+  ],
 })

apps/builder/src/features/auth/helpers/getAuthenticatedUser.ts

@@ -1,6 +1,6 @@
 import prisma from '@typebot.io/lib/prisma'
 import { authOptions } from '@/pages/api/auth/[...nextauth]'
-import { setUser } from '@sentry/nextjs'
+import * as Sentry from '@sentry/nextjs'
 import { User } from '@typebot.io/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getServerSession } from 'next-auth'
@@ -19,7 +19,7 @@ export const getAuthenticatedUser = async (
         | User
         | undefined)
   if (!user || !('id' in user)) return
-  setUser({ id: user.id })
+  Sentry.setUser({ id: user.id })
   return user
 }
 
@@ -30,7 +30,7 @@ const authenticateByToken = async (
   const user = (await prisma.user.findFirst({
     where: { apiTokens: { some: { token: apiToken } } },
   })) as User
-  setUser({ id: user.id })
+  Sentry.setUser({ id: user.id })
   return user
 }
 

apps/builder/src/helpers/server/trpc.ts

@@ -2,11 +2,18 @@ import { TRPCError, initTRPC } from '@trpc/server'
 import { Context } from './context'
 import { OpenApiMeta } from 'trpc-openapi'
 import superjson from 'superjson'
+import * as Sentry from '@sentry/nextjs'
 
 const t = initTRPC.context<Context>().meta<OpenApiMeta>().create({
   transformer: superjson,
 })
 
+const sentryMiddleware = t.middleware(
+  Sentry.Handlers.trpcMiddleware({
+    attachRpcInput: true,
+  })
+)
+
 const isAuthed = t.middleware(({ next, ctx }) => {
   if (!ctx.user?.id) {
     throw new TRPCError({
@@ -20,10 +27,12 @@ const isAuthed = t.middleware(({ next, ctx }) => {
   })
 })
 
+const finalMiddleware = sentryMiddleware.unstable_pipe(isAuthed)
+
 export const middleware = t.middleware
 
 export const router = t.router
 
-export const publicProcedure = t.procedure
+export const publicProcedure = t.procedure.use(sentryMiddleware)
 
-export const authenticatedProcedure = t.procedure.use(isAuthed)
+export const authenticatedProcedure = t.procedure.use(finalMiddleware)

apps/builder/src/pages/api/auth/[...nextauth].ts

@@ -18,6 +18,7 @@ import { Ratelimit } from '@upstash/ratelimit'
 import { Redis } from '@upstash/redis/nodejs'
 import got from 'got'
 import { env } from '@typebot.io/env'
+import * as Sentry from '@sentry/nextjs'
 
 const providers: Provider[] = []
 
@@ -134,6 +135,14 @@ export const authOptions: AuthOptions = {
     signIn: '/signin',
     newUser: env.NEXT_PUBLIC_ONBOARDING_TYPEBOT_ID ? '/onboarding' : undefined,
   },
+  events: {
+    signIn({ user }) {
+      Sentry.setUser({ id: user.id })
+    },
+    signOut() {
+      Sentry.setUser(null)
+    },
+  },
   callbacks: {
     session: async ({ session, user }) => {
       const userFromDb = user as User

apps/builder/src/pages/api/trpc/[trpc].ts

@@ -1,14 +1,14 @@
 import { createContext } from '@/helpers/server/context'
 import { trpcRouter } from '@/helpers/server/routers/v1/trpcRouter'
-import { captureException } from '@sentry/nextjs'
+import * as Sentry from '@sentry/nextjs'
 import { createNextApiHandler } from '@trpc/server/adapters/next'
 
 export default createNextApiHandler({
   router: trpcRouter,
   createContext,
   onError({ error }) {
     if (error.code === 'INTERNAL_SERVER_ERROR') {
-      captureException(error)
+      Sentry.captureException(error)
       console.error('Something went wrong', error)
     }
     return error

apps/builder/src/pages/api/v1/[...trpc].ts

@@ -1,6 +1,6 @@
 import { createContext } from '@/helpers/server/context'
 import { trpcRouter } from '@/helpers/server/routers/v1/trpcRouter'
-import { captureException } from '@sentry/nextjs'
+import * as Sentry from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { createOpenApiNextHandler } from 'trpc-openapi'
 import cors from 'nextjs-cors'
@@ -15,7 +15,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     createContext,
     onError({ error }) {
       if (error.code === 'INTERNAL_SERVER_ERROR') {
-        captureException(error)
+        Sentry.captureException(error)
         console.error('Something went wrong', error)
       }
     },

apps/viewer/next.config.mjs

@@ -134,20 +134,32 @@ const nextConfig = {
   },
 }
 
-const sentryWebpackPluginOptions = {
-  silent: true,
-  release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA + '-viewer',
-}
+export default withSentryConfig(
+  nextConfig,
+  {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    // Suppresses source map uploading logs during build
+    silent: true,
+    release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA + '-viewer',
+    org: process.env.SENTRY_ORG,
+    project: process.env.SENTRY_PROJECT,
+  },
+  {
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+
+    // Upload a larger set of source maps for prettier stack traces (increases build time)
+    widenClientFileUpload: true,
+
+    // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
+    tunnelRoute: '/monitoring',
+
+    // Hides source maps from generated client bundles
+    hideSourceMaps: true,
 
-export default process.env.NEXT_PUBLIC_SENTRY_DSN
-  ? withSentryConfig(
-      {
-        ...nextConfig,
-        sentry: {
-          hideSourceMaps: true,
-          widenClientFileUpload: true,
-        },
-      },
-      sentryWebpackPluginOptions
-    )
-  : nextConfig
+    // Automatically tree-shake Sentry logger statements to reduce bundle size
+    disableLogger: true,
+  }
+)

apps/viewer/package.json

@@ -12,8 +12,8 @@
   },
   "dependencies": {
     "@planetscale/database": "^1.8.0",
-    "@sentry/nextjs": "7.66.0",
-    "@trpc/server": "10.34.0",
+    "@sentry/nextjs": "7.73.0",
+    "@trpc/server": "10.40.0",
     "@typebot.io/bot-engine": "workspace:*",
     "@typebot.io/nextjs": "workspace:*",
     "@typebot.io/prisma": "workspace:*",

apps/viewer/sentry.server.config.js → apps/viewer/sentry.server.config.ts

@@ -1,6 +1,12 @@
 import * as Sentry from '@sentry/nextjs'
+import prisma from '@typebot.io/lib/prisma'
 
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
   release: process.env.NEXT_PUBLIC_VERCEL_GIT_COMMIT_SHA + '-viewer',
+  integrations: [
+    new Sentry.Integrations.Prisma({
+      client: prisma,
+    }),
+  ],
 })

apps/viewer/src/helpers/server/trpc.ts

@@ -2,11 +2,18 @@ import { initTRPC } from '@trpc/server'
 import { OpenApiMeta } from 'trpc-openapi'
 import superjson from 'superjson'
 import { Context } from './context'
+import * as Sentry from '@sentry/nextjs'
 
 const t = initTRPC.context<Context>().meta<OpenApiMeta>().create({
   transformer: superjson,
 })
 
+const sentryMiddleware = t.middleware(
+  Sentry.Handlers.trpcMiddleware({
+    attachRpcInput: true,
+  })
+)
+
 const injectUser = t.middleware(({ next, ctx }) => {
   return next({
     ctx: {
@@ -15,8 +22,10 @@ const injectUser = t.middleware(({ next, ctx }) => {
   })
 })
 
+const finalMiddleware = sentryMiddleware.unstable_pipe(injectUser)
+
 export const middleware = t.middleware
 
 export const router = t.router
 
-export const publicProcedure = t.procedure.use(injectUser)
+export const publicProcedure = t.procedure.use(finalMiddleware)

apps/viewer/src/pages/api/v1/[...trpc].ts

@@ -1,5 +1,5 @@
 import { appRouter } from '@/helpers/server/routers/appRouterV1'
-import { captureException } from '@sentry/nextjs'
+import * as Sentry from '@sentry/nextjs'
 import { createOpenApiNextHandler } from 'trpc-openapi'
 import cors from 'nextjs-cors'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -13,7 +13,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     createContext,
     onError({ error }) {
       if (error.code === 'INTERNAL_SERVER_ERROR') {
-        captureException(error)
+        Sentry.captureException(error)
         console.error('Something went wrong', error)
       }
     },

apps/viewer/src/pages/api/v2/[...trpc].ts

@@ -1,5 +1,5 @@
 import { appRouter } from '@/helpers/server/routers/appRouterV2'
-import { captureException } from '@sentry/nextjs'
+import * as Sentry from '@sentry/nextjs'
 import { createOpenApiNextHandler } from 'trpc-openapi'
 import cors from 'nextjs-cors'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -13,7 +13,7 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
     createContext,
     onError({ error }) {
       if (error.code === 'INTERNAL_SERVER_ERROR') {
-        captureException(error)
+        Sentry.captureException(error)
         console.error('Something went wrong', error)
       }
     },

apps/viewer/tsconfig.json

@@ -3,9 +3,7 @@
   "compilerOptions": {
     "baseUrl": ".",
     "paths": {
-      "@/*": [
-        "src/*"
-      ]
+      "@/*": ["src/*"]
     },
     "plugins": [
       {
@@ -14,10 +12,5 @@
     ],
     "strictNullChecks": true
   },
-  "include": [
-    "next-env.d.ts",
-    "**/*.ts",
-    "**/*.tsx",
-    ".next/types/**/*.ts"
-  ]
+  "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", ".next/types/**/*.ts"]
 }

packages/bot-engine/package.json

@@ -8,8 +8,8 @@
   "dependencies": {
     "@paralleldrive/cuid2": "2.2.1",
     "@planetscale/database": "^1.8.0",
-    "@sentry/nextjs": "7.66.0",
-    "@trpc/server": "10.34.0",
+    "@sentry/nextjs": "7.73.0",
+    "@trpc/server": "10.40.0",
     "@typebot.io/emails": "workspace:*",
     "@typebot.io/env": "workspace:*",
     "@typebot.io/lib": "workspace:*",