feat: add @sentry/nextjs support

.gitignore

@@ -6,3 +6,5 @@ log/
 app/cypress/screenshots
 app/cypress/support/authenticatedPages.json
 helm/**/charts
+app/.env.local
+app/sentry.properties

app/lib/error-boundary.tsx

@@ -1,55 +1,31 @@
-import React, {Component} from 'react';
+import React from 'react';
 import {DefaultLayoutComponent} from 'layouts/default-layout';
 import {Alert} from 'react-bootstrap';
 import getConfig from 'next/config';
+import * as Sentry from '@sentry/react';
 
-class ErrorBoundary extends Component {
-  state = {hasError: false, error: null, errorInfo: null};
+const ErrorBoundary: React.FunctionComponent = ({children}) => {
+  const supportEmail = getConfig()?.publicRuntimeConfig.SUPPORT_EMAIL;
+  const mailtoLink = `mailto:${supportEmail}?subject=Support Request: CIIP Website Server Error`;
 
-  static getDerivedStateFromError(error) {
-    // Update state so the next render will show the fallback UI.
-    console.error(error);
-    return {hasError: true};
-  }
-
-  componentDidCatch(error, errorInfo) {
-    // You can also log the error to an error reporting service
-    // logErrorToMyService(error, errorInfo);
-    this.setState({error, errorInfo});
-    console.error(error, errorInfo);
-  }
-
-  render() {
-    if (this.state.hasError) {
-      const supportEmail = getConfig()?.publicRuntimeConfig.SUPPORT_EMAIL;
-      const mailtoLink = `mailto:${supportEmail}?subject=Support Request: CIIP Website Server Error`;
-      // You can render any custom fallback UI
-      return (
+  return (
+    <Sentry.ErrorBoundary
+      fallback={
         <DefaultLayoutComponent session={null}>
           <Alert variant="danger">
-            <Alert.Heading>An unexpected error has occured</Alert.Heading>
+            <Alert.Heading>Something went wrong</Alert.Heading>
             <p>
-              Please consider reporting this error to our development team at{' '}
-              <Alert.Link href={mailtoLink}>{supportEmail}</Alert.Link>. Copying
-              the error details below when submitting a bug report will help us
-              understand what happened.
+              Our development team was automatically notified. If you continue
+              to encounter this problem, consider contacting us at{' '}
+              <Alert.Link href={mailtoLink}>{supportEmail}</Alert.Link>.
             </p>
           </Alert>
-
-          <h3>Error details</h3>
-          <pre>
-            <code>
-              {this.state.error?.toString()}
-              {process.env.NODE_ENV !== 'production' &&
-                this.state.errorInfo?.componentStack}
-            </code>
-          </pre>
         </DefaultLayoutComponent>
-      );
-    }
-
-    return this.props.children;
-  }
-}
+      }
+    >
+      {children}
+    </Sentry.ErrorBoundary>
+  );
+};
 
 export default ErrorBoundary;

app/next.config.js

@@ -1,30 +1,37 @@
 const path = require('path');
 const Dotenv = require('dotenv-webpack');
+const {withSentryConfig} = require('@sentry/nextjs');
 const dotenv = require('dotenv');
 dotenv.config();
 
-module.exports = {
-  cssModules: true,
-  webpack: (config) => {
-    config.plugins = config.plugins || [];
+module.exports = withSentryConfig(
+  {
+    cssModules: true,
+    webpack: (config) => {
+      config.plugins = config.plugins || [];
 
-    config.plugins = [
-      ...config.plugins,
+      config.plugins = [
+        ...config.plugins,
+        // Read the .env file
+        new Dotenv({
+          path: path.join(__dirname, '.env'),
+          systemvars: true
+        })
+      ];
 
-      // Read the .env file
-      new Dotenv({
-        path: path.join(__dirname, '.env'),
-        systemvars: true
-      })
-    ];
-
-    return config;
+      return config;
+    },
+    publicRuntimeConfig: {
+      ADMIN_EMAIL: process.env.ADMIN_EMAIL,
+      SUPPORT_EMAIL: process.env.SUPPORT_EMAIL,
+      ENABLE_ANALYTICS: process.env.ENABLE_ANALYTICS,
+      SITEWIDE_NOTICE: process.env.SITEWIDE_NOTICE,
+      ENABLE_DB_MOCKS: process.env.ENABLE_DB_MOCKS
+    }
   },
-  publicRuntimeConfig: {
-    ADMIN_EMAIL: process.env.ADMIN_EMAIL,
-    SUPPORT_EMAIL: process.env.SUPPORT_EMAIL,
-    ENABLE_ANALYTICS: process.env.ENABLE_ANALYTICS,
-    SITEWIDE_NOTICE: process.env.SITEWIDE_NOTICE,
-    ENABLE_DB_MOCKS: process.env.ENABLE_DB_MOCKS
+  {
+    // set to false to create a sentry release and upload sourcemaps
+    dryRun: true,
+    silent: true
   }
-};
+);

app/package.json

@@ -35,6 +35,8 @@
     "@fortawesome/react-fontawesome": "^0.1.11",
     "@graphile-contrib/pg-many-to-many": "^1.0.0",
     "@rjsf/core": "^2.5.1",
+    "@sentry/nextjs": "^6.5.1",
+    "@sentry/react": "^6.5.1",
     "body-parser": "^1.19.0",
     "bowser": "^2.11.0",
     "connect-pg-simple": "^6.2.1",

app/pages/index.tsx

@@ -46,7 +46,6 @@ export default class Index extends Component<Props> {
   render() {
     const {query} = this.props;
     const {session} = query || {};
-
     return (
       <DefaultLayout showSubheader={false} session={session}>
         <div className="row">

app/sentry.client.config.js

@@ -0,0 +1,13 @@
+// This file configures the initialization of Sentry on the browser.
+// The config you add here will be used whenever a page is visited.
+// https://docs.sentry.io/platforms/javascript/guides/nextjs/
+
+import * as Sentry from '@sentry/nextjs';
+
+const SENTRY_DSN = process.env.SENTRY_ENVIRONMENT
+  ? 'https://0c7b819c89924f4abe36297bf7cbc7cb@o646776.ingest.sentry.io/5797775'
+  : null;
+
+Sentry.init({
+  dsn: SENTRY_DSN
+});

app/sentry.server.config.js

@@ -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';
+
+const SENTRY_DSN = process.env.SENTRY_ENVIRONMENT
+  ? 'https://0c7b819c89924f4abe36297bf7cbc7cb@o646776.ingest.sentry.io/5797775'
+  : null;
+
+Sentry.init({
+  dsn: SENTRY_DSN
+});