Merge pull request #264 from AppQuality/sentry-setup

Sentry setup
AppQuality · Dec 11, 2023 · 1d4452b · 1d4452b
2 parents 4953638 + aa22a32
commit 1d4452b
Show file tree

Hide file tree

Showing 14 changed files with 325 additions and 123 deletions.
diff --git a/.github/workflows/main.yml b/.github/workflows/main.yml
@@ -50,6 +50,7 @@ jobs:
           # be deployed to ECS.
           docker build \
             --build-arg NPM_TOKEN=${{ secrets.NPM_TOKEN }} \
+            --build-arg SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} \
             -t $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG .
           docker push $ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG
           echo "::set-output name=image::$ECR_REGISTRY/$ECR_REPOSITORY:$IMAGE_TAG"
diff --git a/.gitignore b/.gitignore
@@ -35,3 +35,6 @@ cypress/videos
 cypress/screenshots
 cypress/reports
 cypress/downloads
+
+# Sentry Config File
+.sentryclirc
diff --git a/Dockerfile b/Dockerfile
@@ -3,6 +3,7 @@ FROM node:16.19-alpine3.17 as base
 
 COPY package.json ./
 COPY yarn.lock ./
+ARG SENTRY_AUTH_TOKEN  
 ARG NPM_TOKEN  
 RUN echo //registry.npmjs.org/:_authToken=${NPM_TOKEN} > .npmrc
 RUN ["yarn", "install", "--frozen-lockfile", "--ignore-scripts"]
@@ -11,6 +12,7 @@ RUN rm -f .npmrc
 COPY . .
 
 RUN ["yarn", "build"]
+RUN ["yarn", "sentry:sourcemaps"]
 
 FROM alpine:3.14 as web
 

diff --git a/deployment/after-install.sh b/deployment/after-install.sh
@@ -44,6 +44,7 @@ services:
       PORT: 80
       NODE_ENV: ${ENVIRONMENT}
       REACT_APP_ENVIRONMENT: ${ENVIRONMENT}
+      REACT_APP_VERSION: ${DOCKER_IMAGE}
     logging:
       driver: awslogs
       options:

diff --git a/docker-entrypoint.sh b/docker-entrypoint.sh
@@ -6,7 +6,7 @@ rm -rf $CONFIG_FILE_PATH
 touch $CONFIG_FILE_PATH
 
 # Add assignment
-echo "window._env_ = {" > $CONFIG_FILE_PATH
+echo "window.react_env = {" > $CONFIG_FILE_PATH
 
 VARIABLES=$(printenv | grep REACT_APP)
 

diff --git a/package.json b/package.json
@@ -7,6 +7,7 @@
     "@appquality/craft-blocks": "^0.1.27",
     "@datadog/browser-logs": "^3.4.1",
     "@reduxjs/toolkit": "^1.8.2",
+    "@sentry/react": "^7.83.0",
     "formik": "^2.2.6",
     "i18n-iso-countries": "^6.7.0",
     "i18next": "^20.2.2",
@@ -57,7 +58,8 @@
     "translate": "i18next-scanner",
     "generate-schema": ". ./.env.development; npx openapi-typescript $REACT_APP_API_URL/reference/ --output src/utils/schema.ts ",
     "generate-api": ". ./.env.development; API_URL=$REACT_APP_API_URL/reference/ npx @rtk-query/codegen-openapi src/services/tryberApi/config.ts",
-    "generate-fixtures": ". ./.env.development; API_URL=$REACT_APP_API_URL/reference/; npx @appquality/fixture-generator -u $API_URL && npx prettier --write 'cypress/fixtures/**/*.json'"
+    "generate-fixtures": ". ./.env.development; API_URL=$REACT_APP_API_URL/reference/; npx @appquality/fixture-generator -u $API_URL && npx prettier --write 'cypress/fixtures/**/*.json'",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org appquality-srl --project tryber-react ./build && sentry-cli sourcemaps upload --org appquality-srl --project tryber-react ./build"
   },
   "eslintConfig": {
     "extends": [
@@ -94,6 +96,7 @@
     "@craco/craco": "^6.4.2",
     "@redux-devtools/core": "^3.11.0",
     "@rtk-query/codegen-openapi": "^1.0.0-alpha.1",
+    "@sentry/cli": "^2.23.0",
     "@types/node": "^14.14.41",
     "@types/react": "17.0.9",
     "@types/react-dom": "17.0.9",

diff --git a/public/static/env-config.js b/public/static/env-config.js
@@ -1,3 +1,4 @@
-window._env_ = {
+window.react_env = {
   REACT_APP_ENVIRONMENT: "local",
+  REACT_APP_VERSION: "local",
 };
diff --git a/src/Page.tsx b/src/Page.tsx
@@ -1,11 +1,10 @@
 import "./i18n";
 import { datadogLogs } from "@datadog/browser-logs";
-import { Location } from "history";
+import { Location, createBrowserHistory } from "history";
 import queryString from "query-string";
 import { useEffect } from "react";
-import TagManager from "react-gtm-module";
 import { useDispatch } from "react-redux";
-import { Redirect, Route, Switch, useLocation } from "react-router-dom";
+import { Redirect, Route, Router, Switch, useLocation } from "react-router-dom";
 
 import GenericModal from "./features/GenericModal";
 import SiteWideMessages from "./features/SiteWideMessages";
@@ -27,6 +26,12 @@ import { refreshUser } from "./redux/user/actions/refreshUser";
 import BugForm from "./pages/BugForm";
 import ThankYouPage from "./pages/ThankYou";
 import VdpPage from "./pages/VDP";
+import * as Sentry from "@sentry/react";
+import SentryWrapper from "./features/SentryWrapper";
+
+// Create Custom Sentry Route component
+const SentryRoute = Sentry.withSentryRouting(Route);
+const history = createBrowserHistory();
 
 if (process.env.REACT_APP_DATADOG_CLIENT_TOKEN) {
   datadogLogs.init({
@@ -36,13 +41,6 @@ if (process.env.REACT_APP_DATADOG_CLIENT_TOKEN) {
     sampleRate: 100,
   });
 }
-if (process.env.REACT_APP_GTM_ID) {
-  const tagManagerArgs = {
-    gtmId: process.env.REACT_APP_GTM_ID,
-  };
-
-  TagManager.initialize(tagManagerArgs);
-}
 const base = "/:locale(en|it|es)?";
 
 function Page() {
@@ -59,117 +57,132 @@ function Page() {
   }, []);
 
   return (
-    <div>
+    <SentryWrapper history={history}>
       <SiteWideMessages />
       <GenericModal />
-      <Switch>
-        <Route path={`${base}/getting-started`} component={GettingStarted} />
-        <Route path={`/it/getting-started-2`}>
-          <Redirect to="/it/getting-started" />
-        </Route>
+      <Router history={history}>
+        <Switch>
+          <SentryRoute
+            path={`${base}/getting-started`}
+            component={GettingStarted}
+          />
+          <SentryRoute path={`/it/getting-started-2`}>
+            <Redirect to="/it/getting-started" />
+          </SentryRoute>
 
-        <Route path={`${base}/my-dashboard`} component={Dashboard} />
+          <SentryRoute path={`${base}/my-dashboard`} component={Dashboard} />
 
-        <Route path={`${base}/personal-equipment`} component={Devices} />
-        <Route
-          path={`/it/i-miei-device`}
-          component={({ location }: { location: Location }) => (
-            <Redirect
-              to={{
-                ...location,
-                pathname: "/it/personal-equipment",
-              }}
-            />
-          )}
-        />
-        <Route
-          path={`/es/dispositivos`}
-          component={({ location }: { location: Location }) => (
-            <Redirect
-              to={{
-                ...location,
-                pathname: "/es/personal-equipment",
-              }}
-            />
-          )}
-        />
+          <SentryRoute
+            path={`${base}/personal-equipment`}
+            component={Devices}
+          />
+          <SentryRoute
+            path={`/it/i-miei-device`}
+            component={({ location }: { location: Location }) => (
+              <Redirect
+                to={{
+                  ...location,
+                  pathname: "/it/personal-equipment",
+                }}
+              />
+            )}
+          />
+          <SentryRoute
+            path={`/es/dispositivos`}
+            component={({ location }: { location: Location }) => (
+              <Redirect
+                to={{
+                  ...location,
+                  pathname: "/es/personal-equipment",
+                }}
+              />
+            )}
+          />
 
-        <Route path={`/it/la-mia-dashboard`}>
-          <Redirect to="/it/my-dashboard" />
-        </Route>
-        <Route path={`/es/tablero`}>
-          <Redirect to="/es/my-dashboard" />
-        </Route>
+          <SentryRoute path={`/it/la-mia-dashboard`}>
+            <Redirect to="/it/my-dashboard" />
+          </SentryRoute>
+          <SentryRoute path={`/es/tablero`}>
+            <Redirect to="/es/my-dashboard" />
+          </SentryRoute>
 
-        <Route path={`${base}/my-bugs`} component={MyBugs} />
-        <Route path={`${base}/vdp/:id/:token`} component={VdpPage} />
-        <Route
-          path={`${base}/experience-points`}
-          component={ExperiencePoints}
-        />
-        <Route
-          path={`${base}/it/punti-esperienza`}
-          component={({ location }: { location: Location }) => (
-            <Redirect
-              to={{
-                ...location,
-                pathname: "/it/experience-points",
-              }}
-            />
-          )}
-        />
-        <Route
-          path={`${base}/es/puntos-de-experiencia`}
-          component={({ location }: { location: Location }) => (
-            <Redirect
-              to={{
-                ...location,
-                pathname: "/es/experience-points",
-              }}
-            />
-          )}
-        />
-        <Route
-          path={`${base}/it/i-miei-bug`}
-          component={({ location }: { location: Location }) => (
-            <Redirect
-              to={{
-                ...location,
-                pathname: "/it/my-bugs",
-              }}
-            />
-          )}
-        />
-        <Route
-          path={`${base}/es/errores-cargados`}
-          component={({ location }: { location: Location }) => (
-            <Redirect
-              to={{
-                ...location,
-                pathname: "/es/my-bugs",
-              }}
-            />
-          )}
-        />
+          <SentryRoute path={`${base}/my-bugs`} component={MyBugs} />
+          <SentryRoute path={`${base}/vdp/:id/:token`} component={VdpPage} />
+          <SentryRoute
+            path={`${base}/experience-points`}
+            component={ExperiencePoints}
+          />
+          <SentryRoute
+            path={`${base}/it/punti-esperienza`}
+            component={({ location }: { location: Location }) => (
+              <Redirect
+                to={{
+                  ...location,
+                  pathname: "/it/experience-points",
+                }}
+              />
+            )}
+          />
+          <SentryRoute
+            path={`${base}/es/puntos-de-experiencia`}
+            component={({ location }: { location: Location }) => (
+              <Redirect
+                to={{
+                  ...location,
+                  pathname: "/es/experience-points",
+                }}
+              />
+            )}
+          />
+          <SentryRoute
+            path={`${base}/it/i-miei-bug`}
+            component={({ location }: { location: Location }) => (
+              <Redirect
+                to={{
+                  ...location,
+                  pathname: "/it/my-bugs",
+                }}
+              />
+            )}
+          />
+          <SentryRoute
+            path={`${base}/es/errores-cargados`}
+            component={({ location }: { location: Location }) => (
+              <Redirect
+                to={{
+                  ...location,
+                  pathname: "/es/my-bugs",
+                }}
+              />
+            )}
+          />
 
-        <Route path={`${base}/my-account`} component={Profile} />
-        <Route path={`${base}/payments`} component={Wallet} />
-        <Route path={`${base}/leaderboard`} component={Ranking} />
-        <Route path={`${base}/campaign/:id/bugform`} component={BugForm} />
-        <Route path={`${base}/thank-you`} component={ThankYouPage} />
-        {/* TODO Temporary route */}
-        <Route
-          path={`${base}/campaign/:id/preview-selection-form`}
-          component={PreviewSelectionForm}
-        />
-        <Route
-          path={["/goodbye", "/it/goodbye", "/es/goodbye"]}
-          exact
-          component={GoodbyePage}
-        />
-        <Route path={["/", "/it", "/es"]} exact component={() => <Home />} />
-      </Switch>
-    </div>
+          <SentryRoute path={`${base}/my-account`} component={Profile} />
+          <SentryRoute path={`${base}/payments`} component={Wallet} />
+          <SentryRoute path={`${base}/leaderboard`} component={Ranking} />
+          <SentryRoute
+            path={`${base}/campaign/:id/bugform`}
+            component={BugForm}
+          />
+          <SentryRoute path={`${base}/thank-you`} component={ThankYouPage} />
+          {/* TODO Temporary route */}
+          <SentryRoute
+            path={`${base}/campaign/:id/preview-selection-form`}
+            component={PreviewSelectionForm}
+          />
+          <SentryRoute
+            path={["/goodbye", "/it/goodbye", "/es/goodbye"]}
+            exact
+            component={GoodbyePage}
+          />
+          <SentryRoute
+            path={["/", "/it", "/es"]}
+            exact
+            component={() => <Home />}
+          />
+        </Switch>
+      </Router>
+    </SentryWrapper>
   );
 }
 

diff --git a/src/features/LoggedOnly.tsx b/src/features/LoggedOnly.tsx
@@ -3,6 +3,7 @@ import { useGetUsersMeQuery } from "src/services/tryberApi";
 import Loading from "./Loading";
 import { LoginPage } from "./LoginPage";
 import SiteHeader from "./SiteHeader";
+import * as Sentry from "@sentry/react";
 
 const LoggedOnly = ({
   children,
@@ -11,7 +12,13 @@ const LoggedOnly = ({
   children: React.ReactNode;
   showHeader: boolean;
 }) => {
-  const { error, isLoading } = useGetUsersMeQuery({});
+  const {
+    data: user,
+    error,
+    isLoading,
+  } = useGetUsersMeQuery({
+    fields: "id, email, username, wp_user_id, role",
+  });
 
   if (isLoading) {
     return <Loading />;
@@ -21,6 +28,14 @@ const LoggedOnly = ({
       event: "ApiLoaded",
     },
   });
+  Sentry.setUser({
+    id: user?.id ?? 0,
+    email: user?.email ?? "unknown",
+    username: user?.username ?? "unknown",
+    wp_user_id: user?.wp_user_id ?? 0,
+    role: user?.role ?? "unknown",
+  });
+
   if (error) {
     if ("status" in error && error.status === 403) {
       return <LoginPage />;