Add sentry to frontend app

client/config/prod.env.js

@@ -8,6 +8,8 @@ const values = {
   MATOMO_SITE_ID: JSON.stringify(process.env.MATOMO_SITE_ID),
   LOGOUT_REDIRECT_URL: JSON.stringify(process.env.LOGOUT_REDIRECT_URL),
   VUE_APP_FLAVOR: JSON.stringify(process.env.APP_FLAVOR),
+  SENTRY_DSN: JSON.stringify(process.env.SENTRY_JAVASCRIPT_DSN),
+  SENTRY_ENVIRONMENT: JSON.stringify(process.env.SENTRY_ENV),
   /*
    * ENV variables used in JS code need to be stringyfied, as they will be replaced (in place) in the code,
    * and JS needs quotes around strings

client/package-lock.json

@@ -19,6 +19,8 @@
         "@graphql-tools/jest-transform": "^1.2.2",
         "@graphql-tools/mock": "^8.6.5",
         "@graphql-tools/schema": "^8.3.7",
+        "@sentry/vue": "^7.45.0",
+        "@sentry/webpack-plugin": "^1.20.0",
         "@tiptap/core": "^2.0.0-beta.174",
         "@tiptap/extension-bullet-list": "^2.0.0-beta.26",
         "@tiptap/extension-document": "^2.0.0-beta.15",
@@ -3214,6 +3216,173 @@
         "url": "https://opencollective.com/popperjs"
       }
     },
+    "node_modules/@sentry-internal/tracing": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.45.0.tgz",
+      "integrity": "sha512-0aIDY2OvUX7k2XHaimOlWkboXoQvJ9dEKvfpu0Wh0YxfUTGPa+wplUdg3WVdkk018sq1L11MKmj4MPZyYUvXhw==",
+      "dependencies": {
+        "@sentry/core": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry-internal/tracing/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/browser": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.45.0.tgz",
+      "integrity": "sha512-/dUrUwnI34voMj+jSJT7b5Jun+xy1utVyzzwTq3Oc22N+SB17ZOX9svZ4jl1Lu6tVJPVjPyvL6zlcbrbMwqFjg==",
+      "dependencies": {
+        "@sentry-internal/tracing": "7.45.0",
+        "@sentry/core": "7.45.0",
+        "@sentry/replay": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/browser/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/cli": {
+      "version": "1.75.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-1.75.0.tgz",
+      "integrity": "sha512-vT8NurHy00GcN8dNqur4CMIYvFH3PaKdkX3qllVvi4syybKqjwoz+aWRCvprbYv0knweneFkLt1SmBWqazUMfA==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "https-proxy-agent": "^5.0.0",
+        "mkdirp": "^0.5.5",
+        "node-fetch": "^2.6.7",
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "which": "^2.0.2"
+      },
+      "bin": {
+        "sentry-cli": "bin/sentry-cli"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
+    "node_modules/@sentry/cli/node_modules/mkdirp": {
+      "version": "0.5.6",
+      "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+      "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+      "dependencies": {
+        "minimist": "^1.2.6"
+      },
+      "bin": {
+        "mkdirp": "bin/cmd.js"
+      }
+    },
+    "node_modules/@sentry/cli/node_modules/proxy-from-env": {
+      "version": "1.1.0",
+      "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+      "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+    },
+    "node_modules/@sentry/core": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.45.0.tgz",
+      "integrity": "sha512-xJfdTS4lRmHvZI/A5MazdnKhBJFkisKu6G9EGNLlZLre+6W4PH5sb7QX4+xoBdqG7v10Jvdia112vi762ojO2w==",
+      "dependencies": {
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/core/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/replay": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.45.0.tgz",
+      "integrity": "sha512-smM7FIcFIyKu30BqCl8BzLo1gH/z9WwXdGX6V0fNvHab9fJZ09+xjFn+LmIyo6N8H8jjwsup0+yQ12kiF/ZsEw==",
+      "dependencies": {
+        "@sentry/core": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0"
+      },
+      "engines": {
+        "node": ">=12"
+      }
+    },
+    "node_modules/@sentry/types": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.45.0.tgz",
+      "integrity": "sha512-iFt7msfUK8LCodFF3RKUyaxy9tJv/gpWhzxUFyNxtuVwlpmd+q6mtsFGn8Af3pbpm8A+MKyz1ebMwXj0PQqknw==",
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/utils": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.45.0.tgz",
+      "integrity": "sha512-aTY7qqtNUudd09SH5DVSKMm3iQ6ZeWufduc0I9bPZe6UMM09BDc4KmjmrzRkdQ+VaOmHo7+v+HZKQk5f+AbuTQ==",
+      "dependencies": {
+        "@sentry/types": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=8"
+      }
+    },
+    "node_modules/@sentry/utils/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/vue": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-7.45.0.tgz",
+      "integrity": "sha512-31wn10AjdMnCy5bzrMt3QLmX34ijuoxLOK4xE/E7NbtwAuPxd+mnc67CMy6UVfo8Ng36HFZFeNMewdqF676V5Q==",
+      "dependencies": {
+        "@sentry/browser": "7.45.0",
+        "@sentry/core": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "engines": {
+        "node": ">=8"
+      },
+      "peerDependencies": {
+        "vue": "2.x || 3.x"
+      }
+    },
+    "node_modules/@sentry/vue/node_modules/tslib": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+      "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+    },
+    "node_modules/@sentry/webpack-plugin": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz",
+      "integrity": "sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==",
+      "dependencies": {
+        "@sentry/cli": "^1.74.6",
+        "webpack-sources": "^2.0.0 || ^3.0.0"
+      },
+      "engines": {
+        "node": ">= 8"
+      }
+    },
     "node_modules/@sinclair/typebox": {
       "version": "0.24.50",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz",
@@ -20442,6 +20611,148 @@
       "resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.11.6.tgz",
       "integrity": "sha512-50/17A98tWUfQ176raKiOGXuYpLyyVMkxxG6oylzL3BPOlA6ADGdK7EYunSa4I064xerltq9TGXs8HmOk5E+vw=="
     },
+    "@sentry-internal/tracing": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry-internal/tracing/-/tracing-7.45.0.tgz",
+      "integrity": "sha512-0aIDY2OvUX7k2XHaimOlWkboXoQvJ9dEKvfpu0Wh0YxfUTGPa+wplUdg3WVdkk018sq1L11MKmj4MPZyYUvXhw==",
+      "requires": {
+        "@sentry/core": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@sentry/browser": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/browser/-/browser-7.45.0.tgz",
+      "integrity": "sha512-/dUrUwnI34voMj+jSJT7b5Jun+xy1utVyzzwTq3Oc22N+SB17ZOX9svZ4jl1Lu6tVJPVjPyvL6zlcbrbMwqFjg==",
+      "requires": {
+        "@sentry-internal/tracing": "7.45.0",
+        "@sentry/core": "7.45.0",
+        "@sentry/replay": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@sentry/cli": {
+      "version": "1.75.0",
+      "resolved": "https://registry.npmjs.org/@sentry/cli/-/cli-1.75.0.tgz",
+      "integrity": "sha512-vT8NurHy00GcN8dNqur4CMIYvFH3PaKdkX3qllVvi4syybKqjwoz+aWRCvprbYv0knweneFkLt1SmBWqazUMfA==",
+      "requires": {
+        "https-proxy-agent": "^5.0.0",
+        "mkdirp": "^0.5.5",
+        "node-fetch": "^2.6.7",
+        "progress": "^2.0.3",
+        "proxy-from-env": "^1.1.0",
+        "which": "^2.0.2"
+      },
+      "dependencies": {
+        "mkdirp": {
+          "version": "0.5.6",
+          "resolved": "https://registry.npmjs.org/mkdirp/-/mkdirp-0.5.6.tgz",
+          "integrity": "sha512-FP+p8RB8OWpF3YZBCrP5gtADmtXApB5AMLn+vdyA+PyxCjrCs00mjyUozssO33cwDeT3wNGdLxJ5M//YqtHAJw==",
+          "requires": {
+            "minimist": "^1.2.6"
+          }
+        },
+        "proxy-from-env": {
+          "version": "1.1.0",
+          "resolved": "https://registry.npmjs.org/proxy-from-env/-/proxy-from-env-1.1.0.tgz",
+          "integrity": "sha512-D+zkORCbA9f1tdWRK0RaCR3GPv50cMxcrz4X8k5LTSUD1Dkw47mKJEZQNunItRTkWwgtaUSo1RVFRIG9ZXiFYg=="
+        }
+      }
+    },
+    "@sentry/core": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/core/-/core-7.45.0.tgz",
+      "integrity": "sha512-xJfdTS4lRmHvZI/A5MazdnKhBJFkisKu6G9EGNLlZLre+6W4PH5sb7QX4+xoBdqG7v10Jvdia112vi762ojO2w==",
+      "requires": {
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@sentry/replay": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/replay/-/replay-7.45.0.tgz",
+      "integrity": "sha512-smM7FIcFIyKu30BqCl8BzLo1gH/z9WwXdGX6V0fNvHab9fJZ09+xjFn+LmIyo6N8H8jjwsup0+yQ12kiF/ZsEw==",
+      "requires": {
+        "@sentry/core": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0"
+      }
+    },
+    "@sentry/types": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/types/-/types-7.45.0.tgz",
+      "integrity": "sha512-iFt7msfUK8LCodFF3RKUyaxy9tJv/gpWhzxUFyNxtuVwlpmd+q6mtsFGn8Af3pbpm8A+MKyz1ebMwXj0PQqknw=="
+    },
+    "@sentry/utils": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/utils/-/utils-7.45.0.tgz",
+      "integrity": "sha512-aTY7qqtNUudd09SH5DVSKMm3iQ6ZeWufduc0I9bPZe6UMM09BDc4KmjmrzRkdQ+VaOmHo7+v+HZKQk5f+AbuTQ==",
+      "requires": {
+        "@sentry/types": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@sentry/vue": {
+      "version": "7.45.0",
+      "resolved": "https://registry.npmjs.org/@sentry/vue/-/vue-7.45.0.tgz",
+      "integrity": "sha512-31wn10AjdMnCy5bzrMt3QLmX34ijuoxLOK4xE/E7NbtwAuPxd+mnc67CMy6UVfo8Ng36HFZFeNMewdqF676V5Q==",
+      "requires": {
+        "@sentry/browser": "7.45.0",
+        "@sentry/core": "7.45.0",
+        "@sentry/types": "7.45.0",
+        "@sentry/utils": "7.45.0",
+        "tslib": "^1.9.3"
+      },
+      "dependencies": {
+        "tslib": {
+          "version": "1.14.1",
+          "resolved": "https://registry.npmjs.org/tslib/-/tslib-1.14.1.tgz",
+          "integrity": "sha512-Xni35NKzjgMrwevysHTCArtLDpPvye8zV/0E4EyYn43P7/7qvQwPh9BGkHewbMulVntbigmcT7rdX3BNo9wRJg=="
+        }
+      }
+    },
+    "@sentry/webpack-plugin": {
+      "version": "1.20.0",
+      "resolved": "https://registry.npmjs.org/@sentry/webpack-plugin/-/webpack-plugin-1.20.0.tgz",
+      "integrity": "sha512-Ssj1mJVFsfU6vMCOM2d+h+KQR7QHSfeIP16t4l20Uq/neqWXZUQ2yvQfe4S3BjdbJXz/X4Rw8Hfy1Sd0ocunYw==",
+      "requires": {
+        "@sentry/cli": "^1.74.6",
+        "webpack-sources": "^2.0.0 || ^3.0.0"
+      }
+    },
     "@sinclair/typebox": {
       "version": "0.24.50",
       "resolved": "https://registry.npmjs.org/@sinclair/typebox/-/typebox-0.24.50.tgz",

client/package.json

@@ -42,6 +42,8 @@
     "@graphql-tools/jest-transform": "^1.2.2",
     "@graphql-tools/mock": "^8.6.5",
     "@graphql-tools/schema": "^8.3.7",
+    "@sentry/vue": "^7.45.0",
+    "@sentry/webpack-plugin": "^1.20.0",
     "@tiptap/core": "^2.0.0-beta.174",
     "@tiptap/extension-bullet-list": "^2.0.0-beta.26",
     "@tiptap/extension-document": "^2.0.0-beta.15",

client/src/setup/plugins.ts

@@ -7,6 +7,7 @@ import { createApolloProvider } from '@vue/apollo-option';
 import apolloClients from './apollo';
 import flavorPlugin from '@/plugins/flavor';
 import VueMatomo from 'vue-matomo';
+import * as Sentry from '@sentry/vue';
 
 const { publicApolloClient, privateApolloClient } = apolloClients;
 
@@ -17,6 +18,13 @@ const apolloProvider = createApolloProvider({
   defaultClient: privateApolloClient,
 });
 const registerPlugins = (app: any) => {
+  if (process.env.SENTRY_DSN) {
+    Sentry.init({
+      app,
+      dsn: process.env.SENTRY_DSN,
+      environment: process.env.SENTRY_ENVIRONMENT || 'localhost',
+    });
+  }
   app.use(store);
   app.use(VueModal);
   app.use(VueRemoveEdges);