feat(sentry): capture error in Sentry when departure fetch fails

tavla/README.md

@@ -25,7 +25,7 @@ The project integrates with Sentry for error tracking and performance monitoring
 2. Add the following lines to your `.env.local` file:
 
 ```bash
-SENTRY_DSN_URL=your-sentry-dsn-url
+NEXT_PUBLIC_SENTRY_DSN_URL=your-sentry-dsn-url
 SENTRY_AUTH_TOKEN=your-sentry-auth-token
 ```
 

tavla/helm/tavla/values.yaml

@@ -30,7 +30,7 @@ common:
                       name: sentry
                       key: auth-token
 
-            - name: SENTRY_DSN_URL
+            - name: NEXT_PUBLIC_SENTRY_DSN_URL
               valueFrom:
                   secretKeyRef:
                       name: sentry

tavla/pages/[id].tsx

@@ -16,6 +16,7 @@ import { TGetQuayQuery, TStopPlaceQuery } from 'graphql/index'
 import { isUnsupportedBrowser } from 'utils/browserDetection'
 import { GetServerSideProps } from 'next'
 import { SSRQuayQuery, SSRStopPlaceQuery } from 'graphql/ssrQueries'
+import * as Sentry from '@sentry/nextjs'
 
 export const getServerSideProps: GetServerSideProps = async (context) => {
     const { params, req } = context
@@ -113,8 +114,19 @@ const getTileData = async (board: TBoard) => {
                         addMinutesToDate(new Date(), tile.offset ?? 0),
                     ),
                 }
-                const data = await fetchQuery(SSRStopPlaceQuery, variables)
-                return data
+                try {
+                    const data = await fetchQuery(SSRStopPlaceQuery, variables)
+                    return data
+                } catch (error) {
+                    Sentry.captureException(error, {
+                        extra: {
+                            message:
+                                'Server-side fetching of departures for stopPlace failed',
+                            queryVariables: variables,
+                        },
+                    })
+                    return null
+                }
             } else if (tile.type === 'quay') {
                 const variables = {
                     quayId: tile.placeId,
@@ -124,8 +136,19 @@ const getTileData = async (board: TBoard) => {
                         addMinutesToDate(new Date(), tile.offset ?? 0),
                     ),
                 }
-                const data = await fetchQuery(SSRQuayQuery, variables)
-                return data
+                try {
+                    const data = await fetchQuery(SSRQuayQuery, variables)
+                    return data
+                } catch (error) {
+                    Sentry.captureException(error, {
+                        extra: {
+                            message:
+                                'Server-side fetching of departures for quay failed',
+                            queryVariables: variables,
+                        },
+                    })
+                    return null
+                }
             } else {
                 return null
             }

tavla/sentry.client.config.ts

@@ -5,7 +5,7 @@
 import * as Sentry from '@sentry/nextjs'
 
 Sentry.init({
-    dsn: process.env.SENTRY_DSN_URL,
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN_URL,
 
     tracesSampleRate: 1,
 

tavla/sentry.edge.config.ts

@@ -6,7 +6,7 @@
 import * as Sentry from '@sentry/nextjs'
 
 Sentry.init({
-    dsn: process.env.SENTRY_DSN_URL,
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN_URL,
 
     tracesSampleRate: 1,
 

tavla/sentry.server.config.ts

@@ -5,7 +5,7 @@
 import * as Sentry from '@sentry/nextjs'
 
 Sentry.init({
-    dsn: process.env.SENTRY_DSN_URL,
+    dsn: process.env.NEXT_PUBLIC_SENTRY_DSN_URL,
 
     tracesSampleRate: 1,
 

tavla/src/Board/scenarios/QuayTile/index.tsx

@@ -11,6 +11,7 @@ import {
     FetchErrorTypes,
 } from 'Board/components/DataFetchingFailed'
 import { TTheme } from 'types/settings'
+import * as Sentry from '@sentry/nextjs'
 
 export function QuayTile({
     placeId,
@@ -42,6 +43,16 @@ export function QuayTile({
     }
 
     if (error || !data || !data.quay) {
+        if (!error) {
+            Sentry.captureException(
+                new Error('Departure fetch for quay returned no data'),
+                {
+                    extra: {
+                        quayId: placeId,
+                    },
+                },
+            )
+        }
         return (
             <Tile>
                 <DataFetchingFailed

tavla/src/Board/scenarios/StopPlaceTile/index.tsx

@@ -10,6 +10,7 @@ import {
     FetchErrorTypes,
 } from 'Board/components/DataFetchingFailed'
 import { TTheme } from 'types/settings'
+import * as Sentry from '@sentry/nextjs'
 
 export function StopPlaceTile({
     placeId,
@@ -41,6 +42,16 @@ export function StopPlaceTile({
     }
 
     if (error || !data || !data.stopPlace) {
+        if (!error) {
+            Sentry.captureException(
+                new Error('Departure fetch for stopPlace returned no data'),
+                {
+                    extra: {
+                        stopPlaceId: placeId,
+                    },
+                },
+            )
+        }
         return (
             <Tile>
                 <DataFetchingFailed

tavla/src/Shared/graphql/utils.ts

@@ -3,6 +3,7 @@ import { TypedDocumentString } from './index'
 import 'abortcontroller-polyfill/dist/polyfill-patch-fetch'
 import { formatDateToISO, addMinutesToDate } from 'utils/time'
 import { FetchErrorTypes } from 'Board/components/DataFetchingFailed'
+import * as Sentry from '@sentry/nextjs'
 
 async function fetchWithTimeout(
     url: RequestInfo | URL,
@@ -21,8 +22,21 @@ async function fetchWithTimeout(
     } catch (error) {
         clearTimeout(timeoutScheduler)
         if (signal.aborted) {
+            Sentry.captureException(new Error('Departure fetch timed out'), {
+                extra: {
+                    url: url,
+                    fetchOptions: options,
+                },
+            })
             throw new Error(FetchErrorTypes.TIMEOUT)
         }
+        Sentry.captureException(error, {
+            extra: {
+                message: 'Unknown error occured during fetch',
+                url: url,
+                fetchOptions: options,
+            },
+        })
         throw error
     }
 }