Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Config: Configure Sentry for frontend #636

Merged
merged 3 commits into from
Dec 8, 2023
+129 −2
Merged

Config: Configure Sentry for frontend #636

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
60a9c03
deps: Install the sentry package
drikusroor Dec 5, 2023
dfee79b
config: Configure Sentry
drikusroor Dec 5, 2023
538754c
config: Initialize and document Sentry with DSN key from env variable
drikusroor Dec 8, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 2 additions & 1 deletion .env.dist
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
1 change: 1 addition & 0 deletions docker-compose.yaml
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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
Expand Down
1 change: 1 addition & 0 deletions frontend/package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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",
Expand Down
30 changes: 30 additions & 0 deletions frontend/src/config/sentry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
5 changes: 5 additions & 0 deletions frontend/src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"));

Expand Down
91 changes: 90 additions & 1 deletion frontend/yarn.lock
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
Expand Down Expand Up @@ -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"
Expand Down Expand Up @@ -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:
Expand Down