fix(dashboard): sentry sourcemap setup (#1656)

SocialGouv · Sep 14, 2023 · 17e346c · 17e346c
1 parent 765ff54
commit 17e346c
Show file tree

Hide file tree

Showing 6 changed files with 103 additions and 153 deletions.
diff --git a/dashboard/.gitignore b/dashboard/.gitignore
@@ -23,3 +23,6 @@ yarn-debug.log*
 yarn-error.log*
 
 /src-tauri
+
+# Sentry Auth Token
+.sentryclirc
diff --git a/dashboard/Dockerfile b/dashboard/Dockerfile
@@ -20,7 +20,7 @@ ENV SENTRY_ORG=incubateur
 ENV SENTRY_URL=https://sentry.fabrique.social.gouv.fr/
 ENV SENTRY_PROJECT=mano
 
-RUN yarn build && node scripts/sentry.js
+RUN yarn build && yarn sentry:sourcemaps
 
 FROM ghcr.io/socialgouv/docker/nginx4spa:7.0.1
 

diff --git a/dashboard/package.json b/dashboard/package.json
@@ -10,7 +10,7 @@
     "@nivo/pie": "^0.80.0",
     "@react-hookz/web": "^23.0.0",
     "@sentry/browser": "^6.17.5",
-    "@sentry/react": "^7.14.0",
+    "@sentry/react": "^7.69.0",
     "@sentry/tracing": "^7.14.0",
     "@types/jest": "^29.5.2",
     "@types/node": "^20.3.3",
@@ -75,9 +75,9 @@
   "scripts": {
     "dev": "react-scripts start -FAST_REFRESH=true",
     "build": "react-scripts build",
-    "upload-source-map": "node scripts/sentry.js",
     "test": "react-scripts test",
-    "eject": "react-scripts eject"
+    "eject": "react-scripts eject",
+    "sentry:sourcemaps": "sentry-cli sourcemaps inject --org incubateur --project mano ./build && sentry-cli --url http://sentry.fabrique.social.gouv.fr/ sourcemaps upload --org incubateur --project mano ./build"
   },
   "eslintConfig": {
     "extends": [

diff --git a/dashboard/scripts/sentry.js b/dashboard/scripts/sentry.js
diff --git a/dashboard/src/scenes/user/view.js b/dashboard/src/scenes/user/view.js
@@ -16,6 +16,7 @@ import API from '../../services/api';
 import useTitle from '../../services/useTitle';
 import DeleteButtonAndConfirmModal from '../../components/DeleteButtonAndConfirmModal';
 import { emailRegex } from '../../utils';
+import { capture } from '../../services/sentry';
 
 const View = () => {
   const [localUser, setLocalUser] = useState(null);
@@ -41,6 +42,15 @@ const View = () => {
   return (
     <>
       <SmallHeaderWithBackButton />
+      <button
+        type="button"
+        className="tw-absolute tw-bottom-0 tw-right-0 tw-m-4 tw-rounded tw-bg-white tw-p-2 tw-text-sm tw-text-white tw-opacity-0"
+        onClick={() => {
+          capture(new Error('Test Capture Error Sentry Manually'));
+          throw new Error('Test Throw Error Sentry Manually');
+        }}>
+        Test Sentry
+      </button>
       <Formik
         initialValues={{
           name: localUser.name,
@@ -105,24 +115,24 @@ const View = () => {
                 </FormGroup>
               </Col>
               {values.role !== 'restricted-access' && (
-              <Col md={12}>
-                <Label htmlFor="healthcareProfessional" style={{ marginBottom: 0 }}>
-                  <input
-                    type="checkbox"
-                    id="healthcareProfessional"
-                    style={{ marginRight: '0.5rem' }}
-                    name="healthcareProfessional"
-                    checked={values.healthcareProfessional}
-                    onChange={() => {
-                      handleChange({ target: { value: !values.healthcareProfessional, name: 'healthcareProfessional' } });
-                    }}
-                  />
-                  Professionnel·le de santé
-                </Label>
-                <div>
-                  <small className="text-muted">Un·e professionnel·le de santé a accès au dossier médical complet des personnes.</small>
-                </div>
-              </Col>
+                <Col md={12}>
+                  <Label htmlFor="healthcareProfessional" style={{ marginBottom: 0 }}>
+                    <input
+                      type="checkbox"
+                      id="healthcareProfessional"
+                      style={{ marginRight: '0.5rem' }}
+                      name="healthcareProfessional"
+                      checked={values.healthcareProfessional}
+                      onChange={() => {
+                        handleChange({ target: { value: !values.healthcareProfessional, name: 'healthcareProfessional' } });
+                      }}
+                    />
+                    Professionnel·le de santé
+                  </Label>
+                  <div>
+                    <small className="text-muted">Un·e professionnel·le de santé a accès au dossier médical complet des personnes.</small>
+                  </div>
+                </Col>
               )}
             </Row>
             <div style={{ display: 'flex', justifyContent: 'flex-end', gap: '1rem' }}>