feat(telemetry): add Sentry to client

.github/workflows/prod-build.yml

@@ -236,6 +236,9 @@ jobs:
           REACT_APP_PLAYGROUND_BASE_HOST: mdnplay.dev
 
           # Sentry.
+          REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN_CLIENT }}
+          REACT_APP_SENTRY_ENVIRONMENT: prod
+          REACT_APP_SENTRY_RELEASE: ${{ github.sha }}
           SENTRY_DSN_BUILD: ${{ secrets.SENTRY_DSN_BUILD }}
           SENTRY_ENVIRONMENT: prod
           SENTRY_RELEASE: ${{ github.sha }}

.github/workflows/stage-build.yml

@@ -230,6 +230,9 @@ jobs:
           REACT_APP_PLAYGROUND_BASE_HOST: mdnyalp.dev
 
           # Sentry.
+          REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN_CLIENT }}
+          REACT_APP_SENTRY_ENVIRONMENT: stage
+          REACT_APP_SENTRY_RELEASE: ${{ github.sha }}
           SENTRY_DSN_BUILD: ${{ secrets.SENTRY_DSN_BUILD }}
           SENTRY_ENVIRONMENT: stage
           SENTRY_RELEASE: ${{ github.sha }}

.github/workflows/xyz-build.yml

@@ -153,6 +153,11 @@ jobs:
           # Placement
           REACT_APP_PLACEMENT_ENABLED: true
 
+          # Sentry.
+          REACT_APP_SENTRY_DSN: ${{ secrets.SENTRY_DSN_CLIENT }}
+          REACT_APP_SENTRY_ENVIRONMENT: xyz
+          REACT_APP_SENTRY_RELEASE: ${{ github.sha }}
+
         run: |
 
           # Info about which CONTENT_* environment variables were set and to what.

client/src/env.ts

@@ -100,6 +100,11 @@ export const GLEAN_ENABLED = Boolean(
   JSON.parse(process.env.REACT_APP_GLEAN_ENABLED || "false")
 );
 
+export const SENTRY_DSN = process.env.REACT_APP_SENTRY_DSN || "";
+export const SENTRY_ENVIRONMENT =
+  process.env.REACT_APP_SENTRY_ENVIRONMENT || "";
+export const SENTRY_RELEASE = process.env.REACT_APP_SENTRY_RELEASE || "";
+
 export const AI_FEEDBACK_GITHUB_REPO =
   process.env.REACT_APP_AI_FEEDBACK_GITHUB_REPO || "mdn/private-ai-feedback";
 

client/src/index.tsx

@@ -8,8 +8,13 @@ import { UserDataProvider } from "./user-context";
 import { UIProvider } from "./ui-context";
 import { GleanProvider } from "./telemetry/glean-context";
 import { PlacementProvider } from "./placement-context";
+import { initSentry } from "./telemetry/sentry";
+import { SENTRY_DSN } from "./env";
 
 // import * as serviceWorker from './serviceWorker';
+if (SENTRY_DSN) {
+  initSentry(SENTRY_DSN);
+}
 
 const container = document.getElementById("root");
 if (!container) {

client/src/telemetry/sentry.ts

@@ -0,0 +1,10 @@
+import * as Sentry from "@sentry/react";
+import { SENTRY_ENVIRONMENT, SENTRY_RELEASE } from "../env";
+
+export function initSentry(dsn: string) {
+  Sentry.init({
+    dsn,
+    release: SENTRY_RELEASE,
+    environment: SENTRY_ENVIRONMENT || "dev",
+  });
+}

package.json

@@ -72,6 +72,7 @@
     "@mozilla/glean": "2.0.5",
     "@sentry/integrations": "^7.80.0",
     "@sentry/node": "^7.80.0",
+    "@sentry/react": "^7.80.0",
     "@stripe/stripe-js": "^2.1.11",
     "@use-it/interval": "^1.0.0",
     "@vscode/ripgrep": "^1.15.6",

yarn.lock

@@ -2361,6 +2361,17 @@
     "@sentry/types" "7.80.0"
     "@sentry/utils" "7.80.0"
 
+"@sentry/[email protected]":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@sentry/browser/-/browser-7.80.0.tgz#385fb59ac1d52b67919087f3d7044575ae0abbdd"
+  integrity sha512-Ngwjc+yyf/aH5q7iQM1LeDNlhM1Ilt4ZLUogTghZR/guwNWmCtk3OHcjOLz7fxBBj9wGFUc2pHPyeYM6bQhrEw==
+  dependencies:
+    "@sentry-internal/tracing" "7.80.0"
+    "@sentry/core" "7.80.0"
+    "@sentry/replay" "7.80.0"
+    "@sentry/types" "7.80.0"
+    "@sentry/utils" "7.80.0"
+
 "@sentry/[email protected]":
   version "7.80.0"
   resolved "https://registry.yarnpkg.com/@sentry/core/-/core-7.80.0.tgz#7b8a460c19160b81ade20080333189f1a80c1410"
@@ -2390,6 +2401,26 @@
     "@sentry/utils" "7.80.0"
     https-proxy-agent "^5.0.0"
 
+"@sentry/react@^7.80.0":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@sentry/react/-/react-7.80.0.tgz#ee589ff202174ced45e77dc2714237031ca9c726"
+  integrity sha512-xoX7fqgY0NZR9Fud/IJ4a3b8Z/HsdwU5SLILi46lV+CWaXS6eFM1E81jG2Vd2EeYIpkH+bMA//XHMEod8LAJcQ==
+  dependencies:
+    "@sentry/browser" "7.80.0"
+    "@sentry/types" "7.80.0"
+    "@sentry/utils" "7.80.0"
+    hoist-non-react-statics "^3.3.2"
+
+"@sentry/[email protected]":
+  version "7.80.0"
+  resolved "https://registry.yarnpkg.com/@sentry/replay/-/replay-7.80.0.tgz#0626d85af1d8573038d52ae9e244e3e95fa47385"
+  integrity sha512-wWnpuJq3OaDLp1LutE4oxWXnau04fvwuzBjuaFvOXOV+pB/kn+pDPuVOC5+FH/RMRZ5ftwX5+dF6fojfcLVGCg==
+  dependencies:
+    "@sentry-internal/tracing" "7.80.0"
+    "@sentry/core" "7.80.0"
+    "@sentry/types" "7.80.0"
+    "@sentry/utils" "7.80.0"
+
 "@sentry/[email protected]":
   version "7.80.0"
   resolved "https://registry.yarnpkg.com/@sentry/types/-/types-7.80.0.tgz#f6896de2d231a7f8d814cf1c981c474240e96d8a"
@@ -7970,6 +8001,13 @@ history@^5.2.0:
   dependencies:
     "@babel/runtime" "^7.7.6"
 
+hoist-non-react-statics@^3.3.2:
+  version "3.3.2"
+  resolved "https://registry.yarnpkg.com/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz#ece0acaf71d62c2969c2ec59feff42a4b1a85b45"
+  integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
+  dependencies:
+    react-is "^16.7.0"
+
 hoopy@^0.1.4:
   version "0.1.4"
   resolved "https://registry.yarnpkg.com/hoopy/-/hoopy-0.1.4.tgz#609207d661100033a9a9402ad3dea677381c1b1d"
@@ -12503,7 +12541,7 @@ react-error-overlay@^6.0.11:
   resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.11.tgz#92835de5841c5cf08ba00ddd2d677b6d17ff9adb"
   integrity sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==
 
-react-is@^16.13.1:
+react-is@^16.13.1, react-is@^16.7.0:
   version "16.13.1"
   resolved "https://registry.yarnpkg.com/react-is/-/react-is-16.13.1.tgz#789729a4dc36de2999dc156dd6c1d9c18cea56a4"
   integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==