Config: Configure Sentry for frontend (#636)

* deps: Install the sentry package * config: Configure Sentry * config: Initialize and document Sentry with DSN key from env variable
Amsterdam-Music-Lab · Dec 8, 2023 · aa06b79 · aa06b79
1 parent 717657a
commit aa06b79
Show file tree

Hide file tree

Showing 6 changed files with 129 additions and 2 deletions.
diff --git a/.env.dist b/.env.dist
@@ -23,4 +23,5 @@ REACT_APP_HTML_OG_DESCRIPTION=Listening experiments from the Amsterdam Music Lab
 REACT_APP_HTML_OG_IMAGE= # optional: information for web crawlers
 REACT_APP_HTML_OG_TITLE=Amsterdam Music Lab Experiment # optional: information for web crawlers
 REACT_APP_HTML_OG_URL= # optional: information for web crawlers
-REACT_APP_HTML_BODY_CLASS= # optional: assign a css class to the <body> tag in index.html, for custom styling
+REACT_APP_HTML_BODY_CLASS= # optional: assign a css class to the <body> tag in index.html, for custom styling
+REACT_APP_SENTRY_DSN= # optional: link to sentry instance, e.g. https://xxx@xxx.ingest.sentry.io/xxx
diff --git a/docker-compose.yaml b/docker-compose.yaml
@@ -79,6 +79,7 @@ services:
           - REACT_APP_HTML_OG_TITLE=${REACT_APP_HTML_OG_TITLE}
           - REACT_APP_HTML_OG_URL=${REACT_APP_HTML_OG_URL}
           - REACT_APP_HTML_BODY_CLASS=${REACT_APP_HTML_BODY_CLASS}
+          - REACT_APP_SENTRY_DSN=${REACT_APP_SENTRY_DSN}
         ports:
           - 3000:3000
           - 6006:6006

diff --git a/frontend/package.json b/frontend/package.json
@@ -4,6 +4,7 @@
   "private": true,
   "homepage": "/",
   "dependencies": {
+    "@sentry/react": "^7.85.0",
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^13.5.0",

diff --git a/frontend/src/config/sentry.js b/frontend/src/config/sentry.js
@@ -0,0 +1,30 @@
+//...
+import * as Sentry from "@sentry/react";
+
+const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN;
+
+export const initSentry = () => {
+
+    if (!SENTRY_DSN) {
+        console.warn("Sentry DSN not found. Sentry will not be initialized.");
+        return;
+    }
+
+    return Sentry.init({
+        dsn: SENTRY_DSN,
+        integrations: [
+            new Sentry.BrowserTracing({
+                // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+                tracePropagationTargets: ["localhost", /^https:\/\/yourserver\.io\/api/],
+            }),
+            new Sentry.Replay(),
+        ],
+        // Performance Monitoring
+        tracesSampleRate: 0.1, // Capture 100% of the transactions
+        // Session Replay
+        replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+        replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+    });
+}
+
+export default initSentry;
diff --git a/frontend/src/index.js b/frontend/src/index.js
@@ -2,13 +2,18 @@ import "./index.css";
 import React from "react";
 import ReactDOM from "react-dom";
 import App from "./components/App/App";
+import { initSentry } from "./config/sentry";
 import { initAudioListener } from "./util/audio";
 import { initWebAudioListener } from "./util/webAudio";
 
+// Init sentry
+initSentry();
+
 // Init audio listener
 initAudioListener();
 initWebAudioListener();
 
+
 // Create app
 ReactDOM.render(<App />, document.getElementById("root"));
 

diff --git a/frontend/yarn.lock b/frontend/yarn.lock
@@ -4656,6 +4656,94 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@sentry-internal/feedback@npm:7.86.0":
+  version: 7.86.0
+  resolution: "@sentry-internal/feedback@npm:7.86.0"
+  dependencies:
+    "@sentry/core": "npm:7.86.0"
+    "@sentry/types": "npm:7.86.0"
+    "@sentry/utils": "npm:7.86.0"
+  checksum: e85da3d91132d151c1ed9f9f7274d3f1068808f62f20e2843014bf8df7bdb046a0e9383cd3b0ee00c782f88e1fb17e0ae9783195cf50d6b0909dd4937cc0aa3d
+  languageName: node
+  linkType: hard
+
+"@sentry-internal/tracing@npm:7.86.0":
+  version: 7.86.0
+  resolution: "@sentry-internal/tracing@npm:7.86.0"
+  dependencies:
+    "@sentry/core": "npm:7.86.0"
+    "@sentry/types": "npm:7.86.0"
+    "@sentry/utils": "npm:7.86.0"
+  checksum: 7c55473e0f457b71c33e7e8392050aa43cea5678d519b5c494a876be1ba61cdcabff205eacc70227d6163db93af8e54da010ef32eeed5118521554f13d04ccd6
+  languageName: node
+  linkType: hard
+
+"@sentry/browser@npm:7.86.0":
+  version: 7.86.0
+  resolution: "@sentry/browser@npm:7.86.0"
+  dependencies:
+    "@sentry-internal/feedback": "npm:7.86.0"
+    "@sentry-internal/tracing": "npm:7.86.0"
+    "@sentry/core": "npm:7.86.0"
+    "@sentry/replay": "npm:7.86.0"
+    "@sentry/types": "npm:7.86.0"
+    "@sentry/utils": "npm:7.86.0"
+  checksum: f4bada0ea83caf3badb125f199d00dec38c332be6372a39e7cf77b4919043bebc8ac7f31a6122048f024d08acd47c2881dfde675a42a789192f944d940a37c84
+  languageName: node
+  linkType: hard
+
+"@sentry/core@npm:7.86.0":
+  version: 7.86.0
+  resolution: "@sentry/core@npm:7.86.0"
+  dependencies:
+    "@sentry/types": "npm:7.86.0"
+    "@sentry/utils": "npm:7.86.0"
+  checksum: f95e19925b0c6a70bd6b65510d66953ebb66de9b40f8b0f0dd70759648fa2fc0332e068b31f18aeebff2200bead0215d0becbcf9364ff06bc42bfc4a07747c83
+  languageName: node
+  linkType: hard
+
+"@sentry/react@npm:^7.85.0":
+  version: 7.86.0
+  resolution: "@sentry/react@npm:7.86.0"
+  dependencies:
+    "@sentry/browser": "npm:7.86.0"
+    "@sentry/types": "npm:7.86.0"
+    "@sentry/utils": "npm:7.86.0"
+    hoist-non-react-statics: "npm:^3.3.2"
+  peerDependencies:
+    react: 15.x || 16.x || 17.x || 18.x
+  checksum: 213d15e59970f62fde2711e23be1f88c7a620105682e28bce58a9aafa1754cedfcefd7a47cb7d5628834df5383fce6ea959597179ebc91d95d6e18177ce8a2c0
+  languageName: node
+  linkType: hard
+
+"@sentry/replay@npm:7.86.0":
+  version: 7.86.0
+  resolution: "@sentry/replay@npm:7.86.0"
+  dependencies:
+    "@sentry-internal/tracing": "npm:7.86.0"
+    "@sentry/core": "npm:7.86.0"
+    "@sentry/types": "npm:7.86.0"
+    "@sentry/utils": "npm:7.86.0"
+  checksum: 8a24558bae3c7d21326d0919b80e6ebac74ea866aea16d1092b26922a1bd3308710d68379303db409b841e9eab28c03660d40eeed01bb797a6fae79c0b146f16
+  languageName: node
+  linkType: hard
+
+"@sentry/types@npm:7.86.0":
+  version: 7.86.0
+  resolution: "@sentry/types@npm:7.86.0"
+  checksum: b04e6650509ddea1e0815bb4acb4ea16ad388e43e23f1f5dc94083db790343c8d8e675ebd2203a9c14f8a7c30ea5777cf499cd5500498b3bc25bfa444bd0b14c
+  languageName: node
+  linkType: hard
+
+"@sentry/utils@npm:7.86.0":
+  version: 7.86.0
+  resolution: "@sentry/utils@npm:7.86.0"
+  dependencies:
+    "@sentry/types": "npm:7.86.0"
+  checksum: 00fea70f9e58648803aaece4e45d14ea9d53a2014beb57047b6d9d2e3ff4626ebc1bfcf5d1dca7b7544da95a877ef798eeddc5b2e12d4b723c1b000964667fdb
+  languageName: node
+  linkType: hard
+
 "@sinclair/typebox@npm:^0.24.1":
   version: 0.24.51
   resolution: "@sinclair/typebox@npm:0.24.51"
@@ -7248,6 +7336,7 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "aml-frontend@workspace:."
   dependencies:
+    "@sentry/react": "npm:^7.85.0"
     "@storybook/addon-essentials": "npm:7.5.3"
     "@storybook/addon-interactions": "npm:7.5.3"
     "@storybook/addon-links": "npm:7.5.3"
@@ -11569,7 +11658,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.1":
+"hoist-non-react-statics@npm:^3.1.0, hoist-non-react-statics@npm:^3.3.1, hoist-non-react-statics@npm:^3.3.2":
   version: 3.3.2
   resolution: "hoist-non-react-statics@npm:3.3.2"
   dependencies: