PI-1514 Enable Sentry in the browser (#46)

assets/scss/local.scss

@@ -2,7 +2,7 @@
   min-height: 600px;
 }
 
-.examples-list li {
+.examples-list > li {
   margin-top: govuk-spacing(8);
 
   code {

helm_deploy/probation-search-ui/values.yaml

@@ -38,6 +38,7 @@ generic-service:
     TOKEN_VERIFICATION_ENABLED: "true"
     APPLICATIONINSIGHTS_CONNECTION_STRING: "InstrumentationKey=$(APPINSIGHTS_INSTRUMENTATIONKEY);IngestionEndpoint=https://northeurope-0.in.applicationinsights.azure.com/;LiveEndpoint=https://northeurope.livediagnostics.monitor.azure.com/"
     SENTRY_TRACES_SAMPLE_RATE: "0.05"
+    SENTRY_REPLAY_SAMPLE_RATE: "0.05"
 
   # Pre-existing kubernetes secrets to load as environment variables in the deployment.
   # namespace_secrets:
@@ -54,6 +55,7 @@ generic-service:
       SYSTEM_CLIENT_SECRET: "SYSTEM_CLIENT_SECRET"
       SESSION_SECRET: "SESSION_SECRET"
       SENTRY_DSN: "SENTRY_DSN"
+      SENTRY_LOADER_SCRIPT_ID: "SENTRY_LOADER_SCRIPT_ID"
     elasticache-redis:
       REDIS_HOST: "primary_endpoint_address"
       REDIS_AUTH_TOKEN: "auth_token"

helm_deploy/values-dev.yaml

@@ -15,6 +15,7 @@ generic-service:
     PRISON_API_URL: "https://prison-api-dev.prison.service.justice.gov.uk"
     DELIUS_URL: "https://ndelius.test.probation.service.justice.gov.uk"
     SENTRY_TRACES_SAMPLE_RATE: "1.0"
+    SENTRY_REPLAY_SAMPLE_RATE: "1.0"
 
 generic-prometheus-alerts:
   businessHoursOnly: true

packages/probation-search-frontend/routes/search.ts

@@ -110,10 +110,11 @@ function defaultResultFormatter(
   })
 }
 
-function securityParams(res: Response): { csrfToken: string; cspNonce: string } {
+function securityParams(res: Response): { csrfToken: string; cspNonce: string; user: { username: string } } {
   return {
     csrfToken: res.locals.csrfToken,
     cspNonce: res.locals.cspNonce,
+    user: res.locals.user,
   }
 }
 

server/config.ts

@@ -51,7 +51,10 @@ export default {
   },
   sentry: {
     dsn: process.env.SENTRY_DSN,
-    tracesSampleRate: process.env.SENTRY_TRACES_SAMPLE_RATE,
+    loaderScriptId: process.env.SENTRY_LOADER_SCRIPT_ID,
+    environment: get('ENVIRONMENT', 'local', requiredInProduction),
+    tracesSampleRate: Number(get('SENTRY_TRACES_SAMPLE_RATE', 1.0)),
+    replaySampleRate: Number(get('SENTRY_REPLAY_SAMPLE_RATE', 1.0)),
   },
   delius: {
     url: get('DELIUS_URL', '*', requiredInProduction),

server/data/hmppsAuthClient.ts

@@ -33,6 +33,7 @@ function getSystemClientTokenFromHmppsAuth(username?: string): Promise<superagen
 
 export interface User {
   name: string
+  username: string
   activeCaseLoadId: string
 }
 

server/middleware/populateCurrentUser.ts

@@ -1,4 +1,5 @@
 import { RequestHandler } from 'express'
+import * as Sentry from '@sentry/node'
 import logger from '../../logger'
 import UserService from '../services/userService'
 
@@ -9,6 +10,7 @@ export default function populateCurrentUser(userService: UserService): RequestHa
         const user = res.locals.user && (await userService.getUser(res.locals.user.token))
         if (user) {
           res.locals.user = { ...user, ...res.locals.user }
+          Sentry.setUser({ username: res.locals.user.username })
         } else {
           logger.info('No user available')
         }

server/middleware/setUpWebSecurity.ts

@@ -24,7 +24,12 @@ export default function setUpWebSecurity(): Router {
           // <link href="http://example.com/" rel="stylesheet" nonce="{{ cspNonce }}">
           // This ensures only scripts we trust are loaded, and not anything injected into the
           // page by an attacker.
-          scriptSrc: ["'self'", (_req: Request, res: Response) => `'nonce-${res.locals.cspNonce}'`],
+          scriptSrc: [
+            "'self' https://*.sentry-cdn.com",
+            (_req: Request, res: Response) => `'nonce-${res.locals.cspNonce}'`,
+          ],
+          connectSrc: ["'self' https://*.sentry.io"],
+          workerSrc: ["'self' blob:"],
           styleSrc: ["'self'", (_req: Request, res: Response) => `'nonce-${res.locals.cspNonce}'`],
           fontSrc: ["'self'"],
           formAction: [`'self' ${config.apis.hmppsAuth.externalUrl}`],

server/routes/index.ts

@@ -29,6 +29,7 @@ export default function routes(service: Services): Router {
     router,
     path: '/',
     template: 'pages/index',
+    templateFields: () => ({ sentry: config.sentry }),
     environment: config.environment,
     oauthClient: service.hmppsAuthClient,
   })
@@ -47,7 +48,7 @@ export default function routes(service: Services): Router {
     router,
     path: '/delius/nationalSearch',
     template: 'pages/deliusSearch/index',
-    templateFields: () => ({ deliusUrl: config.delius.url }),
+    templateFields: () => ({ deliusUrl: config.delius.url, sentry: config.sentry }),
     resultsFormatter: async (res, req) =>
       nunjucks.render('pages/deliusSearch/results.njk', await mapResults(res, req, service.hmppsAuthClient)),
     allowEmptyQuery: true,

server/utils/sentry.ts

@@ -6,11 +6,15 @@ export default function initSentry(app: Express): void {
   if (config.sentry.dsn) {
     Sentry.init({
       dsn: config.sentry.dsn,
-      environment: config.environment,
+      environment: config.sentry.environment,
       integrations: [new Sentry.Integrations.Http({ tracing: true }), new Sentry.Integrations.Express({ app })],
-      tracesSampleRate: config.sentry.tracesSampleRate ? +config.sentry.tracesSampleRate : 1.0,
+      tracesSampleRate: config.sentry.tracesSampleRate,
     })
     app.use(Sentry.Handlers.requestHandler())
     app.use(Sentry.Handlers.tracingHandler())
+    app.use((req, res, next) => {
+      res.locals.sentry = config.sentry
+      return next()
+    })
   }
 }

server/views/pages/deliusSearch/index.njk

@@ -59,6 +59,7 @@
     <script src="/assets/govuk/all.js"></script>
     <script src="/assets/govukFrontendInit.js"></script>
     <script src="/assets/moj/all.js"></script>
+    {% include "../../partials/sentry.njk" %}
     <script nonce="{{ cspNonce }}">
       function debounce(func, wait) {
         let timeoutId;

server/views/partials/layout.njk

@@ -26,4 +26,5 @@
   <script src="/assets/govuk/all.js"></script>
   <script src="/assets/govukFrontendInit.js"></script>
   <script src="/assets/moj/all.js"></script>
+  {% include "./sentry.njk" %}
 {% endblock %}

server/views/partials/sentry.njk

@@ -0,0 +1,19 @@
+{% if sentry and sentry.loaderScriptId %}
+  <script src="https://js.sentry-cdn.com/{{ sentry.loaderScriptId }}.min.js" nonce="{{ cspNonce }}" crossorigin="anonymous"></script>
+  <script nonce="{{ cspNonce }}">
+    Sentry.onLoad(function() {
+      Sentry.init({
+        dsn: "{{ sentry.dsn }}",
+        release: "probation-search-ui@{{ version }}",
+        environment: "{{ sentry.environment }}",
+        integrations: [new Sentry.BrowserTracing(), new Sentry.Replay()],
+        tracesSampleRate: {{ sentry.tracesSampleRate }},
+        replaysSessionSampleRate: {{ sentry.replaySampleRate }},
+        replaysOnErrorSampleRate: 1.0, // Capture replays for any sessions with an error
+        initialScope: {
+          user: { username: "{{ user.username }}" },
+        },
+      });
+    });
+  </script>
+{% endif %}