Add sentry

backend/api/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@compass/api",
-  "version": "1.20.1",
+  "version": "1.21.0",
   "private": true,
   "description": "Backend API endpoints",
   "main": "src/serve.ts",
@@ -28,6 +28,7 @@
   "dependencies": {
     "@google-cloud/monitoring": "4.0.0",
     "@google-cloud/secret-manager": "4.2.1",
+    "@sentry/node": "10.41.0",
     "@tiptap/core": "2.10.4",
     "cors": "2.8.5",
     "dayjs": "1.11.19",

backend/api/src/get-profiles.ts

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/node'
 import {type APIHandler} from 'api/helpers/endpoint'
 import {debug} from 'common/logger'
 import {OptionTableKey} from 'common/profiles/constants'
@@ -481,6 +482,7 @@ export const getProfiles: APIHandler<'get-profiles'> = async (props, auth) => {
     return {status: 'success', profiles: profiles, count: count}
   } catch (error) {
     console.log(error)
+    Sentry.captureException(error, {extra: props})
     return {status: 'fail', profiles: [], count: 0}
   }
 }

backend/api/src/helpers/endpoint.ts

@@ -1,3 +1,4 @@
+import * as Sentry from '@sentry/node'
 import {
   API,
   APIPath,
@@ -82,9 +83,14 @@ export const parseCredentials = async (req: Request): Promise<Credentials> => {
         return {kind: 'jwt', data: await auth.verifyIdToken(payload)}
       } catch (err) {
         const raw = payload.split('.')[0]
-        console.log('JWT header:', JSON.parse(Buffer.from(raw, 'base64').toString()))
+        const _header = JSON.parse(Buffer.from(raw, 'base64').toString())
         // This is somewhat suspicious, so get it into the firebase console
-        console.error('Error verifying Firebase JWT: ', err, scheme, payload)
+        console.error('Error verifying Firebase JWT: ', err, scheme, payload, {
+          jwtHeader: _header,
+        })
+        Sentry.captureException(err, {
+          extra: {jwtHeader: _header},
+        })
         throw new APIError(500, 'Error validating token.')
       }
     case 'Key':

backend/api/src/serve.ts

@@ -1,7 +1,9 @@
 import 'tsconfig-paths/register'
 
-import {IS_LOCAL} from 'common/hosting/constants'
+import * as Sentry from '@sentry/node'
+import {IS_LOCAL, SENTRY_DSN} from 'common/hosting/constants'
 import {loadSecretsToEnv} from 'common/secrets'
+import {ErrorRequestHandler} from 'express'
 import * as admin from 'firebase-admin'
 import {getServiceAccountCredentials} from 'shared/firebase-utils'
 import {initAdmin} from 'shared/init-admin'
@@ -13,6 +15,27 @@ import {app} from './app'
 
 log('Api server starting up....')
 
+Sentry.init({
+  dsn: SENTRY_DSN,
+  enabled: process.env.NODE_ENV === 'production',
+  environment: process.env.NODE_ENV,
+  tracesSampleRate: process.env.NODE_ENV === 'production' ? 0.1 : 1.0,
+  enableLogs: process.env.NODE_ENV === 'production',
+})
+
+const sentryErrorFilter: ErrorRequestHandler = (err, req, _res, next) => {
+  const status = err.status ?? err.httpStatus ?? 500
+  if (status >= 500) {
+    Sentry.captureException(err, {
+      extra: {path: req.path, method: req.method, status},
+    })
+  }
+  next(err)
+}
+
+app.use(sentryErrorFilter)
+app.use(Sentry.expressErrorHandler())
+
 if (IS_LOCAL) {
   initAdmin()
 } else {

common/src/hosting/constants.ts

@@ -21,4 +21,7 @@ if (IS_LOCAL && !process.env.ENVIRONMENT && !process.env.NEXT_PUBLIC_FIREBASE_EN
   process.env.ENVIRONMENT = 'DEV'
 }
 
+export const SENTRY_DSN =
+  'https://4e5d3b0aa566e8aaae97298398a1ad37@o4510975610060800.ingest.de.sentry.io/4510975611699280'
+
 // console.log('IS_LOCAL_ANDROID', IS_LOCAL_ANDROID)

web/instrumentation-client.ts

@@ -0,0 +1,35 @@
+// This file configures the initialization of Sentry on the client.
+// The added config 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 {SENTRY_DSN} from 'common/hosting/constants'
+
+const IS_NATIVE = !!process.env.NEXT_PUBLIC_WEBVIEW
+
+Sentry.init({
+  // Skip tunneling in native app context
+  dsn: SENTRY_DSN,
+
+  // Add optional integrations for additional features
+  integrations: IS_NATIVE ? [] : [Sentry.replayIntegration()],
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 0.1,
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Define how likely Replay events are sampled.
+  // This sets the sample rate to be 10%. You may want this to be 100% while
+  // in development and sample at a lower rate in production
+  replaysSessionSampleRate: 0.1,
+
+  // Define how likely Replay events are sampled when an error occurs.
+  replaysOnErrorSampleRate: 1.0,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+})
+
+export const onRouterTransitionStart = Sentry.captureRouterTransitionStart

web/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

web/next.config.ts

@@ -1,3 +1,4 @@
+import {withSentryConfig} from '@sentry/nextjs'
 import {IS_LOCAL} from 'common/hosting/constants'
 import type {NextConfig} from 'next'
 
@@ -104,4 +105,48 @@ const nextConfig: NextConfig = {
   },
 }
 
-export default nextConfig
+export default withSentryConfig(nextConfig, {
+  // For all available options, see:
+  // https://www.npmjs.com/package/@sentry/webpack-plugin#options
+
+  org: 'compass-0l',
+
+  project: 'javascript-nextjs',
+
+  // Only print logs for uploading source maps in CI
+  silent: !process.env.CI,
+
+  // authToken: process.env.SENTRY_AUTH_TOKEN,
+
+  // hideSourceMaps: true,
+  // disableLogger: 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: isAppBuild ? undefined : '/monitoring',
+
+  disableLogger: true, // removes Sentry.logger calls from prod bundle
+  sourcemaps: {disable: true}, // prevents source maps being served to browser
+
+  webpack: {
+    // 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,
+
+    // Tree-shaking options for reducing bundle size
+    treeshake: {
+      // Automatically tree-shake Sentry logger statements to reduce bundle size
+      removeDebugLogging: true,
+    },
+  },
+})

web/package.json

@@ -34,6 +34,7 @@
     "@heroicons/react": "2.2.0",
     "@radix-ui/react-slider": "1.3.6",
     "@react-spring/web": "10.0.3",
+    "@sentry/nextjs": "^10",
     "@tiptap/core": "2.10.4",
     "@tiptap/extension-character-count": "2.10.4",
     "@tiptap/extension-image": "2.10.4",

web/pages/_error.tsx

@@ -0,0 +1,16 @@
+import * as Sentry from '@sentry/nextjs'
+import type {NextPageContext} from 'next'
+import NextErrorComponent from 'next/error'
+
+type ErrorProps = {
+  statusCode: number
+}
+
+export default function CustomError({statusCode}: ErrorProps) {
+  return <NextErrorComponent statusCode={statusCode} />
+}
+
+CustomError.getInitialProps = async (ctx: NextPageContext) => {
+  await Sentry.captureUnderscoreErrorException(ctx)
+  return NextErrorComponent.getInitialProps(ctx)
+}

web/pages/api/sentry-example-api.ts

@@ -0,0 +1,21 @@
+import * as Sentry from '@sentry/nextjs'
+import type {NextApiRequest, NextApiResponse} from 'next'
+
+// Custom error class for Sentry testing
+class SentryExampleAPIError extends Error {
+  constructor(message: string | undefined) {
+    super(message)
+    this.name = 'SentryExampleAPIError'
+  }
+}
+
+type Response = {
+  name: string
+}
+
+// A faulty API route to test Sentry's error monitoring
+export default function handler(_req: NextApiRequest, _res: NextApiResponse<Response>) {
+  Sentry.logger.info('Sentry example API called')
+  throw new SentryExampleAPIError('This error is raised on the backend called by the example page.')
+  // res.status(200).json({name: 'John Doe'})
+}

web/pages/sentry-example-page.tsx

@@ -0,0 +1,234 @@
+import * as Sentry from '@sentry/nextjs'
+import Head from 'next/head'
+import {useEffect, useState} from 'react'
+
+class SentryExampleFrontendError extends Error {
+  constructor(message: string | undefined) {
+    super(message)
+    this.name = 'SentryExampleFrontendError'
+  }
+}
+
+export default function Page() {
+  const [hasSentError, setHasSentError] = useState(false)
+  const [isConnected, setIsConnected] = useState(true)
+
+  useEffect(() => {
+    Sentry.logger.info('Sentry example page loaded')
+    async function checkConnectivity() {
+      const result = await Sentry.diagnoseSdkConnectivity()
+      setIsConnected(result !== 'sentry-unreachable')
+    }
+    checkConnectivity()
+  }, [])
+
+  return (
+    <div>
+      <Head>
+        <title>sentry-example-page</title>
+        <meta name="description" content="Test Sentry for your Next.js app!" />
+      </Head>
+
+      <main>
+        <div className="flex-spacer" />
+        <svg
+          height="40"
+          width="40"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+          role="img"
+          aria-label="Sentry logo"
+        >
+          <path
+            d="M21.85 2.995a3.698 3.698 0 0 1 1.353 1.354l16.303 28.278a3.703 3.703 0 0 1-1.354 5.053 3.694 3.694 0 0 1-1.848.496h-3.828a31.149 31.149 0 0 0 0-3.09h3.815a.61.61 0 0 0 .537-.917L20.523 5.893a.61.61 0 0 0-1.057 0l-3.739 6.494a28.948 28.948 0 0 1 9.63 10.453 28.988 28.988 0 0 1 3.499 13.78v1.542h-9.852v-1.544a19.106 19.106 0 0 0-2.182-8.85 19.08 19.08 0 0 0-6.032-6.829l-1.85 3.208a15.377 15.377 0 0 1 6.382 12.484v1.542H3.696A3.694 3.694 0 0 1 0 34.473c0-.648.17-1.286.494-1.849l2.33-4.074a8.562 8.562 0 0 1 2.689 1.536L3.158 34.17a.611.611 0 0 0 .538.917h8.448a12.481 12.481 0 0 0-6.037-9.09l-1.344-.772 4.908-8.545 1.344.77a22.16 22.16 0 0 1 7.705 7.444 22.193 22.193 0 0 1 3.316 10.193h3.699a25.892 25.892 0 0 0-3.811-12.033 25.856 25.856 0 0 0-9.046-8.796l-1.344-.772 5.269-9.136a3.698 3.698 0 0 1 3.2-1.849c.648 0 1.285.17 1.847.495Z"
+            fill="currentcolor"
+          />
+        </svg>
+        <h1>sentry-example-page</h1>
+
+        <p className="description">
+          Click the button below, and view the sample error on the Sentry{' '}
+          <a
+            target="_blank"
+            rel="noopener"
+            href="https://compass-0l.sentry.io/issues/?project=4510975611699280"
+          >
+            Issues Page
+          </a>
+          . For more details about setting up Sentry,{' '}
+          <a
+            target="_blank"
+            rel="noopener"
+            href="https://docs.sentry.io/platforms/javascript/guides/nextjs/"
+          >
+            read our docs
+          </a>
+          .
+        </p>
+
+        <button
+          type="button"
+          onClick={async () => {
+            Sentry.logger.info('User clicked the button, throwing a sample error')
+            await Sentry.startSpan(
+              {
+                name: 'Example Frontend/Backend Span',
+                op: 'test',
+              },
+              async () => {
+                const res = await fetch('/api/sentry-example-api')
+                if (!res.ok) {
+                  setHasSentError(true)
+                }
+              },
+            )
+            throw new SentryExampleFrontendError(
+              'This error is raised on the frontend of the example page.',
+            )
+          }}
+          disabled={!isConnected}
+        >
+          <span>Throw Sample Error</span>
+        </button>
+
+        {hasSentError ? (
+          <p className="success">Error sent to Sentry.</p>
+        ) : !isConnected ? (
+          <div className="connectivity-error">
+            <p>
+              It looks like network requests to Sentry are being blocked, which will prevent errors
+              from being captured. Try disabling your ad-blocker to complete the test.
+            </p>
+          </div>
+        ) : (
+          <div className="success_placeholder" />
+        )}
+
+        <div className="flex-spacer" />
+      </main>
+
+      <style>{`
+        main {
+          display: flex;
+          min-height: 100vh;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          gap: 16px;
+          padding: 16px;
+          font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
+        }
+
+        h1 {
+          padding: 0px 4px;
+          border-radius: 4px;
+          background-color: rgba(24, 20, 35, 0.03);
+          font-family: monospace;
+          font-size: 20px;
+          line-height: 1.2;
+        }
+
+        p {
+          margin: 0;
+          font-size: 20px;
+        }
+
+        a {
+          color: #6341F0;
+          text-decoration: underline;
+          cursor: pointer;
+
+          @media (prefers-color-scheme: dark) {
+            color: #B3A1FF;
+          }
+        }
+
+        button {
+          border-radius: 8px;
+          color: white;
+          cursor: pointer;
+          background-color: #553DB8;
+          border: none;
+          padding: 0;
+          margin-top: 4px;
+
+          & > span {
+            display: inline-block;
+            padding: 12px 16px;
+            border-radius: inherit;
+            font-size: 20px;
+            font-weight: bold;
+            line-height: 1;
+            background-color: #7553FF;
+            border: 1px solid #553DB8;
+            transform: translateY(-4px);
+          }
+
+          &:hover > span {
+            transform: translateY(-8px);
+          }
+
+          &:active > span {
+            transform: translateY(0);
+          }
+
+          &:disabled {
+	            cursor: not-allowed;
+	            opacity: 0.6;
+
+	            & > span {
+	              transform: translateY(0);
+	              border: none
+	            }
+	          }
+        }
+
+        .description {
+          text-align: center;
+          color: #6E6C75;
+          max-width: 500px;
+          line-height: 1.5;
+          font-size: 20px;
+
+          @media (prefers-color-scheme: dark) {
+            color: #A49FB5;
+          }
+        }
+
+        .flex-spacer {
+          flex: 1;
+        }
+
+        .success {
+          padding: 12px 16px;
+          border-radius: 8px;
+          font-size: 20px;
+          line-height: 1;
+          background-color: #00F261;
+          border: 1px solid #00BF4D;
+          color: #181423;
+        }
+
+        .success_placeholder {
+          height: 46px;
+        }
+
+        .connectivity-error {
+          padding: 12px 16px;
+          background-color: #E50045;
+          border-radius: 8px;
+          width: 500px;
+          color: #FFFFFF;
+          border: 1px solid #A80033;
+          text-align: center;
+          margin: 0;
+        }
+
+        .connectivity-error a {
+          color: #FFFFFF;
+          text-decoration: underline;
+        }
+      `}</style>
+    </div>
+  )
+}

web/sentry.edge.config.ts

@@ -0,0 +1,21 @@
+// 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'
+import {SENTRY_DSN} from 'common/hosting/constants'
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 0.1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+})

web/sentry.server.config.ts

@@ -0,0 +1,20 @@
+// 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'
+import {SENTRY_DSN} from 'common/hosting/constants'
+
+Sentry.init({
+  dsn: SENTRY_DSN,
+
+  // Define how likely traces are sampled. Adjust this value in production, or use tracesSampler for greater control.
+  tracesSampleRate: 0.1,
+
+  // Enable logs to be sent to Sentry
+  enableLogs: true,
+
+  // Enable sending user PII (Personally Identifiable Information)
+  // https://docs.sentry.io/platforms/javascript/guides/nextjs/configuration/options/#sendDefaultPii
+  sendDefaultPii: true,
+})