feat(sentry): add sentry libs and init

package.json

@@ -16,6 +16,7 @@
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/vue-fontawesome": "^2.0.6",
     "@mapbox/vector-tile": "^1.3.1",
+    "@sentry/vue": "^9.10.1",
     "axios": "^0.21.1",
     "core-js": "^3.20.2",
     "csvtojson": "^2.0.10",

src/main.js

@@ -7,6 +7,8 @@ import './registerServiceWorker'; // Service worker registration
 import router from '@/router'; // Application router
 import store from '@/store'; // Vuex store for state management
 
+import * as Sentry from '@sentry/vue';
+
 // Importing CSS for styling
 import './assets/styles/base.css'; // Base styles
 import './assets/resources/semantic-ui-2.4.2/semantic.min.css'; // Semantic UI for UI components
@@ -24,6 +26,26 @@ import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'; // Font Awesome
 // Vue Multiselect CSS
 import 'vue-multiselect/dist/vue-multiselect.min.css'; // Multiselect component styles
 
+Sentry.init({
+  Vue,
+  dsn: 'https://de982b53ff2a58de08749f46c3f7f830@sentry.neogeo.fr/32',
+  integrations: [
+    Sentry.browserTracingIntegration({ router }),
+    Sentry.replayIntegration(),
+  ],
+  // Tracing
+  tracesSampleRate: 1.0, //  Capture 100% of the transactions
+  // Set 'tracePropagationTargets' to control for which URLs distributed tracing should be enabled
+  tracePropagationTargets: ['localhost', /^https:\/\/yourserver\.io\/api/],
+  // Session Replay
+  replaysSessionSampleRate: 0.1, // This sets the sample rate at 10%. You may want to change it to 100% while in development and then sample at a lower rate in production.
+  replaysOnErrorSampleRate: 1.0, // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where errors occur.
+  beforeSend(event) {
+    console.log('Event about to be sent to Sentry:', event);
+    return event;
+  }
+});
+
 // Adding Font Awesome icons to the library
 library.add(fas);
 

vue.config.js

@@ -48,6 +48,10 @@ module.exports = {
     // Add dependencies that use modern JavaScript syntax, based on encountered errors
     'ol',
     'color-rgba',
-    'color-parse'
+    'color-parse',
+    '@sentry/browser',
+    '@sentry/core',
+    '@sentry/vue',
+    '@sentry-internal'
   ]
 };