Set up sentry hook

.github/workflows/deployment.yml

@@ -124,7 +124,7 @@ jobs:
         shell: bash
         run: |
           oc login "${{ secrets.OPENSHIFT_CLUSTER }}" --token="${{ secrets.OC4_DEV_TOKEN }}"
-          MODULE_NAME=api SECOND_LEVEL_DOMAIN="apps.silver.devops.gov.bc.ca" VANITY_DOMAIN="${SUFFIX}-dev-psu.apps.silver.devops.gov.bc.ca" USE_WFWX="True" bash openshift/scripts/oc_deploy.sh ${SUFFIX} apply
+          MODULE_NAME=api SECOND_LEVEL_DOMAIN="apps.silver.devops.gov.bc.ca" VANITY_DOMAIN="${SUFFIX}-dev-psu.apps.silver.devops.gov.bc.ca" USE_WFWX="True" ENVIRONMENT="development" bash openshift/scripts/oc_deploy.sh ${SUFFIX} apply
 
       ## TODO: re-enable once crunchy is deployed: https://app.zenhub.com/workspaces/bcws---agile-psu-5e321393e038fba5bbe203b8/issues/gh/bcgov/wps/2340
       - name: Hourly actuals cronjob

api/app/.env.example

@@ -58,4 +58,5 @@ OBJECT_STORE_SERVER=object_store_server
 OBJECT_STORE_USER_ID=object_store_user
 OBJECT_STORE_SECRET=object_store_secret
 OBJECT_STORE_BUCKET=object_store_bucket
-DEM_NAME=dem_mosaic_250_max.tif
+DEM_NAME=dem_mosaic_250_max.tif
+SENTRY_DSN=some_dsn

api/app/main.py

@@ -7,6 +7,7 @@
 from urllib.request import Request
 from fastapi import FastAPI, Depends, Response
 from fastapi.middleware.cors import CORSMiddleware
+import sentry_sdk
 from starlette.applications import Starlette
 from app import schemas, configure_logging
 from app.percentile import get_precalculated_percentiles
@@ -59,6 +60,17 @@
     programs or information, even if the Government of British Columbia
     has been specifically advised of the possibility of such damages.'''
 
+sentry_sdk.init(
+    dsn=config.get("SENTRY_DSN"),
+    environment=config.get('ENVIRONMENT'),
+    # Set traces_sample_rate to 1.0 to capture 100%
+    # of transactions for performance monitoring.
+    traces_sample_rate=1.0,
+    # Set profiles_sample_rate to 1.0 to profile 100%
+    # of sampled transactions.
+    # We recommend adjusting this value in production.
+    profiles_sample_rate=1.0,
+)
 
 # This is the api app.
 api = FastAPI(

api/pyproject.toml

@@ -43,6 +43,7 @@ scikit-learn = "^1.1.3"
 httpx = "^0.27.0"
 orjson = "^3.9.0"
 greenlet = "^3.0.0"
+sentry-sdk = {extras = ["fastapi"], version = "^2.0.1"}
 
 [tool.poetry.group.dev.dependencies]
 pytest = "^7.2.1"

openshift/scripts/oc_deploy_to_production.sh

@@ -43,7 +43,7 @@ PROJ_TARGET=${PROJ_TARGET} BUCKET=lwzrin CPU_REQUEST=75m CPU_LIMIT=2000m MEMORY_
 echo Provision NATS
 PROJ_TARGET=${PROJ_TARGET} bash $(dirname ${0})/oc_provision_nats.sh prod ${RUN_TYPE}
 echo Deploy API
-MODULE_NAME=api GUNICORN_WORKERS=8 CPU_REQUEST=100m CPU_LIMIT=500m MEMORY_REQUEST=3Gi MEMORY_LIMIT=6Gi REPLICAS=3 PROJ_TARGET=${PROJ_TARGET} VANITY_DOMAIN=psu.nrs.gov.bc.ca SECOND_LEVEL_DOMAIN=apps.silver.devops.gov.bc.ca USE_WFWX="True" bash $(dirname ${0})/oc_deploy.sh prod ${RUN_TYPE}
+MODULE_NAME=api GUNICORN_WORKERS=8 CPU_REQUEST=100m CPU_LIMIT=500m MEMORY_REQUEST=3Gi MEMORY_LIMIT=6Gi REPLICAS=3 PROJ_TARGET=${PROJ_TARGET} VANITY_DOMAIN=psu.nrs.gov.bc.ca SECOND_LEVEL_DOMAIN=apps.silver.devops.gov.bc.ca USE_WFWX="True" ENVIRONMENT="production" bash $(dirname ${0})/oc_deploy.sh prod ${RUN_TYPE}
 echo Env Canada Subscriber
 PROJ_TARGET=${PROJ_TARGET} bash $(dirname ${0})/oc_provision_ec_gdps_cronjob.sh prod ${RUN_TYPE}
 PROJ_TARGET=${PROJ_TARGET} bash $(dirname ${0})/oc_provision_ec_hrdps_cronjob.sh prod ${RUN_TYPE} 

openshift/templates/deploy.dc.yaml

@@ -67,7 +67,7 @@ parameters:
     required: True
     value: apps.silver.devops.gov.bc.ca
   - name: ENVIRONMENT
-    description: Can be used to modify route (e.g. when deploying to test)
+    description: Used for specifying which environment sentry is running in
     value: ""
   - name: USE_WFWX
     value: "False"
@@ -377,6 +377,11 @@ objects:
                     secretKeyRef:
                       name: ${GLOBAL_NAME}
                       key: sfms-secret
+                - name: SENTRY_DSN
+                  valueFrom:
+                    secretKeyRef:
+                      name: ${GLOBAL_NAME}
+                      key: sentry-dsn
                 - name: NATS_STREAM_PREFIX
                   value: ${APP_NAME}-${SUFFIX}
                 - name: NATS_SERVER
@@ -460,7 +465,7 @@ objects:
         haproxy.router.openshift.io/balance: roundrobin
         haproxy.router.openshift.io/disable_cookies: "true"
     spec:
-      host: ${APP_NAME}-${SUFFIX}${ENVIRONMENT}.${SECOND_LEVEL_DOMAIN}
+      host: ${APP_NAME}-${SUFFIX}.${SECOND_LEVEL_DOMAIN}
       path: "/api"
       port:
         targetPort: 8080-tcp
@@ -485,7 +490,7 @@ objects:
         haproxy.router.openshift.io/balance: roundrobin
         haproxy.router.openshift.io/disable_cookies: "true"
     spec:
-      host: ${APP_NAME}-${SUFFIX}${ENVIRONMENT}.${SECOND_LEVEL_DOMAIN}
+      host: ${APP_NAME}-${SUFFIX}.${SECOND_LEVEL_DOMAIN}
       port:
         targetPort: 3000-tcp
       to:

web/.env.example

@@ -9,3 +9,5 @@ REACT_APP_WF1_AUTH_URL=https://wf1/auth
 REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL=http://localhost:3000
 REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL=http://localhost:3000
 REACT_APP_PMTILES_BUCKET=https://My_S3_Bucket
+REACT_APP_SENTRY_DSN=123
+REACT_APP_SENTRY_ENV=development

web/package.json

@@ -20,6 +20,7 @@
     "@mui/x-data-grid-pro": "^6.0.0",
     "@mui/x-date-pickers": "^7.0.0",
     "@reduxjs/toolkit": "^1.8.0",
+    "@sentry/react": "^7.112.1",
     "@types/esri-leaflet": "^3.0.0",
     "@types/leaflet": "^1.7.0",
     "@types/lodash": "^4.14.173",

web/src/components/FeedbackButton.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { Button } from '@mui/material'
+import CampaignIcon from '@mui/icons-material/Campaign'
+import { feedbackIntegration } from '@sentry/react'
+
+const FeedbackButton = ({ color }: { color: 'primary' | 'inherit' }) => {
+  const feedback = feedbackIntegration({ colorScheme: 'system' })
+
+  if (!feedback) {
+    return null
+  }
+
+  return (
+    <Button startIcon={<CampaignIcon />} variant={'contained'} color={color} onClick={() => feedback.openDialog()}>
+      Submit Feedback
+    </Button>
+  )
+}
+
+export default React.memo(FeedbackButton)

web/src/index.tsx

@@ -2,12 +2,27 @@ import React from 'react'
 import * as ReactDOMClient from 'react-dom/client'
 import { Provider } from 'react-redux'
 import App from 'app/App'
+import { SENTRY_DSN, SENTRY_ENV, API_BASE_URL } from 'utils/env'
 
 import 'index.css'
 import store from 'app/store'
 import * as serviceWorker from 'serviceWorker'
+import * as Sentry from '@sentry/react'
 
 const render = () => {
+  Sentry.init({
+    dsn: SENTRY_DSN,
+    environment: SENTRY_ENV,
+    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+    // Performance Monitoring
+    tracesSampleRate: 1.0, //  Capture 100% of the transactions
+    // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+    tracePropagationTargets: [API_BASE_URL],
+    // Session Replay
+    replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+    replaysOnErrorSampleRate: 1.0 // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  })
+
   // eslint-disable-next-line @typescript-eslint/no-var-requires
   const container = document.getElementById('root')
   // Null check to keep TypeScript happy

web/src/types/window.d.ts

@@ -12,6 +12,8 @@ interface Window {
     REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL: string
     REACT_APP_PMTILES_BUCKET: string
     REACT_APP_MUI_LICENSE_KEY: string
+    REACT_APP_SENTRY_DSN: string
+    REACT_APP_SENTRY_ENV: string
   }
   Cypress: {} | undefined
 }

web/src/utils/env.ts

@@ -11,7 +11,9 @@ let ENV = {
   MS_TEAMS_SPRINT_REVIEW_URL: process.env.REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL as string,
   MIRO_SPRINT_REVIEW_BOARD_URL: process.env.REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL as string,
   PMTILES_BUCKET: process.env.REACT_APP_PMTILES_BUCKET as string,
-  MUI_LICENSE: process.env.REACT_APP_MUI_LICENSE_KEY as string
+  MUI_LICENSE: process.env.REACT_APP_MUI_LICENSE_KEY as string,
+  SENTRY_DSN: process.env.REACT_APP_SENTRY_DSN as string,
+  SENTRY_ENV: process.env.REACT_APP_SENTRY_ENV as string
 }
 
 // If the app is built using 'npm run build'
@@ -31,7 +33,9 @@ if (process.env.NODE_ENV === 'production') {
     MS_TEAMS_SPRINT_REVIEW_URL: window.env.REACT_APP_MS_TEAMS_SPRINT_REVIEW_URL,
     MIRO_SPRINT_REVIEW_BOARD_URL: window.env.REACT_APP_MIRO_SPRINT_REVIEW_BOARD_URL,
     PMTILES_BUCKET: window.env.REACT_APP_PMTILES_BUCKET,
-    MUI_LICENSE: window.env.REACT_APP_MUI_LICENSE_KEY
+    MUI_LICENSE: window.env.REACT_APP_MUI_LICENSE_KEY,
+    SENTRY_DSN: window.env.REACT_APP_SENTRY_DSN,
+    SENTRY_ENV: window.env.REACT_APP_SENTRY_ENV
   }
 }
 
@@ -48,5 +52,7 @@ export const {
   MIRO_SPRINT_REVIEW_BOARD_URL,
   WF1_AUTH_URL,
   PMTILES_BUCKET,
-  MUI_LICENSE
+  MUI_LICENSE,
+  SENTRY_DSN,
+  SENTRY_ENV
 } = ENV