Add Sentry to client for error handling (#43920)

Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com>

client/gatsby-config.js

@@ -6,7 +6,8 @@ const {
   localeChallengesRootDir
 } = require('./utils/build-challenges');
 
-const { clientLocale, curriculumLocale, homeLocation } = envData;
+const { clientLocale, curriculumLocale, homeLocation, sentryClientDSN } =
+  envData;
 
 const curriculumIntroRoot = path.resolve(__dirname, './src/pages');
 const pathPrefix =
@@ -24,6 +25,12 @@ module.exports = {
   },
   pathPrefix: pathPrefix,
   plugins: [
+    {
+      resolve: '@sentry/gatsby',
+      options: {
+        dsn: sentryClientDSN
+      }
+    },
     {
       resolve: 'gatsby-plugin-webpack-bundle-analyser-v2',
       options: {

client/package.json

@@ -49,6 +49,7 @@
     "@freecodecamp/strip-comments": "3.0.1",
     "@loadable/component": "5.15.2",
     "@reach/router": "1.3.4",
+    "@sentry/gatsby": "^6.19.6",
     "@stripe/react-stripe-js": "1.7.1",
     "@stripe/stripe-js": "1.27.0",
     "@types/react-scrollable-anchor": "0.6.1",

client/src/utils/report-error.ts

@@ -1,7 +1,15 @@
-// TODO: integrate with Sentry?
+import * as Sentry from '@sentry/gatsby';
+import envData from '../../../config/env.json';
+
+const { sentryClientDSN } = envData;
+
 export function reportClientSideError(
   e: Error,
-  message = 'Unhandled error'
-): void {
-  return console.error(`Client: ${message}`, e);
+  message = sentryClientDSN === null
+    ? 'Unhandled error'
+    : 'Error sent to Sentry'
+): string | void {
+  return sentryClientDSN === null
+    ? console.error(`Client: ${message}`, e)
+    : Sentry.captureException(e);
 }