OpenConceptLab/ocl_issues#923 | errbit client setup

OpenConceptLab · Oct 21, 2021 · a2ec1e4 · a2ec1e4
1 parent cd07f78
commit a2ec1e4
Show file tree

Hide file tree

Showing 7 changed files with 143 additions and 27 deletions.
diff --git a/Dockerfile b/Dockerfile
@@ -8,6 +8,8 @@ ENV WEB_PORT=${WEB_PORT:-4000}
 ENV API_URL=${API_URL:-http://127.0.0.1:8000}
 ENV RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY:-6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI}
 ENV GA_ACCOUNT_ID=${GA_ACCOUNT_ID:-UA-000000-01}
+ENV ERRBIT_URL=${ERRBIT_URL}
+ENV ERRBIT_KEY=${ERRBIT_KEY}
 RUN mkdir /app
 WORKDIR /app
 ENV PATH /app/node_modules/.bin:$PATH

diff --git a/docker-compose.yml b/docker-compose.yml
@@ -16,3 +16,5 @@ services:
       - WEB_PORT=4000
       - RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY-6LeIxAcTAAAAAJcZVRqyHh71UMIEGNQ_MXjiZKhI}
       - GA_ACCOUNT_ID=${GA_ACCOUNT_ID-UA-000000-01}
+      - ERRBIT_URL
+      - ERRBIT_KEY
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -5,6 +5,7 @@
   "main": "index.js",
   "homepage": ".",
   "dependencies": {
+    "@airbrake/browser": "^2.1.7",
     "@emotion/react": "^11.4.1",
     "@emotion/styled": "^11.3.0",
     "@mui/icons-material": "^5.0.3",
@@ -36,8 +37,8 @@
     "remark-gfm": "^1.0.0"
   },
   "scripts": {
-    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --host 0.0.0.0 --port ${WEB_PORT} --env.API_URL=${API_URL} --env.NODE_ENV=${NODE_ENV} --env.RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY} --env.GA_ACCOUNT_ID=${GA_ACCOUNT_ID} --mode ${NODE_ENV} --hot",
-    "build": "./node_modules/webpack/bin/webpack.js --progress --host 0.0.0.0 --port 443 --env.API_URL=${API_URL} --env.NODE_ENV=${NODE_ENV} --env.RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY} --env.GA_ACCOUNT_ID=${GA_ACCOUNT_ID} --mode ${NODE_ENV}",
+    "start": "./node_modules/webpack-dev-server/bin/webpack-dev-server.js --progress --host 0.0.0.0 --port ${WEB_PORT} --env.API_URL=${API_URL} --env.NODE_ENV=${NODE_ENV} --env.RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY} --env.GA_ACCOUNT_ID=${GA_ACCOUNT_ID} --env.ERRBIT_URL=${ERRBIT_URL} --env.ERRBIT_KEY=${ERRBIT_KEY} --mode ${NODE_ENV} --hot",
+    "build": "./node_modules/webpack/bin/webpack.js --progress --host 0.0.0.0 --port 443 --env.API_URL=${API_URL} --env.NODE_ENV=${NODE_ENV} --env.RECAPTCHA_SITE_KEY=${RECAPTCHA_SITE_KEY} --env.GA_ACCOUNT_ID=${GA_ACCOUNT_ID} --env.ERRBIT_URL=${ERRBIT_URL} --env.ERRBIT_KEY=${ERRBIT_KEY} --mode ${NODE_ENV}",
     "eslint": "./node_modules/.bin/eslint ./src"
   },
   "devDependencies": {
@@ -49,7 +50,7 @@
     "@babel/preset-react": "^7.14.5",
     "@babel/runtime": "7.0.0-beta.42",
     "babel-eslint": "^10.1.0",
-    "babel-loader": "^8.2.2",
+    "babel-loader": "^8.2.3",
     "copy-webpack-plugin": "^4.6.0",
     "cross-fetch": "^3.1.4",
     "css-loader": "^0.28.8",
@@ -68,7 +69,7 @@
     "react-is": "^16.13.1",
     "sass-loader": "^6.0.6",
     "style-loader": "^0.19.1",
-    "webpack": "^5.58.2",
+    "webpack": "^5.59.1",
     "webpack-cli": "^3.3.12",
     "webpack-dev-server": "^3.11.2"
   }

diff --git a/src/components/common/ErrorBoundary.jsx b/src/components/common/ErrorBoundary.jsx
@@ -1,5 +1,8 @@
+/*eslint no-process-env: 0*/
 import React from 'react';
 import ErrorUI from './ErrorUI';
+import { getCurrentUser, getEnv } from '../../common/utils';
+import { Notifier } from '@airbrake/browser';
 
 class ErrorBoundary extends React.Component {
   constructor(props) {
@@ -11,8 +14,34 @@ class ErrorBoundary extends React.Component {
     };
   }
 
+  getNotifier = () => {
+    /*eslint no-undef: 0*/
+    this.ERRBIT_KEY = window.ERRBIT_KEY || process.env.ERRBIT_KEY
+    /*eslint no-undef: 0*/
+    this.ERRBIT_URL = window.ERRBIT_URL || process.env.ERRBIT_URL
+    if(this.ERRBIT_URL && this.ERRBIT_KEY)
+      return new Notifier({
+        projectId: 1,
+        projectKey: this.ERRBIT_KEY,
+        environment: getEnv(),
+        host: this.ERRBIT_URL
+      })
+  }
+
   componentDidCatch(error, errorInfo) {
-    this.setState({error: error, errorInfo: errorInfo, hasError: Boolean(error)})
+    this.setState({error: error, errorInfo: errorInfo, hasError: Boolean(error)}, () => {
+      const notifier = this.getNotifier()
+      if(notifier) {
+        const user = getCurrentUser() || {};
+        notifier.notify({
+          error: this.state.error,
+          params: {info: this.state.errorInfo},
+          context: {
+            component: window.location.href, user: {id: user.id, email: user.email}
+          }
+        });
+      }
+    })
   }
 
   getErrorUIProps() {

diff --git a/start-prod.sh b/start-prod.sh
@@ -17,6 +17,12 @@ fi
 if [[ ! -z "${RECAPTCHA_SITE_KEY}" ]]; then
     echo "var RECAPTCHA_SITE_KEY = \"${RECAPTCHA_SITE_KEY}\";" >> ${ENV_FILE}
 fi
+if [[ ! -z "${ERRBIT_URL}" ]]; then
+    echo "var ERRBIT_URL = \"${ERRBIT_URL}\";" >> ${ENV_FILE}
+fi
+if [[ ! -z "${ERRBIT_KEY}" ]]; then
+    echo "var ERRBIT_KEY = \"${ERRBIT_KEY}\";" >> ${ENV_FILE}
+fi
 
 echo "Adjusting nginx configuration"
 envsubst '$WEB_PORT' < /etc/nginx/templates/default.conf.template > /etc/nginx/conf.d/default.conf

diff --git a/webpack.config.js b/webpack.config.js
@@ -110,6 +110,8 @@ module.exports = (env) => {
         'process.env.NODE_ENV': JSON.stringify(env.NODE_ENV) || 'development',
         'process.env.RECAPTCHA_SITE_KEY': JSON.stringify(env.RECAPTCHA_SITE_KEY),
         'process.env.GA_ACCOUNT_ID': JSON.stringify(env.GA_ACCOUNT_ID),
+        'process.env.ERRBIT_URL': JSON.stringify(env.ERRBIT_URL),
+        'process.env.ERRBIT_KEY': JSON.stringify(env.ERRBIT_KEY),
       }),
       new IgnorePlugin({ resourceRegExp: /moment\/locale\// })
     ],