Add telemetry with sentry.io

package.json

@@ -29,6 +29,7 @@
     "@j2only/slide-unlock": "^0.5.5",
     "@mdi/font": "^7.0.96",
     "@mdi/js": "^7.2.96",
+    "@sentry/vue": "^8.20.0",
     "@types/hammerjs": "^2.0.45",
     "@vueuse/core": "9.8.1",
     "@vueuse/math": "^10.1.2",

src/main.ts

@@ -6,6 +6,7 @@ import { library } from '@fortawesome/fontawesome-svg-core'
 import { far } from '@fortawesome/free-regular-svg-icons'
 import { fas } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome'
+import * as Sentry from '@sentry/vue'
 import FloatingVue from 'floating-vue'
 import { createPinia } from 'pinia'
 import { createApp } from 'vue'
@@ -20,6 +21,21 @@ library.add(fas, far)
 loadFonts()
 
 const app = createApp(App)
+
+// Only track usage statistics if the user has not opted out
+if (window.localStorage.getItem('cockpit-enable-usage-statistics-telemetry')) {
+  Sentry.init({
+    app,
+    dsn: 'https://24f33bd0a8e35e7505da20846dcbca92@o4507696465707008.ingest.us.sentry.io/4507696619061248',
+    integrations: [Sentry.browserTracingIntegration(), Sentry.replayIntegration()],
+    tracesSampleRate: 0.1, //  Capture 10% of the transactions
+    tracePropagationTargets: [],
+    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.
+    transport: Sentry.makeBrowserOfflineTransport(Sentry.makeFetchTransport), // Cache events and send them when the user comes back online
+  })
+}
+
 app.component('FontAwesomeIcon', FontAwesomeIcon)
 app.use(router).use(vuetify).use(createPinia()).use(FloatingVue).use(VueVirtualScroller)
 app.mount('#app')

src/stores/development.ts

@@ -6,12 +6,20 @@ import { useBlueOsStorage } from '@/composables/settingsSyncer'
 
 export const systemLoggingEnablingKey = 'cockpit-enable-system-logging'
 export const blueOsSettingsSyncEnablingKey = 'cockpit-enable-blueos-settings-sync'
+export const enableUsageStatisticsTelemetryKey = 'cockpit-enable-usage-statistics-telemetry'
 
 export const useDevelopmentStore = defineStore('development', () => {
   const developmentMode = ref(false)
   const widgetDevInfoBlurLevel = ref(3)
   const enableSystemLogging = useBlueOsStorage(systemLoggingEnablingKey, true)
   const enableBlueOsSettingsSync = useStorage(blueOsSettingsSyncEnablingKey, true)
+  const enableUsageStatisticsTelemetry = useStorage(enableUsageStatisticsTelemetryKey, true)
 
-  return { developmentMode, widgetDevInfoBlurLevel, enableSystemLogging, enableBlueOsSettingsSync }
+  return {
+    developmentMode,
+    widgetDevInfoBlurLevel,
+    enableSystemLogging,
+    enableBlueOsSettingsSync,
+    enableUsageStatisticsTelemetry,
+  }
 })

src/views/ConfigurationDevelopmentView.vue

@@ -4,7 +4,7 @@
     <template #content>
       <div
         class="max-h-[80vh] overflow-y-auto -mr-4"
-        :class="interfaceStore.isOnSmallScreen ? 'max-w-[85vw]' : 'max-w-[50vw]'"
+        :class="interfaceStore.isOnSmallScreen ? 'max-w-[85vw]' : 'max-w-[60vw]'"
       >
         <div
           class="flex flex-col justify-between items-center w-full"
@@ -26,6 +26,14 @@
               class="min-w-[155px]"
               @update:model-value="reloadCockpit"
             />
+            <v-switch
+              v-model="devStore.enableUsageStatisticsTelemetry"
+              label="Usage statistics telemetry"
+              color="white"
+              hide-details
+              class="min-w-[155px]"
+              @update:model-value="reloadCockpit"
+            />
             <v-switch
               v-model="devStore.enableSystemLogging"
               label="Enable system logging"