Add sentry

.gitignore

@@ -59,3 +59,6 @@ junit.xml
 
 /app/assets/builds/*
 !/app/assets/builds/.keep
+
+# Sentry Config File
+.env.sentry-build-plugin

app/assets/javascripts/sentry.ts

@@ -0,0 +1,18 @@
+import * as Sentry from "@sentry/browser";
+
+const HOST_TO_ENVIRONMENT: Record<string, string> = {
+    "dodona.localhost": "development",
+    "naos.dodona.be": "staging",
+    "dodona.be": "production",
+};
+
+export function initSentry(): void {
+    const environment = window.location.hostname in HOST_TO_ENVIRONMENT ?
+        HOST_TO_ENVIRONMENT[window.location.hostname] : "unknown";
+
+    // config options can be found at https://docs.sentry.io/platforms/javascript/configuration/
+    Sentry.init({
+        dsn: "https://18315b6d60f9329de56983fd94f67db9@o4507329115783168.ingest.de.sentry.io/4507333215256657",
+        environment,
+    });
+}

app/javascript/packs/application_pack.js

@@ -14,6 +14,9 @@ import Rails from "@rails/ujs";
 
 Rails.start();
 
+import { initSentry } from "sentry";
+initSentry();
+
 import { i18n } from "i18n/i18n";
 
 // bootstrap

config/initializers/content_security_policy.rb

@@ -16,12 +16,14 @@
                          'https://cdn.jsdelivr.net/pyodide/',
                          'https://*.googleapis.com',
                          'http://localhost:3035', 'ws://localhost:3035',
-                         'https://dolos.ugent.be/api/reports'
+                         'https://dolos.ugent.be/api/reports',
+                         'https://o4507329115783168.ingest.de.sentry.io/api/'
     else
       policy.connect_src :self,
                          'https://cdn.jsdelivr.net/pyodide/',
                          'https://cdn.jsdelivr.net/npm/mathjax@3/',
-                         'https://dolos.ugent.be/api/reports'
+                         'https://dolos.ugent.be/api/reports',
+                         'https://o4507329115783168.ingest.de.sentry.io/api/'
     end
 
     policy.font_src    :self, 'https://fonts.gstatic.com',

config/webpack/webpack.config.js

@@ -1,5 +1,6 @@
 const path = require("path");
 const fs = require("fs");
+const { sentryWebpackPlugin } = require("@sentry/webpack-plugin");
 
 // https://stackoverflow.com/questions/34907999/best-way-to-have-all-files-in-a-directory-be-entry-points-in-webpack
 const sourceDirectory = "./app/javascript/packs";
@@ -67,6 +68,16 @@ const config = {
         modules: ["node_modules", "app/assets/javascripts"],
         extensions: [".tsx", ".ts", ".mjs", ".js", ".sass", ".scss", ".css", ".module.sass", ".module.scss", ".module.css", ".png", ".svg", ".gif", ".jpeg", ".jpg"]
     },
+    devtool: "source-map", // Source map generation must be turned on
+    plugins: [
+        // Put the Sentry Webpack plugin after all other plugins
+        sentryWebpackPlugin({
+            authToken: process.env.SENTRY_AUTH_TOKEN,
+            org: "dodona",
+            project: "dodona-frontend",
+        }),
+    ],
+
 };
 
 if (process.env.NODE_ENV === "development") {

package.json

@@ -29,6 +29,8 @@
     "@rails/activestorage": "^7.1.3",
     "@rails/ujs": "^7.1.3",
     "@replit/codemirror-lang-csharp": "^6.2.0",
+    "@sentry/browser": "^8.5.0",
+    "@sentry/webpack-plugin": "^2.17.0",
     "@types/bootstrap": "^5.2.10",
     "@types/d3": "^7.4.3",
     "@types/dragula": "^3.7.5",