Merge pull request #2230 from MTES-MCT/feature/894-sentry-front

[QA] Monitorer la plateforme et tracker les erreurs JS

.env

@@ -47,12 +47,12 @@ MATOMO_SITE_ID=1
 ZAPIER_OILHI_TOKEN=
 ZAPIER_OILHI_USER_ID=
 ZAPIER_OILHI_CREATE_AIRTABLE_RECORD_ZAP_ID=
-SECURITY_CSP_HEADER_VALUE="default-src 'self' https://interfaces.zapier.com https://tibot-histologe.zapier.app; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.matomo.cloud https://unpkg.com https://interfaces.zapier.com; style-src 'self' 'unsafe-inline' https://unpkg.com; img-src 'self' data: blob: https://voxusagers.numerique.gouv.fr https://*.tile.openstreetmap.org https://unpkg.com https://jedonnemonavis.numerique.gouv.fr; connect-src 'self' https://api-adresse.data.gouv.fr https://cdn.matomo.cloud https://koumoul.com; font-src 'self'; frame-src 'none'; object-src 'none';"
+SECURITY_CSP_HEADER_VALUE="default-src 'self' https://interfaces.zapier.com https://tibot-histologe.zapier.app; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.matomo.cloud https://unpkg.com https://interfaces.zapier.com; style-src 'self' 'unsafe-inline' https://unpkg.com; img-src 'self' data: blob: https://voxusagers.numerique.gouv.fr https://*.tile.openstreetmap.org https://unpkg.com https://jedonnemonavis.numerique.gouv.fr; connect-src 'self' https://api-adresse.data.gouv.fr https://cdn.matomo.cloud https://koumoul.com https://sentry.incubateur.net; font-src 'self'; frame-src 'none'; object-src 'none';"
 CHATBOT_ENABLE=0
 MAINTENANCE_ENABLE=0
 MAINTENANCE_BANNER_ENABLE=0
 MAINTENANCE_BANNER_MESSAGE="Une opération de maintenance est prévu le XX/XX/XXXX à XX:XX. Le site sera indisponible pendant la durée de l'opération."
-
+AXIOS_TIMEOUT=30000
 ### histologe ###
 
 ### object storage S3 ###
@@ -65,8 +65,9 @@ S3_URL_BUCKET=
 
 ###> sentry/sentry-symfony ###
 SENTRY_DSN=
-SENTRY_ENVIRONMENT=
-SENTRY_TRACES_SAMPLE_RATE=
+SENTRY_DSN_FRONT=https://06f9905de7b646ec902183ce78384f18@sentry.incubateur.net/142
+SENTRY_ENVIRONMENT=prod
+SENTRY_TRACES_SAMPLE_RATE=1.0
 ###< sentry/sentry-symfony ###
 
 ### wiremock ###

.env.sample

@@ -36,11 +36,12 @@ MATOMO_SITE_ID=1
 ZAPIER_OILHI_TOKEN=
 ZAPIER_OILHI_ID=
 ZAPIER_OILHI_CREATE_AIRTABLE_RECORD_ZAP_ID=
-SECURITY_CSP_HEADER_VALUE="default-src 'self' https://interfaces.zapier.com https://tibot-histologe.zapier.app; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.matomo.cloud https://unpkg.com https://interfaces.zapier.com; style-src 'self' 'unsafe-inline' https://unpkg.com; img-src 'self' data: blob: https://voxusagers.numerique.gouv.fr https://*.tile.openstreetmap.org https://unpkg.com https://jedonnemonavis.numerique.gouv.fr; connect-src 'self' https://api-adresse.data.gouv.fr https://cdn.matomo.cloud https://koumoul.com; font-src 'self'; frame-src 'none'; object-src 'none';"
+SECURITY_CSP_HEADER_VALUE="default-src 'self' https://interfaces.zapier.com https://tibot-histologe.zapier.app; script-src 'self' 'unsafe-inline' 'unsafe-eval' https://cdn.matomo.cloud https://unpkg.com https://interfaces.zapier.com; style-src 'self' 'unsafe-inline' https://unpkg.com; img-src 'self' data: blob: https://voxusagers.numerique.gouv.fr https://*.tile.openstreetmap.org https://unpkg.com https://jedonnemonavis.numerique.gouv.fr; connect-src 'self' https://api-adresse.data.gouv.fr https://cdn.matomo.cloud https://koumoul.com https://sentry.incubateur.net; font-src 'self'; frame-src 'none'; object-src 'none';"
 CHATBOT_ENABLE=0
 MAINTENANCE_ENABLE=0
 MAINTENANCE_BANNER_ENABLE=0
 MAINTENANCE_BANNER_MESSAGE="Une opération de maintenance est prévu le XX/XX/XXXX à XX:XX. Le site sera indisponible pendant la durée de l'opération."
+AXIOS_TIMEOUT=30000
 
 ###> knplabs/knp-snappy-bundle ###
 WKHTMLTOPDF_PATH=wkhtmltopdf
@@ -69,6 +70,7 @@ S3_URL_BUCKET=
 
 ###> sentry/sentry-symfony ###
 SENTRY_DSN=
+SENTRY_DSN_FRONT=
 SENTRY_ENVIRONMENT=
 SENTRY_TRACES_SAMPLE_RATE=
 ###< sentry/sentry-symfony ###

assets/app.ts

@@ -9,8 +9,20 @@
 import './styles/histologe.scss';
 import './styles/tooltip.scss';
 
-// start the Stimulus application
-// import './bootstrap';
+import * as Sentry from '@sentry/browser';
+
+import {
+    SENTRY_DSN_FRONT,
+    SENTRY_ENVIRONMENT,
+    SENTRY_TRACES_SAMPLE_RATE
+} from'./controllers/environment'
+
+Sentry.init({
+    dsn: SENTRY_DSN_FRONT,
+    integrations: [Sentry.browserTracingIntegration()],
+    environment: SENTRY_ENVIRONMENT,
+    tracesSampleRate: SENTRY_TRACES_SAMPLE_RATE,
+});
 
 import './vue/index';
 import './vue/front-stats';
@@ -28,4 +40,3 @@ import './controllers/view_signalement';
 import './controllers/cookie_banner';
 import './controllers/maintenance_banner';
 import './controllers/activate_account/activate_account';
-

assets/controllers/environment.js

@@ -0,0 +1,11 @@
+const SENTRY_DSN_FRONT = process.env.SENTRY_DSN_FRONT
+const SENTRY_ENVIRONMENT = process.env.SENTRY_ENVIRONMENT
+const SENTRY_TRACES_SAMPLE_RATE = parseFloat(process.env.SENTRY_TRACES_SAMPLE_RATE)
+const AXIOS_TIMEOUT = parseInt(process.env.AXIOS_TIMEOUT)
+
+export {
+    SENTRY_DSN_FRONT,
+    SENTRY_ENVIRONMENT,
+    SENTRY_TRACES_SAMPLE_RATE,
+    AXIOS_TIMEOUT
+};

assets/vue/components/dashboard/requests.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { store } from './store'
+import * as Sentry from '@sentry/browser'
 
 export const requests = {
   doRequest (ajaxUrl: string, functionReturn: Function) {
@@ -10,7 +11,8 @@ export const requests = {
         functionReturn(responseData)
       })
       .catch(error => {
-        console.log(error)
+        console.error(error)
+        Sentry.captureException(new Error(error))
         functionReturn('error')
       })
   },

assets/vue/components/front-stats/requests.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { store } from './store'
+import * as Sentry from '@sentry/browser'
 
 export const requests = {
   /**
@@ -11,15 +12,13 @@ export const requests = {
     axios
       .get(ajaxUrl, { timeout: 15000 })
       .then(response => {
-        const responseData = response.data
-        console.log('then')
-        console.log(responseData)
-        functionReturn(responseData)
+          const responseData = response.data
+          functionReturn(responseData)
       })
       .catch(error => {
-        console.log('error.toJSON')
-        console.log(error)
-        functionReturn('error')
+          console.error(error)
+          Sentry.captureException(new Error(error))
+          functionReturn('error')
       })
   }
 }

assets/vue/components/signalement-form/requests.ts

@@ -1,25 +1,27 @@
 import axios from 'axios'
 import formStore from './store'
+import * as Sentry from '@sentry/browser'
+import { AXIOS_TIMEOUT } from '../../../controllers/environment'
 
 export const requests = {
-  // TODO : voir avec Emilien pour ne plus gérer via des callbacks mais faire de l'async pour rendre le code plus lisible
   doRequestGet (ajaxUrl: string, functionReturn: Function) {
     axios
-      .get(ajaxUrl, { timeout: 15000 })
+      .get(ajaxUrl, { timeout: AXIOS_TIMEOUT })
       .then(response => {
         const responseData = response.data
         functionReturn(responseData)
       })
       .catch(error => {
-        console.log(error)
+        console.error(error)
+        Sentry.captureException(new Error(error))
         functionReturn('error')
       })
   },
   doRequestPost (ajaxUrl: string, data: any, functionReturn: Function, config: any) {
     if (config !== undefined) {
-      config.timeout = 15000
+      config.timeout = AXIOS_TIMEOUT
     } else {
-      config = { timeout: 15000 }
+      config = { timeout: AXIOS_TIMEOUT }
     }
     axios
       .post(ajaxUrl, data, config)
@@ -28,19 +30,21 @@ export const requests = {
         functionReturn(responseData)
       })
       .catch(error => {
-        console.log(error)
+        console.error(error)
+        Sentry.captureException(new Error(error))
         functionReturn(error)
       })
   },
   doRequestPut (ajaxUrl: string, data: any, functionReturn: Function) {
     axios
-      .put(ajaxUrl, data, { timeout: 15000 })
+      .put(ajaxUrl, data, { timeout: AXIOS_TIMEOUT })
       .then(response => {
         const responseData = response.data
         functionReturn(responseData)
       })
       .catch(error => {
-        console.log(error)
+        console.error(error)
+        Sentry.captureException(new Error(error))
         functionReturn('error')
       })
   },

assets/vue/components/stats/requests.ts

@@ -1,5 +1,6 @@
 import axios from 'axios'
 import { store } from './store'
+import * as Sentry from '@sentry/browser'
 
 export const requests = {
   filter (functionReturn: Function) {
@@ -29,13 +30,11 @@ export const requests = {
       .post(store.props.ajaxurl, data, { timeout: 15000 })
       .then(response => {
         const responseData = response.data
-        console.log('then')
-        console.log(responseData)
         functionReturn(responseData)
       })
       .catch(error => {
-        console.log('error.toJSON')
-        console.log(error)
+        console.error(error)
+        Sentry.captureException(new Error(error))
         functionReturn('error')
       })
   }