💚 Fix sentry not receiving events

apps/builder/next.config.js

@@ -14,6 +14,9 @@ const nextConfig = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
+  sentry: {
+    hideSourceMaps: true,
+  },
 }
 
 const sentryWebpackPluginOptions = {

apps/builder/package.json

@@ -31,7 +31,7 @@
     "@giphy/react-components": "6.4.0",
     "@googleapis/drive": "4.0.0",
     "@lezer/css": "^1.1.1",
-    "@sentry/nextjs": "7.23.0",
+    "@sentry/nextjs": "7.26.0",
     "@stripe/stripe-js": "1.46.0",
     "@tanstack/react-query": "^4.19.1",
     "@tanstack/react-table": "8.7.0",

apps/builder/sentry.client.config.js

@@ -4,8 +4,10 @@
 
 import * as Sentry from '@sentry/nextjs'
 
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: SENTRY_DSN,
   ignoreErrors: ['ResizeObserver loop limit exceeded'],
   beforeBreadcrumb(breadcrumb, hint) {
     try {

apps/builder/sentry.properties

@@ -1,4 +1,3 @@
 defaults.url=https://sentry.io/
 defaults.org=typebot
 defaults.project=builder
-cli.executable=../../../../.npm/_npx/31852/lib/node_modules/@sentry/wizard/node_modules/@sentry/cli/bin/sentry-cli

apps/builder/sentry.server.config.js

@@ -4,7 +4,9 @@
 
 import * as Sentry from '@sentry/nextjs'
 
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: SENTRY_DSN,
   ignoreErrors: ['ResizeObserver loop limit exceeded'],
 })

apps/builder/src/pages/_error.tsx

@@ -1,76 +1,43 @@
-import NextErrorComponent, { ErrorProps } from 'next/error'
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
 
 import * as Sentry from '@sentry/nextjs'
-import { NextPageContext } from 'next'
+import NextErrorComponent from 'next/error'
 
-const MyError = ({
-  statusCode,
-  hasGetInitialPropsRun,
-  err,
-}: {
+const CustomErrorComponent = (props: {
   statusCode: number
   hasGetInitialPropsRun: boolean
   err: Error
 }) => {
-  if (!hasGetInitialPropsRun && err) {
-    // getInitialProps is not called in case of
-    // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
-    // err via _app.js so it can be captured
-    Sentry.captureException(err)
-    // Flushing is not required in this case as it only happens on the client
-  }
+  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+  // compensate for https://github.com/vercel/next.js/issues/8592
+  // Sentry.captureUnderscoreErrorException(props);
 
-  return <NextErrorComponent statusCode={statusCode} />
+  return <NextErrorComponent statusCode={props.statusCode} />
 }
 
-MyError.getInitialProps = async (context: NextPageContext) => {
-  const errorInitialProps = (await NextErrorComponent.getInitialProps(
-    context
-  )) as ErrorProps & { hasGetInitialPropsRun: boolean }
+CustomErrorComponent.getInitialProps = async (contextData: any) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData)
 
-  const { res, err, asPath } = context
-
-  // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
-  // getInitialProps has run
-  errorInitialProps.hasGetInitialPropsRun = true
-
-  // Returning early because we don't want to log 404 errors to Sentry.
-  if (res?.statusCode === 404) {
-    return errorInitialProps
-  }
-
-  // Running on the server, the response object (`res`) is available.
-  //
-  // Next.js will pass an err on the server if a page's data fetching methods
-  // threw or returned a Promise that rejected
-  //
-  // Running on the client (browser), Next.js will provide an err if:
-  //
-  //  - a page's `getInitialProps` threw or returned a Promise that rejected
-  //  - an exception was thrown somewhere in the React lifecycle (render,
-  //    componentDidMount, etc) that was caught by Next.js's React Error
-  //    Boundary. Read more about what types of exceptions are caught by Error
-  //    Boundaries: https://reactjs.org/docs/error-boundaries.html
-
-  if (err) {
-    Sentry.captureException(err)
-
-    // Flushing before returning is necessary if deploying to Vercel, see
-    // https://vercel.com/docs/platform/limits#streaming-responses
-    await Sentry.flush(2000)
-
-    return errorInitialProps
-  }
-
-  // If this point is reached, getInitialProps was called without any
-  // information about what the error might be. This is unexpected and may
-  // indicate a bug introduced in Next.js, so record it in Sentry
-  Sentry.captureException(
-    new Error(`_error.js getInitialProps missing data at path: ${asPath}`)
-  )
-  await Sentry.flush(2000)
-
-  return errorInitialProps
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData)
 }
 
-export default MyError
+export default CustomErrorComponent

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

@@ -8,7 +8,6 @@ import AzureADProvider from 'next-auth/providers/azure-ad'
 import prisma from '@/lib/prisma'
 import { Provider } from 'next-auth/providers'
 import { NextApiRequest, NextApiResponse } from 'next'
-import { withSentry } from '@sentry/nextjs'
 import { CustomAdapter } from './adapter'
 import { User } from 'db'
 import { env, isNotEmpty } from 'utils'
@@ -194,4 +193,4 @@ const getRequiredGroups = (provider: string): string[] => {
 const checkHasGroups = (userGroups: string[], requiredGroups: string[]) =>
   userGroups?.some((userGroup) => requiredGroups?.includes(userGroup))
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/credentials.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { Credentials } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -48,4 +47,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/credentials/[credentialsId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
@@ -22,4 +21,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/credentials/google-sheets/callback.ts

@@ -6,7 +6,6 @@ import { stringify } from 'querystring'
 import { CredentialsType } from 'models'
 import { badRequest, encrypt, notAuthenticated } from 'utils/api'
 import { oauth2Client } from '@/lib/googleSheets'
-import { withSentry } from '@sentry/nextjs'
 import { getAuthenticatedUser } from '@/features/auth/api'
 
 const handler = async (req: NextApiRequest, res: NextApiResponse) => {
@@ -57,4 +56,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/credentials/google-sheets/consent-url.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { oauth2Client } from '@/lib/googleSheets'
 import { NextApiRequest, NextApiResponse } from 'next'
 
@@ -20,4 +19,4 @@ const handler = (req: NextApiRequest, res: NextApiResponse) => {
   }
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/customDomains.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { CustomDomain } from 'db'
 import { got, HTTPError } from 'got'
 import prisma from '@/lib/prisma'
@@ -58,4 +57,4 @@ const createDomainOnVercel = (name: string) =>
     json: { name },
   })
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/customDomains/[domain].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { badRequest, methodNotAllowed, notAuthenticated } from 'utils/api'
@@ -30,4 +29,4 @@ const deleteDomainOnVercel = (name: string) =>
     headers: { Authorization: `Bearer ${process.env.VERCEL_TOKEN}` },
   })
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/folders.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { DashboardFolder, WorkspaceRole } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -51,4 +50,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/folders/[id].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { DashboardFolder } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -41,4 +40,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/integrations/email/test-config.ts

@@ -37,4 +37,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/integrations/google-sheets/spreadsheets.ts

@@ -28,4 +28,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/integrations/google-sheets/spreadsheets/[id]/sheets.ts

@@ -46,4 +46,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/mock/webhook-easy-config.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils/api'
 
@@ -9,4 +8,4 @@ const handler = (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/mock/webhook.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils/api'
 
@@ -24,4 +23,4 @@ const handler = (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/publicIdAvailable.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { badRequest, methodNotAllowed, notAuthenticated } from 'utils/api'
@@ -16,4 +15,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/publicTypebots.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { InputBlockType, PublicTypebot } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -39,4 +38,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/publicTypebots/[id].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { InputBlockType, PublicTypebot } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -47,4 +46,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/storage/upload-url.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
 import {
@@ -36,4 +35,4 @@ const handler = async (
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/stripe/billing-portal.ts

@@ -6,7 +6,6 @@ import {
   notAuthenticated,
 } from 'utils/api'
 import Stripe from 'stripe'
-import { withSentry } from '@sentry/nextjs'
 import { getAuthenticatedUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
 import { WorkspaceRole } from 'db'
@@ -39,4 +38,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/stripe/custom-plan-checkout.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { Plan } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -58,4 +57,4 @@ const createCheckoutSession = async (userId: string) => {
   })
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/stripe/invoices.ts

@@ -6,7 +6,6 @@ import {
   notAuthenticated,
 } from 'utils/api'
 import Stripe from 'stripe'
-import { withSentry } from '@sentry/nextjs'
 import { getAuthenticatedUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
 import { WorkspaceRole } from 'db'
@@ -46,4 +45,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/stripe/subscription.ts

@@ -7,7 +7,6 @@ import {
   notAuthenticated,
 } from 'utils/api'
 import Stripe from 'stripe'
-import { withSentry } from '@sentry/nextjs'
 import { getAuthenticatedUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
 import { Plan, WorkspaceRole } from 'db'
@@ -258,4 +257,4 @@ const parseSubscriptionItems = (
         : []
     )
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/stripe/webhook.ts

@@ -4,7 +4,6 @@ import Stripe from 'stripe'
 import Cors from 'micro-cors'
 import { buffer } from 'micro'
 import prisma from '@/lib/prisma'
-import { withSentry } from '@sentry/nextjs'
 import { Plan } from 'db'
 
 if (!process.env.STRIPE_SECRET_KEY || !process.env.STRIPE_WEBHOOK_SECRET)
@@ -128,4 +127,4 @@ const webhookHandler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(cors(webhookHandler as any))
+export default cors(webhookHandler as any)

apps/builder/src/pages/api/typebots.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { Plan, WorkspaceRole } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -111,4 +110,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   }
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { CollaborationType } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -87,4 +86,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/analytics/answersCount.ts

@@ -2,7 +2,6 @@ import { PublicTypebot } from 'models'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed, notAuthenticated } from 'utils/api'
-import { withSentry } from '@sentry/nextjs'
 import { getAuthenticatedUser } from '@/features/auth/api'
 import { canReadTypebots } from '@/utils/api/dbRules'
 
@@ -35,4 +34,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/analytics/stats.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { Stats } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -47,4 +46,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/blocks.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { canReadTypebots } from '@/utils/api/dbRules'
@@ -20,4 +19,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/collaborators.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { canReadTypebots } from '@/utils/api/dbRules'
@@ -21,4 +20,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/collaborators/[userId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { canEditGuests } from '@/utils/api/dbRules'
@@ -31,4 +30,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/invitations.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { CollaborationType, WorkspaceRole } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -82,4 +81,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/invitations/[email].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { Invitation } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -35,4 +34,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/typebots/[typebotId]/webhooks.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { defaultWebhookAttributes } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -24,4 +23,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/users/[userId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
@@ -20,4 +19,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/users/[userId]/api-tokens.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
@@ -37,4 +36,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/users/[userId]/api-tokens/[tokenId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
@@ -18,4 +17,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/webhooks/[webhookId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { CollaborationType } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -68,4 +67,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/workspaces/[workspaceId]/invitations.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { Workspace, WorkspaceInvitation, WorkspaceRole } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -74,4 +73,4 @@ const checkIfSeatsLimitReached = async (workspace: Workspace) => {
   return existingMembersCount >= getSeatsLimit(workspace)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/workspaces/[workspaceId]/invitations/[id].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { WorkspaceInvitation, WorkspaceRole } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -36,4 +35,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/workspaces/[workspaceId]/members.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
@@ -39,4 +38,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/workspaces/[workspaceId]/members/[id].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { MemberInWorkspace, WorkspaceRole } from 'db'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -45,4 +44,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/builder/src/pages/api/workspaces/[workspaceId]/usage.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { getAuthenticatedUser } from '@/features/auth/api'
@@ -60,4 +59,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/next.config.js

@@ -14,6 +14,9 @@ const nextConfig = {
   experimental: {
     outputFileTracingRoot: path.join(__dirname, '../../'),
   },
+  sentry: {
+    hideSourceMaps: true,
+  },
 }
 
 const sentryWebpackPluginOptions = {

apps/viewer/package.json

@@ -12,7 +12,7 @@
     "test:report": "pnpm playwright show-report"
   },
   "dependencies": {
-    "@sentry/nextjs": "7.23.0",
+    "@sentry/nextjs": "7.26.0",
     "@trpc/server": "10.4.3",
     "aws-sdk": "2.1267.0",
     "bot-engine": "workspace:*",
@@ -27,7 +27,6 @@
     "qs": "6.11.0",
     "react": "18.2.0",
     "react-dom": "18.2.0",
-    "sanitize-html": "2.7.3",
     "stripe": "11.1.0",
     "trpc-openapi": "1.0.0"
   },

apps/viewer/sentry.client.config.js

@@ -4,8 +4,10 @@
 
 import * as Sentry from '@sentry/nextjs'
 
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: SENTRY_DSN,
   ignoreErrors: [
     'ResizeObserver loop limit exceeded',
     'ResizeObserver loop completed with undelivered notifications.',

apps/viewer/sentry.properties

@@ -1,4 +1,3 @@
 defaults.url=https://sentry.io/
 defaults.org=typebot
 defaults.project=viewer
-cli.executable=../../../../.npm/_npx/14461/lib/node_modules/@sentry/wizard/node_modules/@sentry/cli/bin/sentry-cli

apps/viewer/sentry.server.config.js

@@ -4,8 +4,10 @@
 
 import * as Sentry from '@sentry/nextjs'
 
+const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN
+
 Sentry.init({
-  dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  dsn: SENTRY_DSN,
   ignoreErrors: [
     'ResizeObserver loop limit exceeded',
     'ResizeObserver loop completed with undelivered notifications.',

apps/viewer/src/pages/[[...publicId]].tsx

@@ -2,7 +2,6 @@ import { IncomingMessage } from 'http'
 import { ErrorPage } from '@/components/ErrorPage'
 import { NotFoundPage } from '@/components/NotFoundPage'
 import { GetServerSideProps, GetServerSidePropsContext } from 'next'
-import sanitizeHtml from 'sanitize-html'
 import { env, getViewerUrl, isDefined, isNotDefined, omit } from 'utils'
 import { TypebotPage, TypebotPageProps } from '../components/TypebotPage'
 import prisma from '../lib/prisma'
@@ -46,14 +45,7 @@ export const getServerSideProps: GetServerSideProps = async (
         isIE,
         url: `https://${forwardedHost ?? host}${pathname}`,
         customHeadCode:
-          isDefined(headCode) && headCode !== ''
-            ? sanitizeHtml(headCode, {
-                allowedTags: ['script', 'meta'],
-                allowedAttributes: {
-                  meta: ['name', 'content'],
-                },
-              })
-            : null,
+          isDefined(headCode) && headCode !== '' ? headCode : null,
       },
     }
   } catch (err) {

apps/viewer/src/pages/_error.tsx

@@ -1,76 +1,43 @@
-import NextErrorComponent, { ErrorProps } from 'next/error'
+/**
+ * NOTE: This requires `@sentry/nextjs` version 7.3.0 or higher.
+ *
+ * NOTE: If using this with `next` version 12.2.0 or lower, uncomment the
+ * penultimate line in `CustomErrorComponent`.
+ *
+ * This page is loaded by Nextjs:
+ *  - on the server, when data-fetching methods throw or reject
+ *  - on the client, when `getInitialProps` throws or rejects
+ *  - on the client, when a React lifecycle method throws or rejects, and it's
+ *    caught by the built-in Nextjs error boundary
+ *
+ * See:
+ *  - https://nextjs.org/docs/basic-features/data-fetching/overview
+ *  - https://nextjs.org/docs/api-reference/data-fetching/get-initial-props
+ *  - https://reactjs.org/docs/error-boundaries.html
+ */
 
 import * as Sentry from '@sentry/nextjs'
-import { NextPageContext } from 'next'
+import NextErrorComponent from 'next/error'
 
-const MyError = ({
-  statusCode,
-  hasGetInitialPropsRun,
-  err,
-}: {
+const CustomErrorComponent = (props: {
   statusCode: number
   hasGetInitialPropsRun: boolean
   err: Error
 }) => {
-  if (!hasGetInitialPropsRun && err) {
-    // getInitialProps is not called in case of
-    // https://github.com/vercel/next.js/issues/8592. As a workaround, we pass
-    // err via _app.js so it can be captured
-    Sentry.captureException(err)
-    // Flushing is not required in this case as it only happens on the client
-  }
+  // If you're using a Nextjs version prior to 12.2.1, uncomment this to
+  // compensate for https://github.com/vercel/next.js/issues/8592
+  // Sentry.captureUnderscoreErrorException(props);
 
-  return <NextErrorComponent statusCode={statusCode} />
+  return <NextErrorComponent statusCode={props.statusCode} />
 }
 
-MyError.getInitialProps = async (context: NextPageContext) => {
-  const errorInitialProps = (await NextErrorComponent.getInitialProps(
-    context
-  )) as ErrorProps & { hasGetInitialPropsRun: boolean }
+CustomErrorComponent.getInitialProps = async (contextData: any) => {
+  // In case this is running in a serverless function, await this in order to give Sentry
+  // time to send the error before the lambda exits
+  await Sentry.captureUnderscoreErrorException(contextData)
 
-  const { res, err, asPath } = context
-
-  // Workaround for https://github.com/vercel/next.js/issues/8592, mark when
-  // getInitialProps has run
-  errorInitialProps.hasGetInitialPropsRun = true
-
-  // Returning early because we don't want to log 404 errors to Sentry.
-  if (res?.statusCode === 404) {
-    return errorInitialProps
-  }
-
-  // Running on the server, the response object (`res`) is available.
-  //
-  // Next.js will pass an err on the server if a page's data fetching methods
-  // threw or returned a Promise that rejected
-  //
-  // Running on the client (browser), Next.js will provide an err if:
-  //
-  //  - a page's `getInitialProps` threw or returned a Promise that rejected
-  //  - an exception was thrown somewhere in the React lifecycle (render,
-  //    componentDidMount, etc) that was caught by Next.js's React Error
-  //    Boundary. Read more about what types of exceptions are caught by Error
-  //    Boundaries: https://reactjs.org/docs/error-boundaries.html
-
-  if (err) {
-    Sentry.captureException(err)
-
-    // Flushing before returning is necessary if deploying to Vercel, see
-    // https://vercel.com/docs/platform/limits#streaming-responses
-    await Sentry.flush(2000)
-
-    return errorInitialProps
-  }
-
-  // If this point is reached, getInitialProps was called without any
-  // information about what the error might be. This is unexpected and may
-  // indicate a bug introduced in Next.js, so record it in Sentry
-  Sentry.captureException(
-    new Error(`_error.js getInitialProps missing data at path: ${asPath}`)
-  )
-  await Sentry.flush(2000)
-
-  return errorInitialProps
+  // This will contain the status code of the response
+  return NextErrorComponent.getInitialProps(contextData)
 }
 
-export default MyError
+export default CustomErrorComponent

apps/viewer/src/pages/api/integrations/google-sheets/spreadsheets/[spreadsheetId]/sheets/[sheetId].ts

@@ -16,7 +16,6 @@ import {
   LogicalOperator,
 } from 'models'
 import Cors from 'cors'
-import { withSentry } from '@sentry/nextjs'
 import { getAuthenticatedGoogleClient } from '@/lib/google-sheets'
 import { saveErrorLog, saveSuccessLog } from '@/features/logs/api'
 
@@ -237,4 +236,4 @@ const getExtractingColumns = (columns: string | string[] | undefined) => {
   if (Array.isArray(columns)) return columns
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/integrations/stripe/createPaymentIntent.ts

@@ -9,7 +9,6 @@ import {
 import Stripe from 'stripe'
 
 import Cors from 'cors'
-import { withSentry } from '@sentry/nextjs'
 import { PaymentInputOptions, StripeCredentialsData, Variable } from 'models'
 import prisma from '@/lib/prisma'
 import { parseVariables } from 'bot-engine'
@@ -133,4 +132,4 @@ const isZeroDecimalCurrency = (currency: string) =>
     'XPF',
   ].includes(currency)
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/mock/fail.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils/api'
 
@@ -12,4 +11,4 @@ const handler = (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/mock/success.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils/api'
 
@@ -12,4 +11,4 @@ const handler = (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/publicTypebots/[typebotId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { NextApiRequest, NextApiResponse } from 'next'
 import Cors from 'cors'
@@ -19,4 +18,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots.ts

@@ -1,6 +1,5 @@
 import { authenticateUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
-import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils/api'
 
@@ -17,4 +16,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/executeWebhook.ts

@@ -17,7 +17,6 @@ import got, { Method, Headers, HTTPError } from 'got'
 import { byId, omit, parseAnswers } from 'utils'
 import { initMiddleware, methodNotAllowed, notFound } from 'utils/api'
 import { stringify } from 'qs'
-import { withSentry } from '@sentry/nextjs'
 import Cors from 'cors'
 import prisma from '@/lib/prisma'
 import { saveErrorLog, saveSuccessLog } from '@/features/logs/api'
@@ -241,4 +240,4 @@ const safeJsonParse = (json: string): { data: any; isJson: boolean } => {
   }
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/executeWebhook.ts

@@ -11,7 +11,6 @@ import {
 import { NextApiRequest, NextApiResponse } from 'next'
 import { initMiddleware, methodNotAllowed, notFound } from 'utils/api'
 import { byId } from 'utils'
-import { withSentry } from '@sentry/nextjs'
 import Cors from 'cors'
 import { executeWebhook } from '../../executeWebhook'
 
@@ -68,4 +67,4 @@ const prepareWebhookAttributes = (
   return webhook
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/subscribeWebhook.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { Typebot, WebhookBlock } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils/api'
@@ -44,4 +43,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/steps/[stepId]/unsubscribeWebhook.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { Typebot, WebhookBlock } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { methodNotAllowed } from 'utils/api'
@@ -39,4 +38,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/storage/upload-url.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { InputBlockType, PublicTypebot } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -164,4 +163,4 @@ const sendReachStorageLimitNotification = async ({
   })
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/subscribeWebhook.ts

@@ -1,6 +1,5 @@
 import { authenticateUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
-import { withSentry } from '@sentry/nextjs'
 import { Typebot, WebhookBlock } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { byId } from 'utils'
@@ -43,4 +42,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/blocks/[blockId]/unsubscribeWebhook.ts

@@ -1,6 +1,5 @@
 import { authenticateUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
-import { withSentry } from '@sentry/nextjs'
 import { Typebot, WebhookBlock } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { byId } from 'utils'
@@ -38,4 +37,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/integrations/email.tsx

@@ -11,7 +11,6 @@ import { methodNotAllowed, initMiddleware, decrypt } from 'utils/api'
 import { saveErrorLog, saveSuccessLog } from '@/features/logs/api'
 
 import Cors from 'cors'
-import { withSentry } from '@sentry/nextjs'
 import Mail from 'nodemailer/lib/mailer'
 import { DefaultBotNotificationEmail } from 'emails'
 import { render } from '@faire/mjml-react/dist/src/utils/render'
@@ -218,4 +217,4 @@ const parseEmailRecipient = (
   }
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/results/[resultId].ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import prisma from '@/lib/prisma'
 import { Result } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -19,4 +18,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/results/[resultId]/answers.ts

@@ -1,5 +1,4 @@
 import prisma from '@/lib/prisma'
-import { withSentry } from '@sentry/nextjs'
 import { Answer } from 'db'
 import { got } from 'got'
 import { NextApiRequest, NextApiResponse } from 'next'
@@ -40,4 +39,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/webhookBlocks.ts

@@ -1,6 +1,5 @@
 import { authenticateUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
-import { withSentry } from '@sentry/nextjs'
 import { Group, WebhookBlock } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { byId, isWebhookBlock } from 'utils'
@@ -38,4 +37,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/typebots/[typebotId]/webhookSteps.ts

@@ -1,6 +1,5 @@
 import { authenticateUser } from '@/features/auth/api'
 import prisma from '@/lib/prisma'
-import { withSentry } from '@sentry/nextjs'
 import { Group, WebhookBlock } from 'models'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { byId, isNotDefined, isWebhookBlock } from 'utils'
@@ -42,4 +41,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler

apps/viewer/src/pages/api/users/me.ts

@@ -1,5 +1,4 @@
 import { authenticateUser } from '@/features/auth/api'
-import { withSentry } from '@sentry/nextjs'
 import { NextApiRequest, NextApiResponse } from 'next'
 import { isNotDefined } from 'utils'
 import { methodNotAllowed } from 'utils/api'
@@ -14,4 +13,4 @@ const handler = async (req: NextApiRequest, res: NextApiResponse) => {
   return methodNotAllowed(res)
 }
 
-export default withSentry(handler)
+export default handler