feat: implement sentry error reporting

forge.config.js

@@ -100,6 +100,8 @@ const config = {
     [
       '@electron-forge/plugin-webpack',
       {
+        devContentSecurityPolicy:
+          "default-src 'self' 'unsafe-inline' data:; script-src 'self' 'unsafe-eval' 'unsafe-inline' data:; connect-src 'self' 'unsafe-inline' *.ingest.sentry.io data:;",
         mainConfig: './webpack.main.config.js',
         renderer: {
           config: './webpack.renderer.config.js',

package.json

@@ -82,7 +82,7 @@
   "dependencies": {
     "@headlessui/react": "^1.5.0",
     "@heroicons/react": "^1.0.5",
-    "@sentry/electron": "^3.0.0",
+    "@sentry/electron": "^3.0.2",
     "assert": "^2.0.0",
     "clsx": "^1.1.1",
     "crypto-browserify": "^3.12.0",

src/main.js

@@ -1,3 +1,4 @@
+require('./services/sentry');
 const { app, BrowserWindow, dialog, ipcMain, shell } = require('electron');
 const windowStateKeeper = require('electron-window-state');
 const path = require('path');
@@ -7,11 +8,6 @@ require('./services/csv');
 require('./services/geocode');
 const { enforceMacOSAppLocation, is } = require('electron-util');
 const { trackException } = require('./services/analytics');
-const Sentry = require('@sentry/electron/main');
-
-Sentry.init({
-  dsn: 'https://02bfd36076c647c9a9a2f66a9c7465c4@o1150892.ingest.sentry.io/6225803',
-});
 
 require('update-electron-app')({
   updateInterval: '1 hour',
@@ -105,7 +101,13 @@ app.on('activate', () => {
 
 app.on('web-contents-created', (_, contents) => {
   const isSafeForExternalOpen = (urlString) => {
-    const safeHosts = ['github.com', 'api.mapserv.utah.gov', 'developer.mapserv.utah.gov', 'agrc-status.netlify.app'];
+    const safeHosts = [
+      'github.com',
+      'api.mapserv.utah.gov',
+      'developer.mapserv.utah.gov',
+      'agrc-status.netlify.app',
+      'o1150892.ingest.sentry.io',
+    ];
     try {
       const url = new URL(urlString);
       if (url.protocol === 'mailto:') {

src/main.jsx

@@ -3,12 +3,7 @@ import Routes from './pages/Routes.jsx';
 import './styles/tailwind.css';
 import { ErrorBoundary } from 'react-error-boundary';
 import ErrorPage from './pages/Error.jsx';
-
-const Sentry = require('@sentry/electron/renderer');
-
-Sentry.init({
-  dsn: 'https://02bfd36076c647c9a9a2f66a9c7465c4@o1150892.ingest.sentry.io/6225803',
-});
+require('./services/sentry');
 
 (async () => {
   render(

src/pages/Error.jsx

@@ -1,7 +1,9 @@
 import { Chrome } from '../components/PageElements';
+import * as Sentry from '@sentry/electron/renderer';
 
 export default function Error({ error, children }) {
   window.ugrc.trackException(error.toString());
+  Sentry.captureException(error);
 
   return (
     <article>

src/services/sentry.js

@@ -0,0 +1,10 @@
+let Sentry;
+if (global.process) {
+  Sentry = require('@sentry/electron/main');
+} else {
+  Sentry = require('@sentry/electron/renderer');
+}
+
+Sentry.init({
+  dsn: 'https://02bfd36076c647c9a9a2f66a9c7465c4@o1150892.ingest.sentry.io/6225803',
+});

webpack.renderer.config.js

@@ -1,13 +1,19 @@
 const rules = require('./webpack.rules');
+const webpack = require('webpack');
 
 rules.push({
   test: /\.css$/,
   use: [{ loader: 'style-loader' }, { loader: 'css-loader' }, { loader: 'postcss-loader' }],
 });
 
 module.exports = {
-  // Put your normal webpack config below here
   module: {
     rules,
   },
+  plugins: [
+    // ignore sentry main code since it requires node apis
+    new webpack.IgnorePlugin({
+      resourceRegExp: /@sentry\/electron\/main/,
+    }),
+  ],
 };