Set up Sentry to capture and output front end error messages

.env.example

@@ -3,4 +3,6 @@ REACT_APP_AUTHENTICATION_URL='http://localhost:9000'
 REACT_APP_LOGIN_ENABLED='true'
 REACT_APP_API_ENDPOINT='http://localhost:3009'
 REACT_APP_GOOGLE_TAG_MANAGER_ID=''
+REACT_APP_SENTRY_DSN=''
+REACT_APP_SENTRY_ENV='local'
 PUBLIC_URL='http://localhost:3000'

.env.webcomponent.example

@@ -1,2 +1,4 @@
 # NB This is the URL of react-ui, rather than the web component
+REACT_APP_SENTRY_DSN=''
+REACT_APP_SENTRY_ENV='local'
 PUBLIC_URL=http://localhost:3000

.github/workflows/ci-cd.yml

@@ -100,13 +100,16 @@ jobs:
       react_app_api_endpoint: https://editor-api.raspberrypi.org
       react_app_authentication_url: https://auth-v1.raspberrypi.org
       react_app_google_tag_manager_id: GTM-5FWFWFJ
+      react_app_sentry_dsn: https://a6d7b79c7a474a6499ace73acf792a83@o17504.ingest.sentry.io/4504055099621376
+      react_app_sentry_env: production
     secrets: inherit
 
   deploy-main:
     if: github.ref_type == 'branch' && github.ref_name == 'main'
     uses: ./.github/workflows/deploy.yml
     with:
       environment: staging
+      react_app_sentry_env: staging
     secrets: inherit
 
   deploy-branch:

.github/workflows/deploy.yml

@@ -38,6 +38,14 @@ on:
         required: false
         default: "true"
         type: string
+      react_app_sentry_dsn:
+        required: false
+        default: 'https://a6d7b79c7a474a6499ace73acf792a83@o17504.ingest.sentry.io/4504055099621376'
+        type: string
+      react_app_sentry_env:
+        required: false
+        default: 'review'
+        type: string
     secrets:
       AWS_ACCESS_KEY_ID:
         required: true
@@ -102,6 +110,8 @@ jobs:
         REACT_APP_COOKIEBOT_DOMAIN_GROUP_ID: ${{ inputs.react_app_cookiebot_domain_group_id }}
         REACT_APP_GOOGLE_TAG_MANAGER_ID: ${{ inputs.react_app_google_tag_manager_id }}
         REACT_APP_LOGIN_ENABLED: ${{ inputs.react_app_login_enabled }}
+        REACT_APP_SENTRY_DSN: ${{ inputs.react_app_sentry_dsn }}
+        REACT_APP_SENTRY_ENV: ${{ inputs.react_app_sentry_env }}
 
     - name: Deploy site to S3 bucket
       run: aws s3 sync  ./build/ s3://${{ secrets.AWS_S3_BUCKET }}/${{ needs.setup-environment.outputs.deploy_dir }} --delete --endpoint ${{ secrets.AWS_ENDPOINT }}

CHANGELOG.md

@@ -9,6 +9,7 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 
 - Copyright and contributing documentation (#207)
 - Errors when running code now include the name of the file in which the error occurred (#239)
+- Sentry integration (#252)
 
 ### Changed
 

package.json

@@ -22,6 +22,9 @@
     "@reduxjs/toolkit": "^1.6.2",
     "@replit/codemirror-indentation-markers": "^6.1.0",
     "@rpf/sauce": "https://github.com/RaspberryPiFoundation/sauce-design-system.git#next",
+    "@sentry/browser": "^7.17.3",
+    "@sentry/react": "7.16.0",
+    "@sentry/tracing": "7.16.0",
     "axios": "^0.24.0",
     "codemirror": "^6.0.1",
     "fs-extra": "^9.0.1",

src/components/Editor/Runners/PythonRunner/PythonRunner.js

@@ -1,6 +1,7 @@
 /* eslint-disable react-hooks/exhaustive-deps */
 import './PythonRunner.scss';
 import React, { useEffect, useRef, useState } from 'react';
+import * as Sentry from "@sentry/browser";
 import { useSelector, useDispatch } from 'react-redux'
 import { Tab, Tabs, TabList, TabPanel } from 'react-tabs';
 import Sk from "skulpt"
@@ -257,6 +258,13 @@ const PythonRunner = () => {
           }
         },
     ).catch(err => {
+
+      if (err.message !== 'Execution interrupted') {
+        const errorType = err.tp$name || err.constructor.name
+        const errorDetails = (err.tp$str && err.tp$str().v) || err.message
+        Sentry.captureMessage(`${errorType}: ${errorDetails}`)
+      }
+
       const message = err.message || 
         `${err.toString()} of ${err.traceback[0].filename === "<stdin>.py" ? "main.py" : err.traceback[0].filename.slice(2)}`;
       dispatch(setError(message));

src/index.js

@@ -1,5 +1,7 @@
 import React from 'react';
 import { createRoot } from 'react-dom/client';
+import * as Sentry from '@sentry/react'
+import { BrowserTracing } from '@sentry/tracing';
 import './index.css';
 import App from './App';
 
@@ -9,6 +11,18 @@ import store from './app/store'
 import userManager from './utils/userManager'
 import { CookiesProvider } from 'react-cookie';
 
+Sentry.init({
+  dsn: process.env.REACT_APP_SENTRY_DSN,
+  integrations: [new BrowserTracing()],
+  debug: true,
+  environment: process.env.REACT_APP_SENTRY_ENV,
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+})
+
 const div = document.getElementById('root')
 const root = createRoot(div)
 root.render(

src/web-component.js

@@ -1,10 +1,23 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import * as ReactDOMClient from 'react-dom/client';
+import * as Sentry from '@sentry/react'
+import { BrowserTracing } from '@sentry/tracing';
 import WebComponentLoader from './components/WebComponent/WebComponentLoader/WebComponentLoader';
 import store from './app/store'
 import { Provider } from 'react-redux'
 
+Sentry.init({
+  dsn: process.env.REACT_APP_SENTRY_DSN,
+  integrations: [new BrowserTracing()],
+  environment: process.env.REACT_APP_SENTRY_ENV,
+
+  // Set tracesSampleRate to 1.0 to capture 100%
+  // of transactions for performance monitoring.
+  // We recommend adjusting this value in production
+  tracesSampleRate: 1.0,
+})
+
 class WebComponent extends HTMLElement {
   root;
   mountPoint;

yarn.lock

@@ -2471,6 +2471,91 @@
     stylelint-order "4.1.0"
     stylelint-scss "3.19.0"
 
+"@sentry/browser@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.16.0.tgz#afd2bac91857d2359272a0d9d2b1ee5ca7d69828"
+  integrity sha512-tJ063zvoF8Raw7mzQEXupOFPSN6v36WIbsDVGeFdToPCwViaBuATaxvWCrudGzsnBkMyItmTLJkzn9SEIXUOiw==
+  dependencies:
+    "@sentry/core" "7.16.0"
+    "@sentry/types" "7.16.0"
+    "@sentry/utils" "7.16.0"
+    tslib "^1.9.3"
+
+"@sentry/browser@^7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.17.3.tgz#4e67b2d8d90df11b37f29061fec3259eedca0a4a"
+  integrity sha512-Oi7ZNMzCbUXaWwkFcwXIWhfNiTy8s0EukoaKzwSdIhU5pLH9HFizXMl/qrBdxC6keTtckTwS9c+w2xDnqln1fg==
+  dependencies:
+    "@sentry/core" "7.17.3"
+    "@sentry/types" "7.17.3"
+    "@sentry/utils" "7.17.3"
+    tslib "^1.9.3"
+
+"@sentry/core@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.16.0.tgz#60f9b54ef2ec524176b329e1d15be39c36da5953"
+  integrity sha512-vq6H1b/IPTvzDD9coQ3wIudvSjkAYuUlXb1dv69dRlq4v3st9dcKBps1Zf0lQ1i4TVlDLoe1iGMmNFglMF1Q5w==
+  dependencies:
+    "@sentry/types" "7.16.0"
+    "@sentry/utils" "7.16.0"
+    tslib "^1.9.3"
+
+"@sentry/core@7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.17.3.tgz#2b45c0507f1ef7018335b9bb61ed6b3f16accfad"
+  integrity sha512-PSboa9aOVnvZU+C6/shKlHUA7zjAl6z5BKRHF8mEljEYql6bh0HfJJKXtBHMz1sWnmzMa/qABSKLpnP5ZQlJNw==
+  dependencies:
+    "@sentry/types" "7.17.3"
+    "@sentry/utils" "7.17.3"
+    tslib "^1.9.3"
+
+"@sentry/react@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.16.0.tgz#7b214736804b7516ba66230301bc6f0202060a91"
+  integrity sha512-tJH5zO4MPopzqZgi7Yd4iIB9Am5uGVefgkHaoeCGXffveEVWqEdjj8TqPL36SBb76gCmtpa01NBDsUSDZ1w/yw==
+  dependencies:
+    "@sentry/browser" "7.16.0"
+    "@sentry/types" "7.16.0"
+    "@sentry/utils" "7.16.0"
+    hoist-non-react-statics "^3.3.2"
+    tslib "^1.9.3"
+
+"@sentry/tracing@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@sentry/tracing/-/tracing-7.16.0.tgz#823b84abf0df08ecd16669547b4281e3c7a96ac9"
+  integrity sha512-8a9bViUY7oS35msBMouxkgz5OGd9NGutuKF7SQ8hPZwTcQPOxOwPyHccykgr56k6OmaDjGCLZMqZowaysJj+4g==
+  dependencies:
+    "@sentry/core" "7.16.0"
+    "@sentry/types" "7.16.0"
+    "@sentry/utils" "7.16.0"
+    tslib "^1.9.3"
+
+"@sentry/types@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.16.0.tgz#79c06ada153a84feb949fa49b1c9d15f91decd79"
+  integrity sha512-i6D+OK6d0l/k+VQvRp/Pt21WkDEgVBUIZq+sOkEZJczbcfexVdXKeXXoYTD2vYuFq8Yy28fzlsZaKI+NoH94yQ==
+
+"@sentry/types@7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.17.3.tgz#ec66ea7b6881ae243255546680722488e7ff23bf"
+  integrity sha512-+buEJo/4TKErjwF8Tq3XXKFZx4Utpvqs52e7i7Sur2qfyBNwRgBILceQvdnzw86JNZT2myeYmrfVbsaxAk7ilA==
+
+"@sentry/utils@7.16.0":
+  version "7.16.0"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.16.0.tgz#b832520c661d4435808969ee04814ff8e20497b1"
+  integrity sha512-3Zh1txg7IRp4kZAdG27YF7K6lD1IZyuAo9KjoPg1Xzqa4DOZyASJuEkbf+rK2a9T4HrtVHHXJUsNbKg8WM3VHg==
+  dependencies:
+    "@sentry/types" "7.16.0"
+    tslib "^1.9.3"
+
+"@sentry/utils@7.17.3":
+  version "7.17.3"
+  resolved "https://registry.yarnpkg.com/@sentry/utils/-/utils-7.17.3.tgz#aafa67ed372f00be2e1bb490fa62d9d2d06a4c2f"
+  integrity sha512-Sd7BwVn6IClvaXbZaj/LnEcrMm8yjQtZkTVSrM2Vlv1lLeaH61JxSAFU6QntF+f/cCfZ7wSdNhWOfW3qZJ7t3Q==
+  dependencies:
+    "@sentry/types" "7.17.3"
+    tslib "^1.9.3"
+
 "@sinclair/typebox@^0.24.1":
   version "0.24.44"
   resolved "https://registry.yarnpkg.com/@sinclair/typebox/-/typebox-0.24.44.tgz#0a0aa3bf4a155a678418527342a3ee84bd8caa5c"
@@ -17230,7 +17315,7 @@ tsconfig-paths@^3.14.1, tsconfig-paths@^3.9.0:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
-tslib@^1.8.1, tslib@^1.9.0:
+tslib@^1.8.1, tslib@^1.9.0, tslib@^1.9.3:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"
   integrity sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg==