chore: Bump sentry to v8+ (#29896)

* Bump sentry to v8.

* Fix all obsolete APIs.

* Fix the sentry configs.

* Add pages for testing sentry.

* Add missing imports to sentry.config file.

* Add base path to the api path.

* Remove extra files.

apps/studio/instrumentation.ts

@@ -0,0 +1,13 @@
+import * as Sentry from '@sentry/nextjs'
+
+export async function register() {
+  if (process.env.NEXT_RUNTIME === 'nodejs') {
+    await import('./sentry.server.config')
+  }
+
+  if (process.env.NEXT_RUNTIME === 'edge') {
+    await import('./sentry.edge.config')
+  }
+}
+
+export const onRequestError = Sentry.captureRequestError

apps/studio/lib/api/apiWrapper.ts

@@ -1,4 +1,3 @@
-import { withSentry } from '@sentry/nextjs'
 import { isResponseOk } from 'lib/common/fetch'
 import type { NextApiHandler, NextApiRequest, NextApiResponse } from 'next'
 import { IS_PLATFORM } from '../constants'
@@ -30,9 +29,7 @@ export default async function apiWrapper(
       }
     }
 
-    const func = withSentry(handler as any)
-    // @ts-ignore
-    return await func(req, res)
+    return handler(req, res)
   } catch (error) {
     return res.status(500).json({ error })
   }

apps/studio/next.config.js

@@ -520,29 +520,36 @@ const nextConfig = {
 // ensure that your source maps include changes from all other Webpack plugins
 module.exports =
   process.env.NEXT_PUBLIC_IS_PLATFORM === 'true'
-    ? withSentryConfig(
-        withBundleAnalyzer(nextConfig),
-        {
-          silent: true,
+    ? withSentryConfig(withBundleAnalyzer(nextConfig), {
+        silent: true,
+
+        // 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,
+
+        // Automatically annotate React components to show their full name in breadcrumbs and session replay
+        reactComponentAnnotation: {
+          enabled: true,
         },
-        {
-          // 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,
+        // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers.
+        // This can increase your server load as well as your hosting bill.
+        // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client-
+        // side errors will fail.
+        tunnelRoute: '/monitoring',
 
-          // Transpiles SDK to be compatible with IE11 (increases bundle size)
-          transpileClientSDK: false,
+        // Hides source maps from generated client bundles
+        hideSourceMaps: true,
 
-          // Routes browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers (increases server load)
-          tunnelRoute: '/monitoring',
+        // Automatically tree-shake Sentry logger statements to reduce bundle size
+        disableLogger: true,
 
-          // Hides source maps from generated client bundles
-          hideSourceMaps: true,
-
-          // Automatically tree-shake Sentry logger statements to reduce bundle size
-          disableLogger: true,
-        }
-      )
+        // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.)
+        // See the following for more information:
+        // https://docs.sentry.io/product/crons/
+        // https://vercel.com/docs/cron-jobs
+        automaticVercelMonitors: true,
+      })
     : nextConfig

apps/studio/package.json

@@ -33,7 +33,7 @@
     "@next/bundle-analyzer": "^14.2.3",
     "@radix-ui/react-popover": "^1.0.7",
     "@radix-ui/react-tooltip": "^1.0.7",
-    "@sentry/nextjs": "^7.108.0",
+    "@sentry/nextjs": "^8.34.0",
     "@stripe/react-stripe-js": "^2.5.0",
     "@stripe/stripe-js": "^3.0.5",
     "@supabase/auth-helpers-react": "^0.4.2",

apps/studio/pages/_error.jsx

@@ -0,0 +1,17 @@
+import * as Sentry from '@sentry/nextjs'
+import Error from 'next/error'
+
+const CustomErrorComponent = (props) => {
+  return <Error statusCode={props.statusCode} />
+}
+
+CustomErrorComponent.getInitialProps = async (contextData) => {
+  // 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)
+
+  // This will contain the status code of the response
+  return Error.getInitialProps(contextData)
+}
+
+export default CustomErrorComponent

apps/studio/sentry.client.config.ts

@@ -1,3 +1,7 @@
+// This file configures the initialization of Sentry on the client.
+// The config you add here will be used whenever a users loads a page in their browser.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
 import * as Sentry from '@sentry/nextjs'
 import { IS_PLATFORM } from 'common/constants/environment'
 import { LOCAL_STORAGE_KEYS } from 'common/constants/local-storage'
@@ -5,8 +9,12 @@ import { match } from 'path-to-regexp'
 
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 0.01,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
+
   beforeSend(event, hint) {
     const consent =
       typeof window !== 'undefined'
@@ -25,13 +33,14 @@ Sentry.init({
     }
     return null
   },
+
   integrations: [
-    new Sentry.BrowserTracing({
+    Sentry.browserTracingIntegration({
       // TODO: update gotrue + api to support Access-Control-Request-Headers: authorization,baggage,sentry-trace,x-client-info
       // then remove these options
       traceFetch: false,
       traceXHR: false,
-      beforeNavigate: (context) => {
+      beforeStartSpan: (context) => {
         return {
           ...context,
           name: standardiseRouterUrl(location.pathname),

apps/studio/sentry.edge.config.ts

@@ -1,7 +1,16 @@
+// This file configures the initialization of Sentry for edge features (middleware, edge routes, and so on).
+// The config you add here will be used whenever one of the edge features is loaded.
+// Note that this config is unrelated to the Vercel Edge Runtime and is also required when running locally.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
 import * as Sentry from '@sentry/nextjs'
 
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 0.01,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
 })

apps/studio/sentry.server.config.ts

@@ -1,9 +1,18 @@
+// This file configures the initialization of Sentry on the server.
+// The config you add here will be used whenever the server handles a request.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
 import * as Sentry from '@sentry/nextjs'
 
 Sentry.init({
   dsn: process.env.NEXT_PUBLIC_SENTRY_DSN,
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
   tracesSampleRate: 0.01,
+
+  // Setting this option to true will print useful information to the console while you're setting up Sentry.
   debug: false,
+
   ignoreErrors: [
     // Used exclusively in Monaco Editor.
     'ResizeObserver',