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"