⬆️ Upgrade sentry and improve its reliability

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
 
-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 + '-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,
+
+    // 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.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"]
 }