Add some initial user metric collection points (#556)

* Add some initial user metric collection points

* Fix environment mapping on Sentry.

frontend/package.json

@@ -17,6 +17,7 @@
     "@sentry/vue": "^8.13.0",
     "@tabler/icons-vue": "^3.7.0",
     "@tailwindcss/forms": "^0.5.3",
+    "@types/ua-parser-js": "^0.7.39",
     "@vitejs/plugin-vue": "^5.0.4",
     "@vueuse/components": "^10.4.1",
     "@vueuse/core": "^10.7.0",
@@ -25,6 +26,7 @@
     "pinia": "^2.1.6",
     "qalendar": "^3.7.0",
     "tailwindcss": "^3.4.3",
+    "ua-parser-js": "^1.0.38",
     "vite": "^5.0.13",
     "vue": "^3.2.13",
     "vue-i18n": "^9.2.2",

frontend/src/main.ts

@@ -1,6 +1,7 @@
 // init app
 import App from '@/App.vue';
 import { createApp } from 'vue';
+import { getPreferredTheme } from '@/utils';
 
 // pinia state management
 import { createPinia } from 'pinia';
@@ -18,21 +19,34 @@ import '@/assets/styles/main.css';
 // init sentry
 // eslint-disable-next-line import/no-extraneous-dependencies
 import * as Sentry from '@sentry/vue';
+import UAParser from 'ua-parser-js';
 
 const app = createApp(App);
+const useSentry = !!import.meta.env.VITE_SENTRY_DSN;
 
-if (import.meta.env.VITE_SENTRY_DSN) {
+// The modes we use -> short names for sorting
+const environmentMap = {
+  // Development is used by vite in dev mode...
+  development: 'dev',
+  // We set these correctly :)
+  stage: 'stage',
+  prod: 'prod',
+};
+const environment = environmentMap[import.meta.env.MODE] ?? 'unknown';
+
+if (useSentry) {
   Sentry.init({
     app,
+    environment,
     dsn: import.meta.env.VITE_SENTRY_DSN,
     integrations: [
       Sentry.browserTracingIntegration({
         // Set `tracePropagationTargets` to control for which URLs distributed tracing should be enabled
-        tracePropagationTargets: ['localhost', 'stage.appointment.day'],
         router,
       }),
       Sentry.replayIntegration(),
     ],
+
     // Performance Monitoring
     // Capture 100% of the transactions, reduce in production!
     tracesSampleRate: 1.0,
@@ -43,12 +57,12 @@ if (import.meta.env.VITE_SENTRY_DSN) {
     // If you're not already sampling the entire session, change the sample rate to 100% when sampling sessions where
     // errors occur.
     replaysOnErrorSampleRate: 1.0,
+    tracePropagationTargets: ['localhost:8080', 'stage.appointment.day'],
   });
 }
 
 const pinia = createPinia();
 app.use(pinia);
-
 app.use(router);
 
 // init urls
@@ -62,5 +76,34 @@ const loc = localStorage?.getItem('locale') ?? navigator.language;
 app.use(i18ninstance);
 useDayJS(app, loc);
 
+if (useSentry) {
+  /**
+   * Metric collection for development purposes.
+   * This data will be used to help guide development, design, and user experience decisions.
+   */
+  const parser = new UAParser(navigator.userAgent);
+  const browser = parser.getBrowser();
+  const os = parser.getOS();
+  const device = parser.getDevice();
+  const deviceRes = `${window?.screen?.width ?? -1}x${window?.screen?.height ?? -1}`;
+  const effectiveDeviceRes = `${window?.screen?.availWidth ?? -1}x${window?.screen?.availHeight ?? -1}`;
+
+  Sentry.metrics.increment('page_load', 1, {
+    tags: {
+      browser: browser.name,
+      browserVersion: `${browser.name}:${browser.version}`,
+      os: os.name,
+      osVersion: `${os.name}:${os.version}`,
+      device: device.model,
+      deviceModel: `${device.vendor}:${device.model}`,
+      resolution: deviceRes,
+      effectiveResolution: effectiveDeviceRes,
+      userAgent: navigator.userAgent,
+      locale: loc,
+      theme: getPreferredTheme(),
+    },
+  });
+}
+
 // ready? let's go!
 app.mount('#app');