Add event tracking with PostHog

package.json

@@ -53,6 +53,7 @@
     "localforage": "^1.10.0",
     "mathjs": "^13.0.3",
     "pinia": "^2.0.13",
+    "posthog-js": "^1.194.3",
     "roboto-fontface": "*",
     "semver": "^7.5.4",
     "slugify": "^1.6.6",

src/libs/external-telemetry/event-tracking.ts

@@ -0,0 +1,105 @@
+import ky from 'ky'
+import localforage from 'localforage'
+import posthog from 'posthog-js'
+
+type EventPayload = {
+  /**
+   * The name of the event
+   */
+  eventName: string
+  /**
+   * The moment the event was captured (in milliseconds since epoch)
+   */
+  timestamp: number
+  /**
+   * Arbitrary properties to be recorded with the event
+   */
+  properties?: Record<string, unknown>
+}
+
+/**
+ *
+ */
+class EventTracker {
+  static postHogApiUrl = 'https://us.i.posthog.com'
+  static postHogApiKey = 'phc_SfqVeZcpYHmhUn9NRizThxFxiI9fKqvjRjmBDB8ToRs'
+  static posthog: ReturnType<typeof posthog.init> | undefined = undefined
+  eventTrackingQueue: LocalForage
+
+  /**
+   * Initialize the event tracking system
+   */
+  constructor() {
+    if (!EventTracker.posthog) {
+      EventTracker.posthog = posthog.init(EventTracker.postHogApiKey, {
+        api_host: EventTracker.postHogApiUrl,
+        person_profiles: 'always', // Create profiles for anonymous users as well
+      })
+    }
+
+    if (!this.eventTrackingQueue) {
+      this.eventTrackingQueue = localforage.createInstance({
+        driver: localforage.INDEXEDDB,
+        name: 'Cockpit - Event-tracking Queue',
+        storeName: 'cockpit-event-tracking-queue',
+        version: 1.0,
+        description: 'Queue of events to be sent to the event tracking system.',
+      })
+    }
+
+    this.sendEvents()
+  }
+
+  /**
+   * Capture an event
+   * @param {string} eventName - The name of the event
+   * @param {Record<string, unknown>} eventProperties - The properties of the event
+   */
+  async capture(eventName: string, eventProperties?: Record<string, unknown>): Promise<void> {
+    const eventId = `${eventName}-${Date.now()}`
+    const eventPayload: EventPayload = {
+      eventName,
+      timestamp: Date.now(),
+      properties: eventProperties,
+    }
+    await this.eventTrackingQueue.setItem(eventId, eventPayload)
+    await this.sendEvents()
+  }
+
+  /**
+   * Send all events in the queue to the event tracking system
+   */
+  async sendEvents(): Promise<void> {
+    const queuedEventsKeys = await this.eventTrackingQueue.keys()
+    const successfullySentEventsKeys: string[] = []
+
+    for (const eventId of queuedEventsKeys) {
+      const eventPayload = await this.eventTrackingQueue.getItem<EventPayload>(eventId)
+      if (!eventPayload) continue
+
+      try {
+        const body = {
+          api_key: EventTracker.postHogApiKey,
+          event: eventPayload.eventName,
+          properties: eventPayload.properties,
+          timestamp: eventPayload.timestamp,
+          distinct_id: EventTracker.posthog?.get_distinct_id(),
+        }
+
+        await ky.post(`${EventTracker.postHogApiUrl}/capture/`, { json: body, mode: 'no-cors', throwHttpErrors: false })
+        successfullySentEventsKeys.push(eventId)
+        console.log('Event sent successfully:', eventId)
+      } catch (error) {
+        console.error('Error sending event to PostHog:', error)
+        break
+      }
+    }
+
+    for (const eventId of successfullySentEventsKeys) {
+      await this.eventTrackingQueue.removeItem(eventId)
+    }
+  }
+}
+
+const eventTracker = new EventTracker()
+export default eventTracker

src/main.ts

@@ -13,6 +13,7 @@ import { createApp } from 'vue'
 import VueVirtualScroller from 'vue-virtual-scroller'
 
 import { app_version } from '@/libs/cosmos'
+import eventTracker from '@/libs/external-telemetry/event-tracking'
 
 import App from './App.vue'
 import vuetify from './plugins/vuetify'
@@ -25,6 +26,8 @@ loadFonts()
 
 const app = createApp(App)
 
+eventTracker.capture('App started')
+
 // Initialize Sentry for error tracking
 // Only track usage statistics if the user has not opted out and the app is not in development mode
 if (window.localStorage.getItem('cockpit-enable-usage-statistics-telemetry') && import.meta.env.DEV === false) {

src/stores/mainVehicle.ts

@@ -1,4 +1,5 @@
 import { useStorage, useTimestamp, watchThrottled } from '@vueuse/core'
+import { differenceInSeconds } from 'date-fns'
 import { defineStore } from 'pinia'
 import { v4 as uuid } from 'uuid'
 import { computed, reactive, ref, watch } from 'vue'
@@ -18,6 +19,7 @@ import { ConnectionManager } from '@/libs/connection/connection-manager'
 import type { Package } from '@/libs/connection/m2r/messages/mavlink2rest'
 import { MavAutopilot, MAVLinkType, MavType } from '@/libs/connection/m2r/messages/mavlink2rest-enum'
 import type { Message } from '@/libs/connection/m2r/messages/mavlink2rest-message'
+import eventTracker from '@/libs/external-telemetry/event-tracking'
 import { availableCockpitActions, registerActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
 import { MavlinkManualControlManager } from '@/libs/joystick/protocols/mavlink-manual-control'
 import type { ArduPilot } from '@/libs/vehicle/ardupilot/ardupilot'
@@ -121,6 +123,7 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
   const genericVariables: Record<string, unknown> = reactive({})
   const availableGenericVariables = ref<string[]>([])
   const usedGenericVariables = ref<string[]>([])
+  const vehicleArmingTime = ref<Date | undefined>(undefined)
 
   const mode = ref<string | undefined>(undefined)
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
@@ -387,7 +390,19 @@ export const useMainVehicleStore = defineStore('main-vehicle', () => {
       Object.assign(attitude, newAttitude)
     })
     mainVehicle.value.onArm.add((armed: boolean) => {
+      const wasArmed = isArmed.value
       isArmed.value = armed
+
+      // If the vehicle was already in the desired state or it's the first time we are checking, do not capture an event
+      if (wasArmed === undefined || wasArmed === armed) return
+
+      if (armed) {
+        vehicleArmingTime.value = new Date()
+        eventTracker.capture('Vehicle armed')
+      } else {
+        const armDurationInSeconds = differenceInSeconds(new Date(), vehicleArmingTime.value ?? new Date())
+        eventTracker.capture('Vehicle disarmed', { armDurationInSeconds })
+      }
     })
     mainVehicle.value.onTakeoff.add((inAir: boolean) => {
       flying.value = inAir

src/stores/omniscientLogger.ts

@@ -1,5 +1,6 @@
 import { WebRTCStats } from '@peermetrics/webrtc-stats'
 import { useDocumentVisibility } from '@vueuse/core'
+import { differenceInSeconds } from 'date-fns'
 import { defineStore } from 'pinia'
 import { ref, watch } from 'vue'
 
@@ -8,6 +9,7 @@ import {
   createCockpitActionVariable,
   setCockpitActionVariableData,
 } from '@/libs/actions/data-lake'
+import eventTracker from '@/libs/external-telemetry/event-tracking'
 import { WebRTCStatsEvent, WebRTCVideoStat } from '@/types/video'
 
 import { useVideoStore } from './video'
@@ -275,6 +277,12 @@ export const useOmniscientLoggerStore = defineStore('omniscient-logger', () => {
     }
   })
 
+  // Routine to send a ping event to the event tracking system every 5 minutes
+  const initialTimestamp = new Date()
+  setInterval(() => {
+    eventTracker.capture('Ping', { runningTimeInSeconds: differenceInSeconds(new Date(), initialTimestamp) })
+  }, 1000 * 60 * 5)
+
   return {
     streamsFrameRateHistory,
     appFrameRateHistory,

src/stores/video.ts

@@ -14,6 +14,7 @@ import { useBlueOsStorage } from '@/composables/settingsSyncer'
 import { useSnackbar } from '@/composables/snackbar'
 import { WebRTCManager } from '@/composables/webRTC'
 import { getIpsInformationFromVehicle } from '@/libs/blueos'
+import eventTracker from '@/libs/external-telemetry/event-tracking'
 import { availableCockpitActions, registerActionCallback } from '@/libs/joystick/protocols/cockpit-actions'
 import { datalogger } from '@/libs/sensors-logging'
 import { isEqual, sleep } from '@/libs/utils'
@@ -190,6 +191,10 @@ export const useVideoStore = defineStore('video', () => {
   const stopRecording = (streamName: string): void => {
     if (activeStreams.value[streamName] === undefined) activateStream(streamName)
 
+    const timeRecordingStart = activeStreams.value[streamName]?.timeRecordingStart
+    const durationInSeconds = timeRecordingStart ? differenceInSeconds(new Date(), timeRecordingStart) : undefined
+    eventTracker.capture('Video recording stop', { streamName, durationInSeconds })
+
     activeStreams.value[streamName]!.timeRecordingStart = undefined
 
     activeStreams.value[streamName]!.mediaRecorder!.stop()
@@ -249,6 +254,7 @@ export const useVideoStore = defineStore('video', () => {
    * @param {string} streamName - Name of the stream
    */
   const startRecording = async (streamName: string): Promise<void> => {
+    eventTracker.capture('Video recording start', { streamName: streamName })
     if (activeStreams.value[streamName] === undefined) activateStream(streamName)
 
     if (namesAvailableStreams.value.isEmpty()) {