feat(sentry): setup and auth (#1747)

* feat(sentry): setup and auth * revert(): next-env file * chore(sentry): add error to error-page * chore: remove experimental hook * chore(): order of packages * chore(env): set dsn url in env variable and update readme
entur · Nov 26, 2024 · 1f4604d · 1f4604d
1 parent 0f1bdb0
commit 1f4604d
Show file tree

Hide file tree

Showing 12 changed files with 1,381 additions and 67 deletions.
diff --git a/tavla/README.md b/tavla/README.md
@@ -17,14 +17,28 @@ cd tavla/tavla
 yarn install
 ```
 
-## Running the application
+## Environment Configuration
+
+The project integrates with Sentry for error tracking and performance monitoring. However, Sentry is not required for running the application locally or in development mode. If you want to use Sentry, follow these steps:
+
+1. Create a `.env.local` file in the root of the project (if it doesn’t already exist).
+2. Add the following lines to your `.env.local` file:
+
+```bash
+SENTRY_DSN_URL=your-sentry-dsn-url
+SENTRY_AUTH_TOKEN=your-sentry-auth-token
+```
+
+Replace `your-sentry-dsn-url` and `your-sentry-auth-token` with the DSN provided by your Sentry project.
+
+## Running the Application
 
 To start the application in development mode, use:
 
 ```bash
 yarn dev
 # or
-yarn dev:persist #persists the local database
+yarn dev:persist # persists the local database
 ```
 
-This will start the development server at `http://localhost:3000`
+This will start the development server at `http://localhost:3000`.
diff --git a/tavla/app/error.tsx b/tavla/app/error.tsx
@@ -5,8 +5,17 @@ import { Heading3 } from '@entur/typography'
 import Image from 'next/image'
 import Link from 'next/link'
 import BeaverIllustration from 'assets/illustrations/Beaver.png'
+import { useEffect } from 'react'
+import * as Sentry from '@sentry/nextjs'
 
-export default function Error() {
+export default function Error({
+    error,
+}: {
+    error: Error & { digest?: string }
+}) {
+    useEffect(() => {
+        Sentry.captureException(error)
+    }, [error])
     return (
         <main className="container pb-10 flex flex-col items-center">
             <Heading3>Au da! Noe gikk galt!</Heading3>

diff --git a/tavla/app/global-error.tsx b/tavla/app/global-error.tsx
@@ -4,10 +4,19 @@ import { Button } from '@entur/button'
 import { Heading3 } from '@entur/typography'
 import Image from 'next/image'
 import Link from 'next/link'
-
 import BeaverIllustration from 'assets/illustrations/Beaver.png'
+import * as Sentry from '@sentry/nextjs'
+import { useEffect } from 'react'
+
+export default function Error({
+    error,
+}: {
+    error: Error & { digest?: string }
+}) {
+    useEffect(() => {
+        Sentry.captureException(error)
+    }, [error])
 
-export default function Error() {
     return (
         <html>
             <body>

diff --git a/tavla/helm/tavla/values.yaml b/tavla/helm/tavla/values.yaml
@@ -24,6 +24,12 @@ common:
                       name: slack-webhook
                       key: url
 
+            - name: SENTRY_AUTH_TOKEN
+              valueFrom:
+                  secretKeyRef:
+                      name: sentry
+                      key: auth-token
+
         probes:
             enabled: true
             spec:

diff --git a/tavla/instrumentation.ts b/tavla/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
diff --git a/tavla/next.config.js b/tavla/next.config.js
@@ -1,4 +1,5 @@
 const { PHASE_DEVELOPMENT_SERVER } = require('next/constants')
+const { withSentryConfig } = require("@sentry/nextjs");
 
 /** @type {import('next').NextConfig} */
 const nextConfig = {
@@ -36,3 +37,19 @@ module.exports = async (phase, { defaultConfig }) => {
 
     return nextConfig
 }
+
+module.exports = withSentryConfig(nextConfig, {
+    // For all available options, see:
+    // https://github.com/getsentry/sentry-webpack-plugin#options
+
+    org: "entur",
+    project: "tavla",
+    authToken: process.env.SENTRY_AUTH_TOKEN,
+    silent: !process.env.CI,
+
+    // For all available options, see:
+    // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/
+    hideSourceMaps: true,
+    disableLogger: true, 
+  }
+);
diff --git a/tavla/package.json b/tavla/package.json
@@ -36,6 +36,7 @@
         "@entur/tokens": "3.17.2",
         "@entur/tooltip": "5.1.1",
         "@entur/typography": "1.8.47",
+        "@sentry/nextjs": "^8",
         "abortcontroller-polyfill": "1.7.6",
         "classnames": "2.5.1",
         "firebase": "11.0.1",

diff --git a/tavla/pages/_error.tsx b/tavla/pages/_error.tsx
@@ -5,8 +5,16 @@ import { Heading3 } from '@entur/typography'
 import Image from 'next/image'
 import Link from 'next/link'
 import BeaverIllustration from 'assets/illustrations/Beaver.png'
+import * as Sentry from '@sentry/nextjs'
+import type { NextPageContext } from 'next'
+import Error from 'next/error'
 
-function Error() {
+Error.getInitialProps = async (contextData: NextPageContext) => {
+    await Sentry.captureUnderscoreErrorException(contextData)
+    return Error.getInitialProps(contextData)
+}
+
+function CustomError() {
     return (
         <main className="container pb-10 flex flex-col items-center">
             <Heading3>Au da! Noe gikk galt!</Heading3>
@@ -23,4 +31,4 @@ function Error() {
     )
 }
 
-export default Error
+export default CustomError
diff --git a/tavla/sentry.client.config.ts b/tavla/sentry.client.config.ts
@@ -0,0 +1,13 @@
+// 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'
+
+Sentry.init({
+    dsn: process.env.SENTRY_DSN_URL,
+
+    tracesSampleRate: 1,
+
+    enabled: process.env.NODE_ENV !== 'development',
+})
diff --git a/tavla/sentry.edge.config.ts b/tavla/sentry.edge.config.ts
@@ -0,0 +1,14 @@
+// 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.SENTRY_DSN_URL,
+
+    tracesSampleRate: 1,
+
+    enabled: process.env.NODE_ENV !== 'development',
+})
diff --git a/tavla/sentry.server.config.ts b/tavla/sentry.server.config.ts
@@ -0,0 +1,13 @@
+// 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.SENTRY_DSN_URL,
+
+    tracesSampleRate: 1,
+
+    enabled: process.env.NODE_ENV !== 'development',
+})