Update environment configuration and Sentry

integration
AppQuality · Dec 6, 2023 · 6ffe8a0 · 6ffe8a0
1 parent 779dd9f
commit 6ffe8a0
Show file tree

Hide file tree

Showing 5 changed files with 119 additions and 100 deletions.
diff --git a/public/static/env-config.js b/public/static/env-config.js
@@ -1,3 +1,4 @@
 window._env_ = {
   REACT_APP_ENVIRONMENT: "local",
+  REACT_APP_VERSION: "local",
 };
diff --git a/src/App.tsx b/src/App.tsx
@@ -26,100 +26,79 @@ import AgreementsList from "./pages/agreements/list";
 import SingleAgreementEdit from "./pages/agreements/view-edit";
 import SingleAgreementNew from "./pages/agreements/new";
 import UxDashboard from "./pages/UxDashboard";
-import isStagingEnvironment from "./features/isStagingEnvironment";
+import SentryWrapper from "./features/SentryWrapper";
 
 const SentryRoute = Sentry.withSentryRouting(Route);
 const history = createBrowserHistory();
 
-if (process.env.NODE_ENV !== "test") {
-  Sentry.init({
-    dsn: "https://[email protected]/4506320026664960",
-    integrations: [
-      new Sentry.BrowserTracing({
-        routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
-      }),
-    ],
-    environment: _env_.REACT_APP_ENVIRONMENT,
-    // trace all staging and locale traces and 70% of production traces
-    tracesSampleRate: isStagingEnvironment() ? 1.0 : 0.7,
-    // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
-    tracePropagationTargets: [
-      "localhost",
-      /^https:\/\/dev\.tryber\.me\/api/,
-      /^https:\/\/tryber\.me\/api/,
-    ],
-
-    // Capture Replay for 10% of all sessions,
-    // plus for 100% of sessions with an error
-    // do not capture for staging and locale
-    replaysSessionSampleRate: isStagingEnvironment() ? 0.0 : 0.1,
-    replaysOnErrorSampleRate: isStagingEnvironment() ? 0.0 : 1.0,
-  });
-}
-
 function App() {
   return (
-    <Provider store={setupStore()}>
-      <ThemeProvider theme={aqBootstrapTheme}>
-        <GlobalStyle />
-        <SiteWideMessages />
-        <BrowserRouter>
-          <Router history={history}>
-            <Switch>
-              <SentryRoute
-                path={`/backoffice/campaigns/:id/bugs`}
-                component={BugsList}
-              />
-              <SentryRoute
-                path={`/backoffice/campaigns/:id/prospect`}
-                component={Prospect}
-              />
-              <SentryRoute path={`/backoffice/new`} component={Create} />
-              <SentryRoute
-                path="/backoffice/payments"
-                component={AdminPayments}
-              />
-              <SentryRoute path="/backoffice/jotform" component={Jotform} />
-              <SentryRoute
-                path="/backoffice/campaigns/preselection-forms/new"
-                component={CampaignPreselection}
-              />
-              <SentryRoute
-                path="/backoffice/campaigns/preselection-forms/:id"
-                component={CampaignPreselection}
-              />
-              <SentryRoute
-                path="/backoffice/campaigns/preselection-forms"
-                component={CampaignPreselectionList}
-              />
-              <SentryRoute
-                path="/backoffice/campaigns/:id/selection"
-                component={SelectionPage}
-              />
-              <SentryRoute
-                path="/backoffice/campaigns/:id/ux-dashboard"
-                component={UxDashboard}
-              />
-              <SentryRoute path="/backoffice/campaigns" component={Campaigns} />
-              <SentryRoute
-                path="/backoffice/agreements/new"
-                component={SingleAgreementNew}
-              />
-              <SentryRoute
-                path="/backoffice/agreements/:id"
-                component={SingleAgreementEdit}
-              />
-              <SentryRoute
-                path="/backoffice/agreements"
-                component={AgreementsList}
-              />
-              <SentryRoute path={`/backoffice/:id`} component={Update} />
-              <SentryRoute path={`/backoffice`} component={List} />
-            </Switch>
-          </Router>
-        </BrowserRouter>
-      </ThemeProvider>
-    </Provider>
+    <SentryWrapper history={history}>
+      <Provider store={setupStore()}>
+        <ThemeProvider theme={aqBootstrapTheme}>
+          <GlobalStyle />
+          <SiteWideMessages />
+          <BrowserRouter>
+            <Router history={history}>
+              <Switch>
+                <SentryRoute
+                  path={`/backoffice/campaigns/:id/bugs`}
+                  component={BugsList}
+                />
+                <SentryRoute
+                  path={`/backoffice/campaigns/:id/prospect`}
+                  component={Prospect}
+                />
+                <SentryRoute path={`/backoffice/new`} component={Create} />
+                <SentryRoute
+                  path="/backoffice/payments"
+                  component={AdminPayments}
+                />
+                <SentryRoute path="/backoffice/jotform" component={Jotform} />
+                <SentryRoute
+                  path="/backoffice/campaigns/preselection-forms/new"
+                  component={CampaignPreselection}
+                />
+                <SentryRoute
+                  path="/backoffice/campaigns/preselection-forms/:id"
+                  component={CampaignPreselection}
+                />
+                <SentryRoute
+                  path="/backoffice/campaigns/preselection-forms"
+                  component={CampaignPreselectionList}
+                />
+                <SentryRoute
+                  path="/backoffice/campaigns/:id/selection"
+                  component={SelectionPage}
+                />
+                <SentryRoute
+                  path="/backoffice/campaigns/:id/ux-dashboard"
+                  component={UxDashboard}
+                />
+                <SentryRoute
+                  path="/backoffice/campaigns"
+                  component={Campaigns}
+                />
+                <SentryRoute
+                  path="/backoffice/agreements/new"
+                  component={SingleAgreementNew}
+                />
+                <SentryRoute
+                  path="/backoffice/agreements/:id"
+                  component={SingleAgreementEdit}
+                />
+                <SentryRoute
+                  path="/backoffice/agreements"
+                  component={AgreementsList}
+                />
+                <SentryRoute path={`/backoffice/:id`} component={Update} />
+                <SentryRoute path={`/backoffice`} component={List} />
+              </Switch>
+            </Router>
+          </BrowserRouter>
+        </ThemeProvider>
+      </Provider>
+    </SentryWrapper>
   );
 }
 

diff --git a/src/features/PageTemplate.tsx b/src/features/PageTemplate.tsx
@@ -1,10 +1,16 @@
 import React from "react";
-import SentryWrapper from "./SentryWrapper";
 import { useGetUsersMeQuery } from "src/services/tryberApi";
 import TagManager from "react-gtm-module";
+import * as Sentry from "@sentry/react";
 
 export const PageTemplate = ({ children }: { children: React.ReactNode }) => {
-  const { error, isLoading } = useGetUsersMeQuery({});
+  const {
+    data: user,
+    error,
+    isLoading,
+  } = useGetUsersMeQuery({
+    fields: "id, email, username, wp_user_id, role",
+  });
   if (isLoading) {
     return <div>Loading...</div>;
   }
@@ -13,6 +19,13 @@ export const PageTemplate = ({ children }: { children: React.ReactNode }) => {
       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 <div>You are not logged in. Please log in to continue.</div>;
@@ -21,5 +34,5 @@ export const PageTemplate = ({ children }: { children: React.ReactNode }) => {
     }
     return null;
   }
-  return <SentryWrapper>{children}</SentryWrapper>;
+  return <>{children}</>;
 };
diff --git a/src/features/SentryWrapper.tsx b/src/features/SentryWrapper.tsx
@@ -1,14 +1,39 @@
-import { useGetUsersMeQuery } from "src/services/tryberApi";
 import * as Sentry from "@sentry/react";
+import isStagingEnvironment from "./isStagingEnvironment";
+import { RouterHistory } from "@sentry/react/types/reactrouter";
 
-const SentryWrapper = ({ children }: { children: React.ReactNode }) => {
-  const { data: user } = useGetUsersMeQuery({});
-
-  Sentry.setUser({
-    role: user?.role ?? "unknown",
-    wp_user_id: user?.wp_user_id ?? 0,
-    tester_id: user?.id ?? 0,
-  });
+const SentryWrapper = ({
+  children,
+  history,
+}: {
+  children: React.ReactNode;
+  history: RouterHistory;
+}) => {
+  if (process.env.NODE_ENV !== "test") {
+    Sentry.init({
+      dsn: "https://[email protected]/4506337899511808",
+      integrations: [
+        new Sentry.BrowserTracing({
+          routingInstrumentation: Sentry.reactRouterV5Instrumentation(history),
+        }),
+      ],
+      environment: _env_.REACT_APP_ENVIRONMENT,
+      // trace all staging and locale traces and 70% of production traces
+      tracesSampleRate: isStagingEnvironment() ? 1.0 : 0.7,
+      // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
+      tracePropagationTargets: [
+        "localhost",
+        /^https:\/\/dev\.tryber\.me\/api/,
+        /^https:\/\/tryber\.me\/api/,
+      ],
+      release: _env_.REACT_APP_VERSION,
+      // Capture Replay for 10% of all sessions,
+      // plus for 100% of sessions with an error
+      // do not capture for staging and locale
+      replaysSessionSampleRate: isStagingEnvironment() ? 0.0 : 0.1,
+      replaysOnErrorSampleRate: isStagingEnvironment() ? 0.0 : 1.0,
+    });
+  }
 
   return <>{children}</>;
 };

diff --git a/src/types.d.ts b/src/types.d.ts
@@ -14,5 +14,6 @@ declare global {
 
   var _env_: {
     REACT_APP_ENVIRONMENT: string;
+    REACT_APP_VERSION: string;
   };
 }