diff --git a/images/chromium-headful/client/public/index.html b/images/chromium-headful/client/public/index.html
index b9546790..56b49c3a 100644
--- a/images/chromium-headful/client/public/index.html
+++ b/images/chromium-headful/client/public/index.html
@@ -13,6 +13,37 @@
     <meta name="msapplication-TileColor" content="#19bd9c">
     <meta name="theme-color" content="#19bd9c">
     <style> /* weird iOS bug, if this is not set right here, video just does not start */ .video-container { width: 100%; height: 100%; } </style>
+    <!--
+      Telemetry Configuration (2 flags only):
+
+      TELEMETRY_ENDPOINT - If set, telemetry is enabled and sends to this URL.
+                           If not set, telemetry is disabled.
+      TELEMETRY_CAPTURE  - Comma-separated event types (defaults to 'all')
+
+      Usage with Docker:
+        docker run -e TELEMETRY_ENDPOINT=https://api.example.com/telemetry ...
+        docker run -e TELEMETRY_ENDPOINT=https://api.example.com/telemetry -e TELEMETRY_CAPTURE='error_*,perf_fps' ...
+
+      Usage with Kraft:
+        kraft run -e TELEMETRY_ENDPOINT=https://api.example.com/telemetry ...
+
+      Query parameters (for testing):
+        ?telemetry_endpoint=https://example.com/telemetry&telemetry_capture=error_*
+
+      TELEMETRY_CAPTURE format:
+        - 'all' (default): Capture all events
+        - 'none': Capture no events
+        - Specific: 'error_js,perf_fps,stream_play_started'
+        - Wildcards: 'error_*,perf_*'
+        - Exclusions: 'all,-perf_*,-stream_*'
+
+      Event types: session_*, app_*, error_*, perf_*, connection_*, action_*, stream_*
+    -->
+    <script>
+      // Runtime telemetry configuration - set by telemetry-config.js (generated at container startup)
+      window.__NEKO_TELEMETRY_CONFIG__ = {};
+    </script>
+    <script src="telemetry-config.js" onerror=""></script>
   </head>
   <body>
     <noscript>
diff --git a/images/chromium-headful/client/src/components/video.vue b/images/chromium-headful/client/src/components/video.vue
index 4c4fe0f8..63e6eefd 100644
--- a/images/chromium-headful/client/src/components/video.vue
+++ b/images/chromium-headful/client/src/components/video.vue
@@ -220,6 +220,7 @@
   import { Component, Ref, Watch, Vue, Prop } from 'vue-property-decorator'
   import ResizeObserver from 'resize-observer-polyfill'
   import { elementRequestFullscreen, onFullscreenChange, isFullscreen, lockKeyboard, unlockKeyboard } from '~/utils'
+  import { getConnectionCollector, getTelemetry } from '~/telemetry'
 
   import Emote from './emote.vue'
   import Resolution from './resolution.vue'
@@ -480,13 +481,23 @@
       this.observer.observe(this._component)
 
       onFullscreenChange(this._player, () => {
+        const wasFullscreen = this.fullscreen
         this.fullscreen = isFullscreen()
         this.fullscreen ? lockKeyboard() : unlockKeyboard()
         this.onResize()
+
+        // Track fullscreen state change
+        if (wasFullscreen && !this.fullscreen) {
+          getConnectionCollector().trackFullscreen(false)
+        }
       })
 
       this._video.addEventListener('canplaythrough', () => {
         this.$accessor.video.setPlayable(true)
+
+        // Track video ready for playback
+        getConnectionCollector().trackStreamTrackAdded('video', 'main')
+
         if (this.autoplay) {
           this.$nextTick(() => {
             this.$accessor.video.play()
@@ -496,20 +507,38 @@
 
       this._video.addEventListener('ended', () => {
         this.$accessor.video.setPlayable(false)
+        getTelemetry().track('stream_play_started', 'info', { ended: true })
       })
 
       this._video.addEventListener('error', (event) => {
         this.$log.error(event.error)
         this.$accessor.video.setPlayable(false)
+
+        // Track video error
+        if (event.error) {
+          getConnectionCollector().trackStreamPlayFailed(event.error)
+        } else {
+          getTelemetry().track('stream_play_failed', 'error', {
+            message: 'Video playback error',
+            code: this._video.error?.code,
+            mediaError: this._video.error?.message,
+          })
+        }
       })
 
       this._video.addEventListener('volumechange', () => {
         this.$accessor.video.setMuted(this._video.muted)
         this.$accessor.video.setVolume(this._video.volume * 100)
+
+        // Track volume change
+        getConnectionCollector().trackVolumeChange(this._video.volume * 100, this._video.muted)
       })
 
       this._video.addEventListener('playing', () => {
         this.$accessor.video.play()
+
+        // Track video started playing
+        getConnectionCollector().trackStreamPlayStarted()
       })
 
       this._video.addEventListener('pause', () => {
@@ -633,22 +662,32 @@
         return
       }
 
+      // Track control toggle action
+      if (this.hosting) {
+        getConnectionCollector().trackControlRelease()
+      } else {
+        getConnectionCollector().trackControlRequest()
+      }
+
       this.$accessor.remote.toggle()
     }
 
     requestControl() {
+      getConnectionCollector().trackControlRequest()
       this.$accessor.remote.request()
     }
 
     requestFullscreen() {
       // try to fullscreen player element
       if (elementRequestFullscreen(this._player)) {
+        getConnectionCollector().trackFullscreen(true)
         this.onResize()
         return
       }
 
       // fallback to fullscreen video itself (on mobile devices)
       if (elementRequestFullscreen(this._video)) {
+        getConnectionCollector().trackFullscreen(true)
         this.onResize()
         return
       }
@@ -657,6 +696,7 @@
     requestPictureInPicture() {
       //@ts-ignore
       this._video.requestPictureInPicture()
+      getConnectionCollector().trackPictureInPicture(true)
       this.onResize()
     }
 
diff --git a/images/chromium-headful/client/src/main.ts b/images/chromium-headful/client/src/main.ts
index fd890143..11d577bf 100644
--- a/images/chromium-headful/client/src/main.ts
+++ b/images/chromium-headful/client/src/main.ts
@@ -9,6 +9,7 @@ import Client from './plugins/neko'
 import Axios from './plugins/axios'
 import Swal from './plugins/swal'
 import Anime from './plugins/anime'
+import Telemetry, { installTelemetryConnectionCollector } from './plugins/telemetry'
 
 import { i18n } from './plugins/i18n'
 import store from './store'
@@ -16,6 +17,9 @@ import app from './app.vue'
 
 Vue.config.productionTip = false
 
+// Install telemetry first to capture any errors during plugin initialization
+Vue.use(Telemetry)
+
 Vue.use(Logger)
 Vue.use(Notifications)
 Vue.use(ToolTip)
@@ -31,5 +35,8 @@ new Vue({
   created() {
     this.$client.init(this)
     this.$accessor.initialise()
+
+    // Install telemetry connection collector after client is initialized
+    installTelemetryConnectionCollector(this.$client)
   },
 }).$mount('#neko')
diff --git a/images/chromium-headful/client/src/neko/index.ts b/images/chromium-headful/client/src/neko/index.ts
index b0fb9397..b8a4068f 100644
--- a/images/chromium-headful/client/src/neko/index.ts
+++ b/images/chromium-headful/client/src/neko/index.ts
@@ -4,6 +4,7 @@ import { BaseClient, BaseEvents } from './base'
 import { Member } from './types'
 import { EVENT } from './events'
 import { accessor } from '~/store'
+import { getConnectionCollector, getTelemetry } from '~/telemetry'
 
 import {
   SystemMessagePayload,
@@ -139,6 +140,16 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
     this.$accessor.remote.setImplicitHosting(implicit_hosting)
     this.$accessor.remote.setFileTransfer(file_transfer)
 
+    // Track server initialization with telemetry
+    getTelemetry().track('connection_webrtc_connected', 'info', {
+      serverInitComplete: true,
+      implicitHosting: implicit_hosting,
+      fileTransferEnabled: file_transfer,
+      heartbeatInterval: heartbeat_interval,
+      locksConfigured: Object.keys(locks).length,
+      timestamp: Date.now(),
+    })
+
     for (const resource in locks) {
       this[EVENT.ADMIN.LOCK]({
         event: EVENT.ADMIN.LOCK,
@@ -157,11 +168,20 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   }
 
   protected [EVENT.SYSTEM.DISCONNECT]({ message }: SystemMessagePayload) {
-    if (message == 'kicked') {
+    const wasKicked = message == 'kicked'
+    if (wasKicked) {
       this.$accessor.logout()
       message = this.$vue.$t('connection.kicked') as string
     }
 
+    // Track disconnect with telemetry
+    getTelemetry().track('connection_webrtc_disconnected', wasKicked ? 'warning' : 'info', {
+      reason: message,
+      wasKicked,
+      serverInitiated: true,
+      timestamp: Date.now(),
+    })
+
     this.onDisconnected(new Error(message))
 
     this.$vue.$swal({
@@ -173,6 +193,14 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   }
 
   protected [EVENT.SYSTEM.ERROR]({ title, message }: SystemMessagePayload) {
+    // Track system error with telemetry
+    getTelemetry().track('error_websocket', 'error', {
+      title,
+      message,
+      serverInitiated: true,
+      timestamp: Date.now(),
+    })
+
     this.$vue.$swal({
       title,
       text: message,
@@ -384,6 +412,9 @@ export class NekoClient extends BaseClient implements EventEmitter<NekoEvents> {
   protected [EVENT.SCREEN.RESOLUTION]({ id, width, height, rate }: ScreenResolutionPayload) {
     this.$accessor.video.setResolution({ width, height, rate })
 
+    // Track resolution change via telemetry
+    getConnectionCollector().trackResolutionChange(width, height, rate)
+
     if (!id) {
       return
     }
diff --git a/images/chromium-headful/client/src/plugins/neko.ts b/images/chromium-headful/client/src/plugins/neko.ts
index 90f294ee..c8cf09f1 100644
--- a/images/chromium-headful/client/src/plugins/neko.ts
+++ b/images/chromium-headful/client/src/plugins/neko.ts
@@ -1,5 +1,6 @@
 import { PluginObject } from 'vue'
 import { NekoClient } from '~/neko'
+import { getTelemetry, getConnectionCollector } from '~/telemetry'
 
 declare global {
   const $client: NekoClient
@@ -18,10 +19,44 @@ declare module 'vue/types/vue' {
 const plugin: PluginObject<undefined> = {
   install(Vue) {
     window.$client = new NekoClient()
-      .on('error', window.$log.error)
-      .on('warn', window.$log.warn)
-      .on('info', window.$log.info)
-      .on('debug', window.$log.debug)
+      .on('error', (error: Error) => {
+        window.$log.error(error)
+        // Track errors via telemetry
+        getTelemetry().track('error_webrtc', 'error', undefined, {
+          error: {
+            message: error.message,
+            errorType: error.name || 'WebRTCError',
+            stack: error.stack,
+          },
+        })
+      })
+      .on('warn', (...args: unknown[]) => {
+        window.$log.warn(...args)
+      })
+      .on('info', (...args: unknown[]) => {
+        window.$log.info(...args)
+        // Track connection-related info events
+        const message = args.join(' ')
+        if (message.includes('connected') || message.includes('disconnected')) {
+          getTelemetry().track('connection_webrtc_connected', 'debug', {
+            message,
+            timestamp: Date.now(),
+          })
+        }
+      })
+      .on('debug', (...args: unknown[]) => {
+        window.$log.debug(...args)
+        // Parse debug messages for connection state changes
+        const message = args.join(' ')
+
+        // Track WebSocket connection URL
+        if (message.includes('connecting to')) {
+          const url = message.match(/connecting to (\S+)/)?.[1]
+          if (url) {
+            getConnectionCollector().setServerInfo({ url })
+          }
+        }
+      })
 
     Vue.prototype.$client = window.$client
   },
diff --git a/images/chromium-headful/client/src/plugins/telemetry.ts b/images/chromium-headful/client/src/plugins/telemetry.ts
new file mode 100644
index 00000000..3c8e4600
--- /dev/null
+++ b/images/chromium-headful/client/src/plugins/telemetry.ts
@@ -0,0 +1,197 @@
+// Telemetry Vue Plugin - Integrates telemetry with Vue app lifecycle
+
+import { PluginObject } from 'vue'
+import {
+  TelemetryConfig,
+  DEFAULT_TELEMETRY_CONFIG,
+  initTelemetry,
+  getTelemetry,
+  installErrorCollector,
+  installPerformanceCollector,
+  installConnectionCollector,
+  getConnectionCollector,
+  TelemetryService,
+} from '~/telemetry'
+import { NekoClient } from '~/neko'
+
+// Runtime configuration interface
+// Only 2 flags:
+//   - endpoint: If set, telemetry is enabled and sends to this URL
+//   - capture: Comma-separated event types (defaults to 'all')
+interface RuntimeTelemetryConfig {
+  endpoint?: string
+  capture?: string // comma-separated event types or 'all'
+}
+
+// Global window augmentation for runtime config
+declare global {
+  interface Window {
+    __NEKO_TELEMETRY_CONFIG__?: RuntimeTelemetryConfig
+    $telemetry: TelemetryService
+  }
+}
+
+declare module 'vue/types/vue' {
+  interface Vue {
+    $telemetry: TelemetryService
+  }
+}
+
+/**
+ * Get telemetry configuration from multiple sources:
+ * 1. Build-time environment variables (VUE_APP_TELEMETRY_ENDPOINT, VUE_APP_TELEMETRY_CAPTURE)
+ * 2. Runtime window config (window.__NEKO_TELEMETRY_CONFIG__)
+ * 3. Query parameters (?telemetry_endpoint=...&telemetry_capture=...)
+ *
+ * Priority: Query params > Window config > Env vars > Defaults
+ *
+ * Only 2 configuration options:
+ *   - TELEMETRY_ENDPOINT: If set, telemetry is enabled and sends to this URL
+ *   - TELEMETRY_CAPTURE: Comma-separated event types (defaults to 'all')
+ */
+function getTelemetryConfig(): Partial<TelemetryConfig> {
+  const config: Partial<TelemetryConfig> = {}
+
+  let endpoint: string | undefined
+  let captureSpec: string | undefined
+
+  // 1. Build-time environment variables (lowest priority)
+  const envEndpoint = process.env.VUE_APP_TELEMETRY_ENDPOINT
+  const envCapture = process.env.VUE_APP_TELEMETRY_CAPTURE
+
+  if (envEndpoint) {
+    endpoint = envEndpoint
+  }
+  if (envCapture) {
+    captureSpec = envCapture
+  }
+
+  // 2. Runtime window configuration (medium priority)
+  const windowConfig = window.__NEKO_TELEMETRY_CONFIG__
+  if (windowConfig) {
+    if (windowConfig.endpoint) {
+      endpoint = windowConfig.endpoint
+    }
+    if (windowConfig.capture) {
+      captureSpec = windowConfig.capture
+    }
+  }
+
+  // 3. Query parameters (highest priority)
+  const urlParams = new URLSearchParams(window.location.search)
+  const paramEndpoint = urlParams.get('telemetry_endpoint')
+  const paramCapture = urlParams.get('telemetry_capture')
+
+  if (paramEndpoint) {
+    endpoint = paramEndpoint
+  }
+  if (paramCapture) {
+    captureSpec = paramCapture
+  }
+
+  // Set config: enabled is determined by whether endpoint is set
+  if (endpoint) {
+    config.enabled = true
+    config.endpoint = endpoint
+  } else {
+    config.enabled = false
+  }
+
+  // Set capture spec (defaults to 'all')
+  if (captureSpec) {
+    config.capture = captureSpec
+  }
+
+  return config
+}
+
+const plugin: PluginObject<undefined> = {
+  install(Vue) {
+    // Get merged configuration
+    const config = getTelemetryConfig()
+
+    // Always log telemetry status on startup
+    if (config.enabled) {
+      console.log('[Telemetry] ENABLED - sending to:', config.endpoint)
+      console.log('[Telemetry] Capture:', config.capture ?? 'all')
+    } else {
+      console.log('[Telemetry] DISABLED (no endpoint configured)')
+    }
+
+    // Debug: show config sources
+    if (process.env.NODE_ENV === 'development') {
+      console.log('[Telemetry] Config sources:', {
+        env: { VUE_APP_TELEMETRY_ENDPOINT: process.env.VUE_APP_TELEMETRY_ENDPOINT },
+        window: window.__NEKO_TELEMETRY_CONFIG__,
+        queryParams: window.location.search,
+      })
+    }
+
+    // Initialize telemetry service
+    const telemetry = initTelemetry(config)
+
+    // Make telemetry available globally
+    window.$telemetry = telemetry
+    Vue.prototype.$telemetry = telemetry
+
+    // Only install collectors if telemetry is enabled
+    if (telemetry.getConfig().enabled) {
+      // Install error collector (captures JS errors, Vue errors, network errors)
+      installErrorCollector()
+
+      // Install performance collector (Core Web Vitals, FPS, memory)
+      installPerformanceCollector()
+
+      // Track app ready when Vue is mounted
+      let appReadyTracked = false
+      Vue.mixin({
+        mounted() {
+          // Only track once for the first mount
+          if (!appReadyTracked) {
+            appReadyTracked = true
+            getTelemetry().track('app_ready', 'info', {
+              mountTime: Date.now(),
+            })
+          }
+        },
+      })
+    }
+  },
+}
+
+/**
+ * Install connection collector after neko client is initialized.
+ * Call this in the app after $client is available.
+ */
+export function installTelemetryConnectionCollector(client: NekoClient): void {
+  const telemetry = getTelemetry()
+  if (!telemetry.getConfig().enabled) {
+    return
+  }
+
+  // Cast to any to work around strict type checking on EventEmitter
+  installConnectionCollector(client as unknown as Parameters<typeof installConnectionCollector>[0])
+
+  // Track login/logout actions
+  const originalLogin = client.login.bind(client)
+  const originalLogout = client.logout.bind(client)
+
+  client.login = function (password: string, displayname: string) {
+    getConnectionCollector().trackLogin(displayname)
+    return originalLogin(password, displayname)
+  }
+
+  client.logout = function () {
+    getConnectionCollector().trackLogout()
+    return originalLogout()
+  }
+}
+
+/**
+ * Get the current telemetry configuration that was used.
+ */
+export function getTelemetryConfigUsed(): TelemetryConfig {
+  return getTelemetry().getConfig()
+}
+
+export default plugin
diff --git a/images/chromium-headful/client/src/telemetry/collectors/connection.ts b/images/chromium-headful/client/src/telemetry/collectors/connection.ts
new file mode 100644
index 00000000..c9e9cd57
--- /dev/null
+++ b/images/chromium-headful/client/src/telemetry/collectors/connection.ts
@@ -0,0 +1,441 @@
+// Connection Collector - WebRTC/WebSocket connection telemetry for neko client
+
+import { getTelemetry } from '../service'
+import { ConnectionMetrics, TelemetryEventType } from '../types'
+
+interface NekoClientLike {
+  on: (event: string, handler: (...args: unknown[]) => void) => NekoClientLike
+  off?: (event: string, handler: (...args: unknown[]) => void) => NekoClientLike
+  socketOpen?: boolean
+  peerConnected?: boolean
+  connected?: boolean
+  id?: string
+  _peer?: RTCPeerConnection
+  _ws?: WebSocket
+}
+
+interface ServerInfo {
+  url: string
+  version?: string
+  ice?: RTCIceServer[]
+  lite?: boolean
+}
+
+class ConnectionCollector {
+  private isInstalled = false
+  private client: NekoClientLike | null = null
+  private serverInfo: ServerInfo | null = null
+  private connectionStartTime: number | null = null
+  private reconnectAttempts = 0
+  private lastState: string = 'disconnected'
+  private statsDumpInterval: number | null = null
+
+  // Event handlers (bound) - using loose typing for EventEmitter compatibility
+  private onConnecting = () => this.handleConnecting()
+  private onConnected = () => this.handleConnected()
+  private onDisconnected = (...args: unknown[]) => this.handleDisconnected(args[0] as Error | undefined)
+  private onReconnecting = () => this.handleReconnecting()
+  private onError = (...args: unknown[]) => this.handleError(args[0] as Error)
+  private onDebug = (...args: unknown[]) => this.handleDebug(...args)
+
+  install(client: NekoClientLike): void {
+    if (this.isInstalled) {
+      return
+    }
+
+    this.isInstalled = true
+    this.client = client
+
+    // Attach to client events
+    client.on('connecting', this.onConnecting)
+    client.on('connected', this.onConnected)
+    client.on('disconnected', this.onDisconnected)
+    client.on('reconnecting', this.onReconnecting)
+    client.on('error', this.onError)
+    client.on('debug', this.onDebug)
+
+    // Start periodic stats collection
+    this.startStatsCollection()
+  }
+
+  setServerInfo(info: Partial<ServerInfo>): void {
+    this.serverInfo = { ...this.serverInfo, ...info } as ServerInfo
+  }
+
+  private handleConnecting(): void {
+    this.connectionStartTime = Date.now()
+    this.lastState = 'connecting'
+
+    const telemetry = getTelemetry()
+    telemetry.trackConnection(
+      {
+        state: 'connecting',
+        reconnectAttempts: this.reconnectAttempts,
+      },
+      'connection_webrtc_connecting',
+    )
+
+    // Also track server info if available
+    if (this.serverInfo) {
+      telemetry.track('connection_webrtc_connecting', 'info', {
+        serverUrl: this.serverInfo.url,
+        iceLite: this.serverInfo.lite,
+        iceServersCount: this.serverInfo.ice?.length || 0,
+      })
+    }
+  }
+
+  private handleConnected(): void {
+    const connectionDuration = this.connectionStartTime ? Date.now() - this.connectionStartTime : undefined
+    this.lastState = 'connected'
+
+    const telemetry = getTelemetry()
+    const metrics: ConnectionMetrics = {
+      state: 'connected',
+      previousState: 'connecting',
+      duration: connectionDuration,
+      reconnectAttempts: this.reconnectAttempts,
+    }
+
+    // Get ICE state if available
+    if (this.client?._peer) {
+      metrics.iceConnectionState = this.client._peer.iceConnectionState
+      metrics.iceGatheringState = this.client._peer.iceGatheringState
+      metrics.signalingState = this.client._peer.signalingState
+    }
+
+    telemetry.trackConnection(metrics, 'connection_webrtc_connected')
+
+    // Track successful connection with server info
+    telemetry.track('connection_webrtc_connected', 'info', {
+      connectionTimeMs: connectionDuration,
+      reconnectAttempts: this.reconnectAttempts,
+      clientId: this.client?.id,
+      serverUrl: this.serverInfo?.url,
+    })
+
+    // Reset reconnect attempts on successful connection
+    this.reconnectAttempts = 0
+  }
+
+  private handleDisconnected(reason?: Error): void {
+    const previousState = this.lastState
+    this.lastState = 'disconnected'
+
+    const telemetry = getTelemetry()
+    const metrics: ConnectionMetrics = {
+      state: 'disconnected',
+      previousState,
+      reconnectAttempts: this.reconnectAttempts,
+    }
+
+    // Determine the event type based on whether it was a failure
+    const eventType: TelemetryEventType = reason ? 'connection_webrtc_failed' : 'connection_webrtc_disconnected'
+
+    telemetry.trackConnection(metrics, eventType)
+
+    // Track detailed disconnect info
+    telemetry.track(
+      eventType,
+      reason ? 'error' : 'info',
+      {
+        reason: reason?.message || 'User initiated or server closed',
+        previousState,
+        reconnectAttempts: this.reconnectAttempts,
+        serverUrl: this.serverInfo?.url,
+      },
+      reason
+        ? {
+            error: {
+              message: reason.message,
+              errorType: reason.name || 'ConnectionError',
+              stack: reason.stack,
+            },
+          }
+        : undefined,
+    )
+  }
+
+  private handleReconnecting(): void {
+    this.reconnectAttempts++
+    this.lastState = 'reconnecting'
+
+    const telemetry = getTelemetry()
+    telemetry.trackConnection(
+      {
+        state: 'reconnecting',
+        previousState: 'disconnected',
+        reconnectAttempts: this.reconnectAttempts,
+      },
+      'connection_reconnecting',
+    )
+  }
+
+  private handleError(error: Error): void {
+    const telemetry = getTelemetry()
+
+    // Determine if this is a WebSocket or WebRTC error
+    const isWebSocketError = error.message?.toLowerCase().includes('websocket')
+    const eventType: TelemetryEventType = isWebSocketError ? 'error_websocket' : 'error_webrtc'
+
+    telemetry.track(eventType, 'error', {
+      currentState: this.lastState,
+      reconnectAttempts: this.reconnectAttempts,
+    }, {
+      error: {
+        message: error.message,
+        errorType: error.name || 'ConnectionError',
+        stack: error.stack,
+      },
+    })
+  }
+
+  private handleDebug(...args: unknown[]): void {
+    // Parse debug messages for specific events
+    const message = args.join(' ')
+
+    // Track ICE state changes
+    if (message.includes('peer ice connection state changed')) {
+      const state = message.match(/changed: (\w+)/)?.[1]
+      if (state) {
+        const telemetry = getTelemetry()
+        telemetry.trackConnection(
+          {
+            state: state,
+            iceConnectionState: state,
+          },
+          'connection_webrtc_ice_state',
+        )
+      }
+    }
+
+    // Track connection timeout
+    if (message.includes('connection timeout')) {
+      const telemetry = getTelemetry()
+      telemetry.trackConnection(
+        {
+          state: 'timeout',
+          reconnectAttempts: this.reconnectAttempts,
+        },
+        'connection_timeout',
+      )
+    }
+
+    // Track WebSocket close
+    if (message.includes('websocket closed')) {
+      const telemetry = getTelemetry()
+      telemetry.trackConnection(
+        {
+          state: 'closed',
+        },
+        'connection_websocket_close',
+      )
+    }
+  }
+
+  private startStatsCollection(): void {
+    // Collect WebRTC stats every 30 seconds when connected
+    this.statsDumpInterval = window.setInterval(async () => {
+      if (!this.client?._peer || this.lastState !== 'connected') {
+        return
+      }
+
+      try {
+        const stats = await this.client._peer.getStats()
+        const metrics = this.parseRTCStats(stats)
+
+        if (Object.keys(metrics).length > 0) {
+          const telemetry = getTelemetry()
+          telemetry.track('connection_webrtc_connected', 'debug', {
+            ...metrics,
+            timestamp: Date.now(),
+          })
+        }
+      } catch (e) {
+        // Stats collection failed, ignore
+      }
+    }, 30000)
+  }
+
+  private parseRTCStats(stats: RTCStatsReport): Partial<ConnectionMetrics> {
+    const metrics: Partial<ConnectionMetrics> = {}
+
+    stats.forEach((report) => {
+      if (report.type === 'candidate-pair' && report.state === 'succeeded') {
+        metrics.bytesReceived = report.bytesReceived
+        metrics.bytesSent = report.bytesSent
+        metrics.roundTripTime = report.currentRoundTripTime ? report.currentRoundTripTime * 1000 : undefined
+
+        // Get local candidate type
+        const localCandidate = stats.get(report.localCandidateId)
+        if (localCandidate) {
+          metrics.localCandidateType = localCandidate.candidateType
+        }
+
+        // Get remote candidate type
+        const remoteCandidate = stats.get(report.remoteCandidateId)
+        if (remoteCandidate) {
+          metrics.remoteCandidateType = remoteCandidate.candidateType
+        }
+      }
+
+      if (report.type === 'inbound-rtp' && report.kind === 'video') {
+        metrics.packetsLost = report.packetsLost
+        metrics.jitter = report.jitter ? report.jitter * 1000 : undefined
+      }
+    })
+
+    return metrics
+  }
+
+  // Track user-initiated actions
+  trackLogin(displayname: string): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_login', {
+      displayname,
+      timestamp: Date.now(),
+    })
+  }
+
+  trackLogout(): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_logout', {
+      sessionDuration: this.connectionStartTime ? Date.now() - this.connectionStartTime : undefined,
+      timestamp: Date.now(),
+    })
+  }
+
+  trackControlRequest(): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_control_request', {
+      timestamp: Date.now(),
+    })
+  }
+
+  trackControlRelease(): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_control_release', {
+      timestamp: Date.now(),
+    })
+  }
+
+  trackFullscreen(enabled: boolean): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_fullscreen', {
+      enabled,
+      timestamp: Date.now(),
+    })
+  }
+
+  trackPictureInPicture(enabled: boolean): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_pip', {
+      enabled,
+      timestamp: Date.now(),
+    })
+  }
+
+  trackResolutionChange(width: number, height: number, rate: number): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_resolution_change', {
+      width,
+      height,
+      rate,
+      timestamp: Date.now(),
+    })
+  }
+
+  trackVolumeChange(volume: number, muted: boolean): void {
+    const telemetry = getTelemetry()
+    telemetry.trackAction('action_volume_change', {
+      volume,
+      muted,
+      timestamp: Date.now(),
+    })
+  }
+
+  // Track stream events
+  trackStreamTrackAdded(kind: string, id: string): void {
+    const telemetry = getTelemetry()
+    telemetry.track('stream_track_added', 'info', {
+      kind,
+      id,
+      timestamp: Date.now(),
+    })
+  }
+
+  trackStreamPlayStarted(): void {
+    const telemetry = getTelemetry()
+    telemetry.track('stream_play_started', 'info', {
+      connectionDuration: this.connectionStartTime ? Date.now() - this.connectionStartTime : undefined,
+      timestamp: Date.now(),
+    })
+  }
+
+  trackStreamPlayFailed(error: Error): void {
+    const telemetry = getTelemetry()
+    telemetry.track(
+      'stream_play_failed',
+      'error',
+      {
+        timestamp: Date.now(),
+      },
+      {
+        error: {
+          message: error.message,
+          errorType: error.name || 'PlaybackError',
+          stack: error.stack,
+        },
+      },
+    )
+  }
+
+  getServerInfo(): ServerInfo | null {
+    return this.serverInfo
+  }
+
+  uninstall(): void {
+    if (!this.isInstalled || !this.client) {
+      return
+    }
+
+    // Remove event listeners
+    if (this.client.off) {
+      this.client.off('connecting', this.onConnecting)
+      this.client.off('connected', this.onConnected)
+      this.client.off('disconnected', this.onDisconnected)
+      this.client.off('reconnecting', this.onReconnecting)
+      this.client.off('error', this.onError)
+      this.client.off('debug', this.onDebug)
+    }
+
+    // Clear stats collection
+    if (this.statsDumpInterval !== null) {
+      clearInterval(this.statsDumpInterval)
+      this.statsDumpInterval = null
+    }
+
+    this.client = null
+    this.isInstalled = false
+  }
+}
+
+// Singleton instance
+let connectionCollectorInstance: ConnectionCollector | null = null
+
+export function getConnectionCollector(): ConnectionCollector {
+  if (!connectionCollectorInstance) {
+    connectionCollectorInstance = new ConnectionCollector()
+  }
+  return connectionCollectorInstance
+}
+
+export function installConnectionCollector(client: NekoClientLike): void {
+  getConnectionCollector().install(client)
+}
+
+export function uninstallConnectionCollector(): void {
+  if (connectionCollectorInstance) {
+    connectionCollectorInstance.uninstall()
+  }
+}
diff --git a/images/chromium-headful/client/src/telemetry/collectors/errors.ts b/images/chromium-headful/client/src/telemetry/collectors/errors.ts
new file mode 100644
index 00000000..4a82f10d
--- /dev/null
+++ b/images/chromium-headful/client/src/telemetry/collectors/errors.ts
@@ -0,0 +1,356 @@
+// Error Collector - Global error tracking for comprehensive crash reporting
+
+import Vue from 'vue'
+import { getTelemetry } from '../service'
+import { ErrorContext } from '../types'
+
+interface NetworkErrorInfo {
+  url: string
+  method?: string
+  status?: number
+  statusText?: string
+  type: 'fetch' | 'xhr' | 'resource'
+}
+
+class ErrorCollector {
+  private isInstalled = false
+  private originalOnError: OnErrorEventHandler | null = null
+  private originalOnUnhandledRejection: ((event: PromiseRejectionEvent) => void) | null = null
+  private originalFetch: typeof fetch | null = null
+  private originalXHROpen: typeof XMLHttpRequest.prototype.open | null = null
+  private originalXHRSend: typeof XMLHttpRequest.prototype.send | null = null
+
+  install(): void {
+    if (this.isInstalled) {
+      return
+    }
+
+    this.isInstalled = true
+    this.installGlobalErrorHandler()
+    this.installUnhandledRejectionHandler()
+    this.installVueErrorHandler()
+    this.installNetworkErrorHandlers()
+    this.installResourceErrorHandler()
+  }
+
+  private installGlobalErrorHandler(): void {
+    this.originalOnError = window.onerror
+
+    window.onerror = (
+      message: string | Event,
+      source?: string,
+      lineno?: number,
+      colno?: number,
+      error?: Error,
+    ): boolean => {
+      const telemetry = getTelemetry()
+
+      const errorContext: ErrorContext = {
+        message: typeof message === 'string' ? message : 'Unknown error',
+        filename: source,
+        lineno,
+        colno,
+        errorType: error?.name || 'Error',
+        stack: error?.stack,
+      }
+
+      telemetry.track('error_js', 'error', undefined, { error: errorContext })
+
+      // Call original handler if it exists
+      if (this.originalOnError) {
+        return this.originalOnError.call(window, message, source, lineno, colno, error)
+      }
+
+      return false
+    }
+  }
+
+  private installUnhandledRejectionHandler(): void {
+    this.originalOnUnhandledRejection = window.onunhandledrejection as
+      | ((event: PromiseRejectionEvent) => void)
+      | null
+
+    window.addEventListener('unhandledrejection', (event: PromiseRejectionEvent) => {
+      const telemetry = getTelemetry()
+
+      const reason = event.reason
+      const errorContext: ErrorContext = {
+        message: reason?.message || String(reason),
+        errorType: reason?.name || 'UnhandledPromiseRejection',
+        stack: reason?.stack,
+      }
+
+      telemetry.track('error_unhandled_rejection', 'error', undefined, { error: errorContext })
+
+      // Call original handler if it exists
+      if (this.originalOnUnhandledRejection) {
+        this.originalOnUnhandledRejection(event)
+      }
+    })
+  }
+
+  private installVueErrorHandler(): void {
+    const originalHandler = Vue.config.errorHandler
+
+    Vue.config.errorHandler = (err: Error, vm: Vue | null, info: string) => {
+      const telemetry = getTelemetry()
+
+      // Get component name and hierarchy
+      let componentName = 'Unknown'
+      let componentStack = ''
+
+      if (vm) {
+        const options = vm.$options as { name?: string; _componentTag?: string }
+        componentName = options.name || options._componentTag || 'AnonymousComponent'
+
+        // Build component stack
+        const stack: string[] = [componentName]
+        let parent = vm.$parent
+        while (parent) {
+          const parentOptions = parent.$options as { name?: string; _componentTag?: string }
+          const name = parentOptions.name || parentOptions._componentTag || 'AnonymousComponent'
+          stack.push(name)
+          parent = parent.$parent
+        }
+        componentStack = stack.reverse().join(' > ')
+      }
+
+      const errorContext: ErrorContext = {
+        message: err.message,
+        errorType: err.name || 'VueError',
+        stack: err.stack,
+        componentName,
+        componentStack,
+      }
+
+      telemetry.track(
+        'error_vue',
+        'error',
+        {
+          vueInfo: info,
+          componentName,
+          componentStack,
+        },
+        { error: errorContext },
+      )
+
+      // Call original handler if it exists
+      if (originalHandler) {
+        originalHandler.call(Vue, err, vm as Vue, info)
+      } else {
+        // Default behavior: log to console
+        console.error('[Vue Error]', err, info)
+      }
+    }
+
+    // Also capture Vue warnings in development
+    if (process.env.NODE_ENV !== 'production') {
+      const originalWarnHandler = Vue.config.warnHandler
+
+      Vue.config.warnHandler = (msg: string, vm: Vue | null, trace: string) => {
+        const telemetry = getTelemetry()
+
+        let componentName = 'Unknown'
+        if (vm) {
+          const options = vm.$options as { name?: string; _componentTag?: string }
+          componentName = options.name || options._componentTag || 'AnonymousComponent'
+        }
+
+        telemetry.track('error_vue', 'warning', {
+          message: msg,
+          componentName,
+          trace,
+          isWarning: true,
+        })
+
+        // Call original handler if it exists
+        if (originalWarnHandler && vm) {
+          originalWarnHandler.call(Vue, msg, vm, trace)
+        }
+      }
+    }
+  }
+
+  private installNetworkErrorHandlers(): void {
+    // Wrap fetch
+    this.originalFetch = window.fetch
+    const originalFetch = this.originalFetch
+
+    window.fetch = async function (input: RequestInfo | URL, init?: RequestInit): Promise<Response> {
+      const url = typeof input === 'string' ? input : input instanceof URL ? input.href : input.url
+      const method = init?.method || 'GET'
+      const startTime = performance.now()
+
+      try {
+        const response = await originalFetch.call(window, input, init)
+
+        // Track failed responses (4xx, 5xx)
+        if (!response.ok) {
+          const telemetry = getTelemetry()
+          const networkError: NetworkErrorInfo = {
+            url,
+            method,
+            status: response.status,
+            statusText: response.statusText,
+            type: 'fetch',
+          }
+
+          telemetry.track('error_network', 'warning', {
+            ...networkError,
+            duration: performance.now() - startTime,
+          })
+        }
+
+        return response
+      } catch (error) {
+        const telemetry = getTelemetry()
+        const networkError: NetworkErrorInfo = {
+          url,
+          method,
+          type: 'fetch',
+        }
+
+        telemetry.track(
+          'error_network',
+          'error',
+          {
+            ...networkError,
+            duration: performance.now() - startTime,
+          },
+          {
+            error: {
+              message: (error as Error).message,
+              errorType: (error as Error).name || 'NetworkError',
+              stack: (error as Error).stack,
+            },
+          },
+        )
+
+        throw error
+      }
+    }
+
+    // Wrap XMLHttpRequest
+    this.originalXHROpen = XMLHttpRequest.prototype.open
+    this.originalXHRSend = XMLHttpRequest.prototype.send
+    const originalOpen = this.originalXHROpen
+    const originalSend = this.originalXHRSend
+
+    XMLHttpRequest.prototype.open = function (
+      method: string,
+      url: string | URL,
+      async?: boolean,
+      username?: string | null,
+      password?: string | null,
+    ): void {
+      (this as XMLHttpRequest & { _telemetryUrl: string; _telemetryMethod: string })._telemetryUrl =
+        url.toString()
+      ;(this as XMLHttpRequest & { _telemetryUrl: string; _telemetryMethod: string })._telemetryMethod =
+        method
+      return originalOpen.call(this, method, url, async ?? true, username, password)
+    }
+
+    XMLHttpRequest.prototype.send = function (body?: Document | XMLHttpRequestBodyInit | null): void {
+      const xhr = this as XMLHttpRequest & { _telemetryUrl: string; _telemetryMethod: string }
+      const startTime = performance.now()
+
+      this.addEventListener('error', () => {
+        const telemetry = getTelemetry()
+        telemetry.track('error_network', 'error', {
+          url: xhr._telemetryUrl,
+          method: xhr._telemetryMethod,
+          type: 'xhr',
+          status: xhr.status,
+          duration: performance.now() - startTime,
+        })
+      })
+
+      this.addEventListener('load', () => {
+        if (xhr.status >= 400) {
+          const telemetry = getTelemetry()
+          telemetry.track('error_network', 'warning', {
+            url: xhr._telemetryUrl,
+            method: xhr._telemetryMethod,
+            type: 'xhr',
+            status: xhr.status,
+            statusText: xhr.statusText,
+            duration: performance.now() - startTime,
+          })
+        }
+      })
+
+      return originalSend.call(this, body)
+    }
+  }
+
+  private installResourceErrorHandler(): void {
+    // Listen for resource loading errors
+    window.addEventListener(
+      'error',
+      (event: Event) => {
+        const target = event.target as HTMLElement | null
+
+        // Check if it's a resource loading error (not a JS error)
+        if (target && (target.tagName === 'IMG' || target.tagName === 'SCRIPT' || target.tagName === 'LINK')) {
+          const telemetry = getTelemetry()
+          const src =
+            (target as HTMLImageElement).src ||
+            (target as HTMLScriptElement).src ||
+            (target as HTMLLinkElement).href
+
+          telemetry.track('error_network', 'warning', {
+            url: src,
+            type: 'resource',
+            resourceType: target.tagName.toLowerCase(),
+          })
+        }
+      },
+      true,
+    ) // Use capture phase to catch before event bubbles
+  }
+
+  uninstall(): void {
+    if (!this.isInstalled) {
+      return
+    }
+
+    // Restore original handlers
+    if (this.originalOnError !== null) {
+      window.onerror = this.originalOnError
+    }
+
+    if (this.originalFetch) {
+      window.fetch = this.originalFetch
+    }
+
+    if (this.originalXHROpen && this.originalXHRSend) {
+      XMLHttpRequest.prototype.open = this.originalXHROpen
+      XMLHttpRequest.prototype.send = this.originalXHRSend
+    }
+
+    // Note: We can't easily restore Vue.config.errorHandler without keeping a reference
+    // Vue.config.errorHandler = undefined
+
+    this.isInstalled = false
+  }
+}
+
+// Singleton instance
+let errorCollectorInstance: ErrorCollector | null = null
+
+export function getErrorCollector(): ErrorCollector {
+  if (!errorCollectorInstance) {
+    errorCollectorInstance = new ErrorCollector()
+  }
+  return errorCollectorInstance
+}
+
+export function installErrorCollector(): void {
+  getErrorCollector().install()
+}
+
+export function uninstallErrorCollector(): void {
+  if (errorCollectorInstance) {
+    errorCollectorInstance.uninstall()
+  }
+}
diff --git a/images/chromium-headful/client/src/telemetry/collectors/index.ts b/images/chromium-headful/client/src/telemetry/collectors/index.ts
new file mode 100644
index 00000000..b99c1a37
--- /dev/null
+++ b/images/chromium-headful/client/src/telemetry/collectors/index.ts
@@ -0,0 +1,5 @@
+// Collectors index - Re-export all telemetry collectors
+
+export { getErrorCollector, installErrorCollector, uninstallErrorCollector } from './errors'
+export { getPerformanceCollector, installPerformanceCollector, uninstallPerformanceCollector } from './performance'
+export { getConnectionCollector, installConnectionCollector, uninstallConnectionCollector } from './connection'
diff --git a/images/chromium-headful/client/src/telemetry/collectors/performance.ts b/images/chromium-headful/client/src/telemetry/collectors/performance.ts
new file mode 100644
index 00000000..e5a050ea
--- /dev/null
+++ b/images/chromium-headful/client/src/telemetry/collectors/performance.ts
@@ -0,0 +1,437 @@
+// Performance Collector - Comprehensive performance monitoring including Core Web Vitals
+
+import { getTelemetry } from '../service'
+import { PerformanceMetrics } from '../types'
+
+interface PerformanceMemory {
+  usedJSHeapSize: number
+  totalJSHeapSize: number
+  jsHeapSizeLimit: number
+}
+
+interface ExtendedPerformance extends Performance {
+  memory?: PerformanceMemory
+}
+
+interface LayoutShiftEntry extends PerformanceEntry {
+  value: number
+  hadRecentInput: boolean
+}
+
+interface LargestContentfulPaint extends PerformanceEntry {
+  renderTime: number
+  loadTime: number
+  size: number
+  element?: Element
+}
+
+interface FirstInputEntry extends PerformanceEntry {
+  processingStart: number
+}
+
+interface PerformanceLongTaskTiming extends PerformanceEntry {
+  attribution: TaskAttributionTiming[]
+}
+
+interface TaskAttributionTiming {
+  containerType: string
+  containerSrc: string
+  containerId: string
+  containerName: string
+}
+
+class PerformanceCollector {
+  private isInstalled = false
+  private fpsMonitorId: number | null = null
+  private memoryMonitorId: number | null = null
+  private performanceObservers: PerformanceObserver[] = []
+
+  // Core Web Vitals tracking
+  private clsValue = 0
+  private clsEntries: LayoutShiftEntry[] = []
+  private lcpValue = 0
+  private fidValue = 0
+
+  // FPS tracking
+  private frameCount = 0
+  private lastFrameTime = 0
+  private fpsValues: number[] = []
+
+  install(): void {
+    if (this.isInstalled) {
+      return
+    }
+
+    this.isInstalled = true
+
+    // Track navigation timing when page loads
+    this.trackNavigationTiming()
+
+    // Setup Core Web Vitals observers
+    this.setupCoreWebVitals()
+
+    // Setup Long Task observer
+    this.setupLongTaskObserver()
+
+    // Start FPS monitoring
+    this.startFPSMonitoring()
+
+    // Start memory monitoring
+    this.startMemoryMonitoring()
+  }
+
+  private trackNavigationTiming(): void {
+    // Wait for page to fully load
+    if (document.readyState === 'complete') {
+      this.captureNavigationMetrics()
+    } else {
+      window.addEventListener('load', () => {
+        // Delay slightly to ensure all metrics are available
+        setTimeout(() => this.captureNavigationMetrics(), 100)
+      })
+    }
+  }
+
+  private captureNavigationMetrics(): void {
+    const telemetry = getTelemetry()
+    const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming
+
+    if (!navigation) {
+      return
+    }
+
+    const metrics: PerformanceMetrics = {
+      // Navigation timing
+      domContentLoaded: navigation.domContentLoadedEventEnd - navigation.startTime,
+      domComplete: navigation.domComplete - navigation.startTime,
+      loadEventEnd: navigation.loadEventEnd - navigation.startTime,
+      ttfb: navigation.responseStart - navigation.requestStart,
+
+      // Resource metrics
+      resourceCount: performance.getEntriesByType('resource').length,
+      transferSize: navigation.transferSize,
+    }
+
+    // Add memory metrics if available
+    const extPerf = performance as ExtendedPerformance
+    if (extPerf.memory) {
+      metrics.usedJSHeapSize = extPerf.memory.usedJSHeapSize
+      metrics.totalJSHeapSize = extPerf.memory.totalJSHeapSize
+      metrics.jsHeapSizeLimit = extPerf.memory.jsHeapSizeLimit
+    }
+
+    telemetry.trackPerformance(metrics, 'perf_page_load')
+  }
+
+  private setupCoreWebVitals(): void {
+    // Largest Contentful Paint (LCP)
+    this.observeLCP()
+
+    // First Input Delay (FID)
+    this.observeFID()
+
+    // Cumulative Layout Shift (CLS)
+    this.observeCLS()
+
+    // First Contentful Paint (FCP)
+    this.observeFCP()
+  }
+
+  private observeLCP(): void {
+    try {
+      const observer = new PerformanceObserver((entryList) => {
+        const entries = entryList.getEntries() as LargestContentfulPaint[]
+        const lastEntry = entries[entries.length - 1]
+
+        if (lastEntry) {
+          this.lcpValue = lastEntry.renderTime || lastEntry.loadTime
+
+          const telemetry = getTelemetry()
+          telemetry.trackPerformance(
+            {
+              lcp: this.lcpValue,
+            },
+            'perf_largest_contentful_paint',
+          )
+        }
+      })
+
+      observer.observe({ type: 'largest-contentful-paint', buffered: true })
+      this.performanceObservers.push(observer)
+    } catch (e) {
+      // LCP not supported
+    }
+  }
+
+  private observeFID(): void {
+    try {
+      const observer = new PerformanceObserver((entryList) => {
+        const entries = entryList.getEntries() as FirstInputEntry[]
+        const firstEntry = entries[0]
+
+        if (firstEntry) {
+          this.fidValue = firstEntry.processingStart - firstEntry.startTime
+
+          const telemetry = getTelemetry()
+          telemetry.trackPerformance(
+            {
+              fid: this.fidValue,
+            },
+            'perf_first_input_delay',
+          )
+        }
+      })
+
+      observer.observe({ type: 'first-input', buffered: true })
+      this.performanceObservers.push(observer)
+    } catch (e) {
+      // FID not supported
+    }
+  }
+
+  private observeCLS(): void {
+    try {
+      const observer = new PerformanceObserver((entryList) => {
+        const entries = entryList.getEntries() as LayoutShiftEntry[]
+
+        for (const entry of entries) {
+          // Only count layout shifts without recent input
+          if (!entry.hadRecentInput) {
+            this.clsValue += entry.value
+            this.clsEntries.push(entry)
+          }
+        }
+      })
+
+      observer.observe({ type: 'layout-shift', buffered: true })
+      this.performanceObservers.push(observer)
+
+      // Report CLS when page becomes hidden
+      document.addEventListener('visibilitychange', () => {
+        if (document.visibilityState === 'hidden' && this.clsValue > 0) {
+          const telemetry = getTelemetry()
+          telemetry.trackPerformance(
+            {
+              cls: this.clsValue,
+            },
+            'perf_cumulative_layout_shift',
+          )
+        }
+      })
+    } catch (e) {
+      // CLS not supported
+    }
+  }
+
+  private observeFCP(): void {
+    try {
+      const observer = new PerformanceObserver((entryList) => {
+        const entries = entryList.getEntries()
+        const fcpEntry = entries.find((entry) => entry.name === 'first-contentful-paint')
+
+        if (fcpEntry) {
+          const telemetry = getTelemetry()
+          telemetry.trackPerformance(
+            {
+              fcp: fcpEntry.startTime,
+            },
+            'perf_first_contentful_paint',
+          )
+        }
+      })
+
+      observer.observe({ type: 'paint', buffered: true })
+      this.performanceObservers.push(observer)
+    } catch (e) {
+      // FCP not supported
+    }
+  }
+
+  private setupLongTaskObserver(): void {
+    try {
+      const observer = new PerformanceObserver((entryList) => {
+        const entries = entryList.getEntries() as PerformanceLongTaskTiming[]
+        const telemetry = getTelemetry()
+
+        for (const entry of entries) {
+          // Track long tasks (>50ms)
+          if (entry.duration > 50) {
+            const attribution = entry.attribution?.[0]
+            telemetry.track(
+              'perf_long_task',
+              entry.duration > 200 ? 'warning' : 'info',
+              {
+                duration: entry.duration,
+                startTime: entry.startTime,
+                containerType: attribution?.containerType,
+                containerSrc: attribution?.containerSrc,
+                containerId: attribution?.containerId,
+                containerName: attribution?.containerName,
+              },
+            )
+          }
+        }
+      })
+
+      observer.observe({ type: 'longtask', buffered: true })
+      this.performanceObservers.push(observer)
+    } catch (e) {
+      // Long task observer not supported
+    }
+  }
+
+  private startFPSMonitoring(): void {
+    const measureFPS = (timestamp: number) => {
+      if (this.lastFrameTime > 0) {
+        const delta = timestamp - this.lastFrameTime
+        if (delta > 0) {
+          const fps = 1000 / delta
+          this.fpsValues.push(fps)
+
+          // Keep only last 60 samples (1 second at 60fps)
+          if (this.fpsValues.length > 60) {
+            this.fpsValues.shift()
+          }
+        }
+      }
+
+      this.lastFrameTime = timestamp
+      this.frameCount++
+      this.fpsMonitorId = requestAnimationFrame(measureFPS)
+    }
+
+    this.fpsMonitorId = requestAnimationFrame(measureFPS)
+
+    // Report FPS every 10 seconds
+    setInterval(() => {
+      if (this.fpsValues.length > 0) {
+        const avgFps = this.fpsValues.reduce((a, b) => a + b, 0) / this.fpsValues.length
+        const minFps = Math.min(...this.fpsValues)
+        const maxFps = Math.max(...this.fpsValues)
+
+        // Calculate dropped frames (assuming 60fps target)
+        const droppedFrames = this.fpsValues.filter((fps) => fps < 55).length
+
+        const telemetry = getTelemetry()
+        telemetry.trackPerformance(
+          {
+            fps: Math.round(avgFps),
+            droppedFrames,
+          },
+          'perf_fps',
+        )
+
+        // Also track as detailed data
+        telemetry.track('perf_fps', avgFps < 30 ? 'warning' : 'debug', {
+          avgFps: Math.round(avgFps),
+          minFps: Math.round(minFps),
+          maxFps: Math.round(maxFps),
+          droppedFrames,
+          sampleCount: this.fpsValues.length,
+        })
+      }
+    }, 10000)
+  }
+
+  private startMemoryMonitoring(): void {
+    // Only available in Chrome
+    const extPerf = performance as ExtendedPerformance
+    if (!extPerf.memory) {
+      return
+    }
+
+    // Report memory every 30 seconds
+    this.memoryMonitorId = window.setInterval(() => {
+      const memory = extPerf.memory
+      if (memory) {
+        const telemetry = getTelemetry()
+
+        const usedMB = Math.round(memory.usedJSHeapSize / (1024 * 1024))
+        const totalMB = Math.round(memory.totalJSHeapSize / (1024 * 1024))
+        const limitMB = Math.round(memory.jsHeapSizeLimit / (1024 * 1024))
+        const usagePercent = Math.round((memory.usedJSHeapSize / memory.jsHeapSizeLimit) * 100)
+
+        // Warn if memory usage is high
+        const severity = usagePercent > 80 ? 'warning' : usagePercent > 90 ? 'error' : 'debug'
+
+        telemetry.track('perf_memory', severity, {
+          usedJSHeapSize: memory.usedJSHeapSize,
+          totalJSHeapSize: memory.totalJSHeapSize,
+          jsHeapSizeLimit: memory.jsHeapSizeLimit,
+          usedMB,
+          totalMB,
+          limitMB,
+          usagePercent,
+        })
+      }
+    }, 30000)
+  }
+
+  // Public method to get current metrics
+  getCurrentMetrics(): PerformanceMetrics {
+    const extPerf = performance as ExtendedPerformance
+    const avgFps = this.fpsValues.length > 0 ? this.fpsValues.reduce((a, b) => a + b, 0) / this.fpsValues.length : 0
+
+    const metrics: PerformanceMetrics = {
+      fps: Math.round(avgFps),
+      droppedFrames: this.fpsValues.filter((fps) => fps < 55).length,
+      lcp: this.lcpValue,
+      fid: this.fidValue,
+      cls: this.clsValue,
+    }
+
+    if (extPerf.memory) {
+      metrics.usedJSHeapSize = extPerf.memory.usedJSHeapSize
+      metrics.totalJSHeapSize = extPerf.memory.totalJSHeapSize
+      metrics.jsHeapSizeLimit = extPerf.memory.jsHeapSizeLimit
+    }
+
+    return metrics
+  }
+
+  uninstall(): void {
+    if (!this.isInstalled) {
+      return
+    }
+
+    // Stop FPS monitoring
+    if (this.fpsMonitorId !== null) {
+      cancelAnimationFrame(this.fpsMonitorId)
+      this.fpsMonitorId = null
+    }
+
+    // Stop memory monitoring
+    if (this.memoryMonitorId !== null) {
+      clearInterval(this.memoryMonitorId)
+      this.memoryMonitorId = null
+    }
+
+    // Disconnect all performance observers
+    for (const observer of this.performanceObservers) {
+      observer.disconnect()
+    }
+    this.performanceObservers = []
+
+    this.isInstalled = false
+  }
+}
+
+// Singleton instance
+let performanceCollectorInstance: PerformanceCollector | null = null
+
+export function getPerformanceCollector(): PerformanceCollector {
+  if (!performanceCollectorInstance) {
+    performanceCollectorInstance = new PerformanceCollector()
+  }
+  return performanceCollectorInstance
+}
+
+export function installPerformanceCollector(): void {
+  getPerformanceCollector().install()
+}
+
+export function uninstallPerformanceCollector(): void {
+  if (performanceCollectorInstance) {
+    performanceCollectorInstance.uninstall()
+  }
+}
diff --git a/images/chromium-headful/client/src/telemetry/index.ts b/images/chromium-headful/client/src/telemetry/index.ts
new file mode 100644
index 00000000..def284e3
--- /dev/null
+++ b/images/chromium-headful/client/src/telemetry/index.ts
@@ -0,0 +1,5 @@
+// Telemetry Module - Main entry point
+
+export * from './types'
+export { getTelemetry, initTelemetry, TelemetryService } from './service'
+export * from './collectors'
diff --git a/images/chromium-headful/client/src/telemetry/service.ts b/images/chromium-headful/client/src/telemetry/service.ts
new file mode 100644
index 00000000..91b1ffc2
--- /dev/null
+++ b/images/chromium-headful/client/src/telemetry/service.ts
@@ -0,0 +1,601 @@
+// Telemetry Service - Core telemetry collection and transmission
+
+import {
+  TelemetryEvent,
+  TelemetryBatch,
+  TelemetryConfig,
+  TelemetryEventType,
+  TelemetrySeverity,
+  SessionData,
+  DeviceInfo,
+  ScreenInfo,
+  ViewportInfo,
+  BrowserInfo,
+  ErrorContext,
+  PerformanceMetrics,
+  ConnectionMetrics,
+  DEFAULT_TELEMETRY_CONFIG,
+} from './types'
+
+function generateId(): string {
+  return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2, 11)}`
+}
+
+function detectBrowser(): BrowserInfo {
+  const ua = navigator.userAgent
+  let name = 'Unknown'
+  let version = 'Unknown'
+  let engine = 'Unknown'
+
+  if (ua.includes('Firefox/')) {
+    name = 'Firefox'
+    version = ua.match(/Firefox\/(\d+(\.\d+)?)/)?.[1] || 'Unknown'
+    engine = 'Gecko'
+  } else if (ua.includes('Edg/')) {
+    name = 'Edge'
+    version = ua.match(/Edg\/(\d+(\.\d+)?)/)?.[1] || 'Unknown'
+    engine = 'Blink'
+  } else if (ua.includes('Chrome/')) {
+    name = 'Chrome'
+    version = ua.match(/Chrome\/(\d+(\.\d+)?)/)?.[1] || 'Unknown'
+    engine = 'Blink'
+  } else if (ua.includes('Safari/') && !ua.includes('Chrome')) {
+    name = 'Safari'
+    version = ua.match(/Version\/(\d+(\.\d+)?)/)?.[1] || 'Unknown'
+    engine = 'WebKit'
+  } else if (ua.includes('Opera/') || ua.includes('OPR/')) {
+    name = 'Opera'
+    version = ua.match(/(?:Opera|OPR)\/(\d+(\.\d+)?)/)?.[1] || 'Unknown'
+    engine = 'Blink'
+  }
+
+  let webglSupported = false
+  try {
+    const canvas = document.createElement('canvas')
+    webglSupported = !!(canvas.getContext('webgl') || canvas.getContext('experimental-webgl'))
+  } catch (e) {
+    // WebGL not supported
+  }
+
+  return {
+    name,
+    version,
+    engine,
+    webrtcSupported:
+      typeof RTCPeerConnection !== 'undefined' && typeof RTCPeerConnection.prototype.addTransceiver !== 'undefined',
+    webglSupported,
+    cookiesEnabled: navigator.cookieEnabled,
+  }
+}
+
+function getDeviceInfo(): DeviceInfo {
+  const nav = navigator as Navigator & {
+    deviceMemory?: number
+    connection?: {
+      effectiveType: string
+      downlink: number
+      rtt: number
+      saveData: boolean
+    }
+  }
+
+  const info: DeviceInfo = {
+    userAgent: nav.userAgent,
+    platform: nav.platform,
+    language: nav.language,
+    languages: Array.from(nav.languages || [nav.language]),
+    cookiesEnabled: nav.cookieEnabled,
+    doNotTrack: nav.doNotTrack,
+    hardwareConcurrency: nav.hardwareConcurrency || 0,
+    maxTouchPoints: nav.maxTouchPoints || 0,
+  }
+
+  if (nav.deviceMemory) {
+    info.deviceMemory = nav.deviceMemory
+  }
+
+  if (nav.connection) {
+    info.connection = {
+      effectiveType: nav.connection.effectiveType,
+      downlink: nav.connection.downlink,
+      rtt: nav.connection.rtt,
+      saveData: nav.connection.saveData,
+    }
+  }
+
+  return info
+}
+
+function getScreenInfo(): ScreenInfo {
+  return {
+    width: screen.width,
+    height: screen.height,
+    availWidth: screen.availWidth,
+    availHeight: screen.availHeight,
+    colorDepth: screen.colorDepth,
+    pixelRatio: window.devicePixelRatio || 1,
+    orientation: screen.orientation?.type,
+  }
+}
+
+function getViewportInfo(): ViewportInfo {
+  return {
+    width: window.innerWidth,
+    height: window.innerHeight,
+  }
+}
+
+class TelemetryService {
+  private config: TelemetryConfig
+  private session: SessionData | null = null
+  private eventQueue: TelemetryEvent[] = []
+  private pendingBatches: Map<string, TelemetryBatch> = new Map()
+  private sequenceNumber = 0
+  private flushTimer: number | null = null
+  private heartbeatTimer: number | null = null
+  private performanceTimer: number | null = null
+  private isInitialized = false
+  private isFlushing = false
+
+  constructor(config: Partial<TelemetryConfig> = {}) {
+    this.config = { ...DEFAULT_TELEMETRY_CONFIG, ...config }
+  }
+
+  init(): void {
+    if (this.isInitialized) {
+      this.log('Telemetry already initialized')
+      return
+    }
+
+    if (!this.config.enabled) {
+      this.log('Telemetry disabled')
+      return
+    }
+
+    this.isInitialized = true
+    this.session = this.createSession()
+
+    // Parse capture specification
+    this.parseCaptureSpec()
+
+    this.log('Telemetry initialized', this.session)
+    this.log('Capture config:', {
+      spec: this.config.capture,
+      captureAll: this.captureAll,
+      includes: this.captureIncludes,
+      excludes: this.captureExcludes,
+    })
+
+    // Track session start
+    this.track('session_start', 'info', {
+      session: this.session,
+    })
+
+    // Start flush timer
+    this.startFlushTimer()
+
+    // Start heartbeat
+    this.startHeartbeat()
+
+    // Setup visibility change handler
+    this.setupVisibilityHandler()
+
+    // Setup beforeunload handler
+    this.setupBeforeUnloadHandler()
+
+    // Track app init
+    this.track('app_init', 'info')
+  }
+
+  private createSession(): SessionData {
+    return {
+      sessionId: generateId(),
+      startTime: Date.now(),
+      pageUrl: window.location.href,
+      referrer: document.referrer,
+      device: getDeviceInfo(),
+      screen: getScreenInfo(),
+      viewport: getViewportInfo(),
+      browser: detectBrowser(),
+      timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+      timezoneOffset: new Date().getTimezoneOffset(),
+    }
+  }
+
+  private log(...args: unknown[]): void {
+    if (this.config.debug) {
+      console.log('[Telemetry]', ...args)
+    }
+  }
+
+  private startFlushTimer(): void {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer)
+    }
+    this.flushTimer = window.setInterval(() => {
+      this.flush()
+    }, this.config.flushInterval)
+  }
+
+  private startHeartbeat(): void {
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer)
+    }
+    this.heartbeatTimer = window.setInterval(() => {
+      this.track('session_heartbeat', 'debug', {
+        uptimeMs: Date.now() - (this.session?.startTime || Date.now()),
+        eventCount: this.sequenceNumber,
+        queueSize: this.eventQueue.length,
+      })
+    }, this.config.sessionHeartbeatInterval)
+  }
+
+  private setupVisibilityHandler(): void {
+    document.addEventListener('visibilitychange', () => {
+      if (document.visibilityState === 'visible') {
+        this.track('app_visible', 'debug')
+      } else {
+        this.track('app_hidden', 'debug')
+        // Flush when page becomes hidden
+        this.flush()
+      }
+    })
+  }
+
+  private setupBeforeUnloadHandler(): void {
+    window.addEventListener('beforeunload', () => {
+      this.track('app_beforeunload', 'info')
+      this.track('session_end', 'info', {
+        duration: Date.now() - (this.session?.startTime || Date.now()),
+        totalEvents: this.sequenceNumber,
+      })
+      // Use sendBeacon for reliable delivery on page unload
+      this.flushSync()
+    })
+  }
+
+  track(
+    eventType: TelemetryEventType,
+    severity: TelemetrySeverity = 'info',
+    data?: Record<string, unknown>,
+    options?: {
+      error?: ErrorContext
+      performance?: PerformanceMetrics
+      connection?: ConnectionMetrics
+      tags?: Record<string, string>
+    },
+  ): void {
+    if (!this.config.enabled || !this.isInitialized) {
+      return
+    }
+
+    // Check category filters
+    if (!this.shouldCollect(eventType)) {
+      return
+    }
+
+    const event: TelemetryEvent = {
+      eventId: generateId(),
+      eventType,
+      severity,
+      timestamp: Date.now(),
+      sessionId: this.session?.sessionId || 'unknown',
+      sequenceNumber: ++this.sequenceNumber,
+      data,
+      ...options,
+    }
+
+    this.log('Track event:', event)
+    this.eventQueue.push(event)
+
+    // Flush if batch size reached
+    if (this.eventQueue.length >= this.config.batchSize) {
+      this.flush()
+    }
+  }
+
+  // Parsed capture patterns (cached for performance)
+  private captureIncludes: string[] = []
+  private captureExcludes: string[] = []
+  private captureAll = true
+
+  private parseCaptureSpec(): void {
+    const spec = this.config.capture.trim().toLowerCase()
+
+    if (spec === 'all' || spec === '') {
+      this.captureAll = true
+      this.captureIncludes = []
+      this.captureExcludes = []
+      return
+    }
+
+    if (spec === 'none') {
+      this.captureAll = false
+      this.captureIncludes = []
+      this.captureExcludes = []
+      return
+    }
+
+    this.captureAll = false
+    this.captureIncludes = []
+    this.captureExcludes = []
+
+    const parts = spec.split(',').map((p) => p.trim()).filter((p) => p)
+
+    for (const part of parts) {
+      if (part === 'all') {
+        this.captureAll = true
+      } else if (part.startsWith('-')) {
+        // Exclusion pattern
+        this.captureExcludes.push(part.slice(1))
+      } else {
+        // Inclusion pattern
+        this.captureIncludes.push(part)
+      }
+    }
+  }
+
+  private matchesPattern(eventType: string, pattern: string): boolean {
+    if (pattern === eventType) {
+      return true
+    }
+
+    // Handle wildcard patterns (e.g., 'error_*', 'perf_*')
+    if (pattern.endsWith('*')) {
+      const prefix = pattern.slice(0, -1)
+      return eventType.startsWith(prefix)
+    }
+
+    return false
+  }
+
+  private shouldCollect(eventType: TelemetryEventType): boolean {
+    const eventLower = eventType.toLowerCase()
+
+    // Check exclusions first (they take priority)
+    for (const pattern of this.captureExcludes) {
+      if (this.matchesPattern(eventLower, pattern)) {
+        return false
+      }
+    }
+
+    // If capturing all, allow (unless excluded above)
+    if (this.captureAll) {
+      return true
+    }
+
+    // Check inclusions
+    for (const pattern of this.captureIncludes) {
+      if (this.matchesPattern(eventLower, pattern)) {
+        return true
+      }
+    }
+
+    // Not in inclusion list
+    return false
+  }
+
+  trackError(error: Error | ErrorEvent | PromiseRejectionEvent, context?: Partial<ErrorContext>): void {
+    let errorContext: ErrorContext
+
+    if (error instanceof ErrorEvent) {
+      errorContext = {
+        message: error.message,
+        filename: error.filename,
+        lineno: error.lineno,
+        colno: error.colno,
+        errorType: error.error?.name || 'Error',
+        stack: error.error?.stack,
+        isTrusted: error.isTrusted,
+        ...context,
+      }
+    } else if ('reason' in error) {
+      // PromiseRejectionEvent
+      const reason = error.reason
+      errorContext = {
+        message: reason?.message || String(reason),
+        errorType: reason?.name || 'UnhandledPromiseRejection',
+        stack: reason?.stack,
+        ...context,
+      }
+    } else {
+      errorContext = {
+        message: error.message,
+        errorType: error.name || 'Error',
+        stack: error.stack,
+        ...context,
+      }
+    }
+
+    const eventType: TelemetryEventType =
+      (context as { eventType?: TelemetryEventType })?.eventType || 'error_js'
+
+    this.track(eventType, 'error', undefined, { error: errorContext })
+  }
+
+  trackPerformance(metrics: PerformanceMetrics, eventType: TelemetryEventType = 'perf_page_load'): void {
+    this.track(eventType, 'info', undefined, { performance: metrics })
+  }
+
+  trackConnection(metrics: ConnectionMetrics, eventType: TelemetryEventType): void {
+    this.track(eventType, metrics.state === 'failed' ? 'error' : 'info', undefined, { connection: metrics })
+  }
+
+  trackAction(
+    action: TelemetryEventType,
+    data?: Record<string, unknown>,
+    tags?: Record<string, string>,
+  ): void {
+    this.track(action, 'info', data, { tags })
+  }
+
+  async flush(): Promise<void> {
+    if (!this.config.enabled || this.isFlushing || this.eventQueue.length === 0) {
+      return
+    }
+
+    this.isFlushing = true
+
+    try {
+      const events = [...this.eventQueue]
+      this.eventQueue = []
+
+      const batch: TelemetryBatch = {
+        batchId: generateId(),
+        events,
+        session: this.session!,
+        sentAt: Date.now(),
+        retryCount: 0,
+      }
+
+      await this.sendBatch(batch)
+    } catch (error) {
+      this.log('Flush error:', error)
+    } finally {
+      this.isFlushing = false
+    }
+  }
+
+  private flushSync(): void {
+    if (!this.config.enabled || this.eventQueue.length === 0 || !this.session) {
+      return
+    }
+
+    const events = [...this.eventQueue]
+    this.eventQueue = []
+
+    const batch: TelemetryBatch = {
+      batchId: generateId(),
+      events,
+      session: this.session,
+      sentAt: Date.now(),
+      retryCount: 0,
+    }
+
+    const payload = JSON.stringify(batch)
+
+    // Use sendBeacon for reliable delivery
+    if (navigator.sendBeacon) {
+      const blob = new Blob([payload], { type: 'application/json' })
+      navigator.sendBeacon(this.config.endpoint, blob)
+      this.log('Sent via sendBeacon')
+    } else {
+      // Fallback to sync XHR
+      const xhr = new XMLHttpRequest()
+      xhr.open('POST', this.config.endpoint, false) // sync
+      xhr.setRequestHeader('Content-Type', 'application/json')
+      try {
+        xhr.send(payload)
+      } catch (e) {
+        this.log('Sync send failed:', e)
+      }
+    }
+  }
+
+  private async sendBatch(batch: TelemetryBatch): Promise<void> {
+    this.pendingBatches.set(batch.batchId, batch)
+    this.log('Sending batch:', batch.batchId, 'with', batch.events.length, 'events')
+
+    try {
+      const response = await fetch(this.config.endpoint, {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify(batch),
+        keepalive: true,
+      })
+
+      if (!response.ok) {
+        throw new Error(`HTTP ${response.status}: ${response.statusText}`)
+      }
+
+      this.log('Batch sent successfully:', batch.batchId)
+      this.pendingBatches.delete(batch.batchId)
+    } catch (error) {
+      this.log('Batch send failed:', batch.batchId, error)
+
+      // Retry logic
+      if (batch.retryCount < this.config.maxRetries) {
+        batch.retryCount++
+        const delay = this.config.retryDelay * Math.pow(2, batch.retryCount - 1)
+        this.log(`Retrying batch ${batch.batchId} in ${delay}ms (attempt ${batch.retryCount})`)
+
+        setTimeout(() => {
+          this.sendBatch(batch)
+        }, delay)
+      } else {
+        this.log(`Batch ${batch.batchId} failed after ${this.config.maxRetries} retries`)
+        this.pendingBatches.delete(batch.batchId)
+      }
+    }
+  }
+
+  getSessionId(): string {
+    return this.session?.sessionId || 'unknown'
+  }
+
+  getConfig(): TelemetryConfig {
+    return { ...this.config }
+  }
+
+  updateConfig(config: Partial<TelemetryConfig>): void {
+    this.config = { ...this.config, ...config }
+
+    // Re-parse capture spec if changed
+    if (config.capture !== undefined) {
+      this.parseCaptureSpec()
+    }
+
+    // Restart timers if intervals changed
+    if (config.flushInterval) {
+      this.startFlushTimer()
+    }
+    if (config.sessionHeartbeatInterval) {
+      this.startHeartbeat()
+    }
+  }
+
+  destroy(): void {
+    if (this.flushTimer) {
+      clearInterval(this.flushTimer)
+      this.flushTimer = null
+    }
+    if (this.heartbeatTimer) {
+      clearInterval(this.heartbeatTimer)
+      this.heartbeatTimer = null
+    }
+    if (this.performanceTimer) {
+      clearInterval(this.performanceTimer)
+      this.performanceTimer = null
+    }
+
+    // Final flush
+    this.flushSync()
+
+    this.isInitialized = false
+    this.log('Telemetry destroyed')
+  }
+}
+
+// Singleton instance
+let telemetryInstance: TelemetryService | null = null
+
+export function getTelemetry(): TelemetryService {
+  if (!telemetryInstance) {
+    telemetryInstance = new TelemetryService()
+  }
+  return telemetryInstance
+}
+
+export function initTelemetry(config?: Partial<TelemetryConfig>): TelemetryService {
+  if (telemetryInstance) {
+    telemetryInstance.updateConfig(config || {})
+  } else {
+    telemetryInstance = new TelemetryService(config)
+  }
+  telemetryInstance.init()
+  return telemetryInstance
+}
+
+export { TelemetryService }
diff --git a/images/chromium-headful/client/src/telemetry/types.ts b/images/chromium-headful/client/src/telemetry/types.ts
new file mode 100644
index 00000000..7b5625d0
--- /dev/null
+++ b/images/chromium-headful/client/src/telemetry/types.ts
@@ -0,0 +1,253 @@
+// Telemetry Types - Production-grade telemetry for Neko client
+
+export type TelemetryEventType =
+  // Session lifecycle
+  | 'session_start'
+  | 'session_end'
+  | 'session_heartbeat'
+  // App lifecycle
+  | 'app_init'
+  | 'app_ready'
+  | 'app_visible'
+  | 'app_hidden'
+  | 'app_beforeunload'
+  // Errors
+  | 'error_js'
+  | 'error_unhandled_rejection'
+  | 'error_vue'
+  | 'error_network'
+  | 'error_websocket'
+  | 'error_webrtc'
+  // Performance
+  | 'perf_page_load'
+  | 'perf_first_contentful_paint'
+  | 'perf_largest_contentful_paint'
+  | 'perf_first_input_delay'
+  | 'perf_cumulative_layout_shift'
+  | 'perf_long_task'
+  | 'perf_memory'
+  | 'perf_fps'
+  // Connection
+  | 'connection_websocket_open'
+  | 'connection_websocket_close'
+  | 'connection_websocket_error'
+  | 'connection_webrtc_connecting'
+  | 'connection_webrtc_connected'
+  | 'connection_webrtc_disconnected'
+  | 'connection_webrtc_failed'
+  | 'connection_webrtc_ice_state'
+  | 'connection_reconnecting'
+  | 'connection_timeout'
+  // User actions
+  | 'action_login'
+  | 'action_logout'
+  | 'action_control_request'
+  | 'action_control_release'
+  | 'action_fullscreen'
+  | 'action_pip'
+  | 'action_resolution_change'
+  | 'action_volume_change'
+  // Video/Stream
+  | 'stream_track_added'
+  | 'stream_play_started'
+  | 'stream_play_failed'
+  | 'stream_quality_change'
+
+export type TelemetrySeverity = 'debug' | 'info' | 'warning' | 'error' | 'critical'
+
+export interface DeviceInfo {
+  userAgent: string
+  platform: string
+  language: string
+  languages: string[]
+  cookiesEnabled: boolean
+  doNotTrack: string | null
+  hardwareConcurrency: number
+  maxTouchPoints: number
+  deviceMemory?: number
+  connection?: {
+    effectiveType: string
+    downlink: number
+    rtt: number
+    saveData: boolean
+  }
+}
+
+export interface ScreenInfo {
+  width: number
+  height: number
+  availWidth: number
+  availHeight: number
+  colorDepth: number
+  pixelRatio: number
+  orientation?: string
+}
+
+export interface ViewportInfo {
+  width: number
+  height: number
+}
+
+export interface BrowserInfo {
+  name: string
+  version: string
+  engine: string
+  webrtcSupported: boolean
+  webglSupported: boolean
+  cookiesEnabled: boolean
+}
+
+export interface SessionData {
+  sessionId: string
+  startTime: number
+  pageUrl: string
+  referrer: string
+  device: DeviceInfo
+  screen: ScreenInfo
+  viewport: ViewportInfo
+  browser: BrowserInfo
+  timezone: string
+  timezoneOffset: number
+}
+
+export interface ErrorContext {
+  message: string
+  stack?: string
+  filename?: string
+  lineno?: number
+  colno?: number
+  componentName?: string
+  componentStack?: string
+  errorType: string
+  isTrusted?: boolean
+}
+
+export interface PerformanceMetrics {
+  // Navigation timing
+  domContentLoaded?: number
+  domComplete?: number
+  loadEventEnd?: number
+  // Core Web Vitals
+  fcp?: number
+  lcp?: number
+  fid?: number
+  cls?: number
+  ttfb?: number
+  // Resource timing
+  resourceCount?: number
+  transferSize?: number
+  // Memory
+  usedJSHeapSize?: number
+  totalJSHeapSize?: number
+  jsHeapSizeLimit?: number
+  // FPS
+  fps?: number
+  droppedFrames?: number
+}
+
+export interface ConnectionMetrics {
+  state: string
+  previousState?: string
+  duration?: number
+  reconnectAttempts?: number
+  latency?: number
+  iceConnectionState?: string
+  iceGatheringState?: string
+  signalingState?: string
+  localCandidateType?: string
+  remoteCandidateType?: string
+  bytesReceived?: number
+  bytesSent?: number
+  packetsLost?: number
+  jitter?: number
+  roundTripTime?: number
+}
+
+export interface TelemetryEvent {
+  // Event identification
+  eventId: string
+  eventType: TelemetryEventType
+  severity: TelemetrySeverity
+  timestamp: number
+
+  // Session context
+  sessionId: string
+  sequenceNumber: number
+
+  // Event-specific data
+  data?: Record<string, unknown>
+
+  // Error context (for error events)
+  error?: ErrorContext
+
+  // Performance metrics (for perf events)
+  performance?: PerformanceMetrics
+
+  // Connection metrics (for connection events)
+  connection?: ConnectionMetrics
+
+  // Additional context
+  tags?: Record<string, string>
+}
+
+export interface TelemetryBatch {
+  batchId: string
+  events: TelemetryEvent[]
+  session: SessionData
+  sentAt: number
+  retryCount: number
+}
+
+/**
+ * Capture configuration - comma-separated list of event types to capture
+ *
+ * Special values:
+ *   - 'all' (default): Capture all events
+ *   - 'none': Capture no events
+ *
+ * Event type patterns (supports wildcards with *):
+ *   - Exact: 'error_js,perf_fps,stream_play_started'
+ *   - Prefix wildcard: 'error_*,perf_*' (all error and perf events)
+ *   - Mixed: 'all,-perf_*' (all except performance events)
+ *
+ * Available event types:
+ *   Session: session_start, session_end, session_heartbeat
+ *   App: app_init, app_ready, app_visible, app_hidden, app_beforeunload
+ *   Errors: error_js, error_unhandled_rejection, error_vue, error_network, error_websocket, error_webrtc
+ *   Performance: perf_page_load, perf_first_contentful_paint, perf_largest_contentful_paint,
+ *                perf_first_input_delay, perf_cumulative_layout_shift, perf_long_task, perf_memory, perf_fps
+ *   Connection: connection_websocket_open, connection_websocket_close, connection_websocket_error,
+ *               connection_webrtc_connecting, connection_webrtc_connected, connection_webrtc_disconnected,
+ *               connection_webrtc_failed, connection_webrtc_ice_state, connection_reconnecting, connection_timeout
+ *   Actions: action_login, action_logout, action_control_request, action_control_release,
+ *            action_fullscreen, action_pip, action_resolution_change, action_volume_change
+ *   Stream: stream_track_added, stream_play_started, stream_play_failed, stream_quality_change
+ */
+export type TelemetryCaptureSpec = string // 'all' | 'none' | comma-separated event types/patterns
+
+export interface TelemetryConfig {
+  enabled: boolean
+  endpoint: string
+  batchSize: number
+  flushInterval: number
+  maxRetries: number
+  retryDelay: number
+  sessionHeartbeatInterval: number
+  performanceSampleInterval: number
+  debug: boolean
+  // Capture specification - comma-separated list of event types or 'all'
+  capture: TelemetryCaptureSpec
+}
+
+export const DEFAULT_TELEMETRY_CONFIG: TelemetryConfig = {
+  enabled: false, // Disabled by default - enabled automatically when endpoint is provided
+  endpoint: '', // No default endpoint - must be explicitly set via TELEMETRY_ENDPOINT
+  batchSize: 10,
+  flushInterval: 30000, // 30 seconds
+  maxRetries: 3,
+  retryDelay: 1000,
+  sessionHeartbeatInterval: 60000, // 1 minute
+  performanceSampleInterval: 10000, // 10 seconds
+  debug: false,
+  capture: 'all', // Default: capture all events
+}
diff --git a/images/chromium-headful/client/vue.config.js b/images/chromium-headful/client/vue.config.js
index cb21db91..fbb542d8 100644
--- a/images/chromium-headful/client/vue.config.js
+++ b/images/chromium-headful/client/vue.config.js
@@ -1,4 +1,5 @@
 const path = require('path')
+const webpack = require('webpack')
 
 module.exports = {
   productionSourceMap: false,
@@ -20,6 +21,18 @@ module.exports = {
         '~': path.resolve(__dirname, 'src/'),
       },
     },
+    plugins: [
+      // Define environment variables for telemetry configuration (build-time only)
+      // Runtime config via TELEMETRY_ENDPOINT and TELEMETRY_CAPTURE env vars is preferred
+      //
+      // Build-time example:
+      //   VUE_APP_TELEMETRY_ENDPOINT=https://example.com/telemetry npm run build
+      //   VUE_APP_TELEMETRY_CAPTURE='error_*,perf_fps' npm run build
+      new webpack.DefinePlugin({
+        'process.env.VUE_APP_TELEMETRY_ENDPOINT': JSON.stringify(process.env.VUE_APP_TELEMETRY_ENDPOINT || ''),
+        'process.env.VUE_APP_TELEMETRY_CAPTURE': JSON.stringify(process.env.VUE_APP_TELEMETRY_CAPTURE || ''),
+      }),
+    ],
   },
   devServer: {
     allowedHosts: 'all',
diff --git a/images/chromium-headful/run-docker.sh b/images/chromium-headful/run-docker.sh
index f99c976f..0589a66a 100755
--- a/images/chromium-headful/run-docker.sh
+++ b/images/chromium-headful/run-docker.sh
@@ -70,6 +70,17 @@ if [[ -n "${PLAYWRIGHT_ENGINE:-}" ]]; then
   RUN_ARGS+=( -e PLAYWRIGHT_ENGINE="$PLAYWRIGHT_ENGINE" )
 fi
 
+# Telemetry configuration (only 2 flags)
+# Usage: TELEMETRY_ENDPOINT=https://api.example.com/telemetry ./run-docker.sh
+# If TELEMETRY_ENDPOINT is set, telemetry is enabled; if not set, telemetry is disabled
+if [[ -n "${TELEMETRY_ENDPOINT:-}" ]]; then
+  echo "Telemetry ENABLED - endpoint: $TELEMETRY_ENDPOINT"
+  RUN_ARGS+=( -e TELEMETRY_ENDPOINT="$TELEMETRY_ENDPOINT" )
+  if [[ -n "${TELEMETRY_CAPTURE:-}" ]]; then
+    RUN_ARGS+=( -e TELEMETRY_CAPTURE="$TELEMETRY_CAPTURE" )
+  fi
+fi
+
 # WebRTC port mapping
 if [[ "${ENABLE_WEBRTC:-}" == "true" ]]; then
   echo "Running container with WebRTC"
diff --git a/images/chromium-headful/run-unikernel.sh b/images/chromium-headful/run-unikernel.sh
index 7a528f85..df7babed 100755
--- a/images/chromium-headful/run-unikernel.sh
+++ b/images/chromium-headful/run-unikernel.sh
@@ -80,6 +80,17 @@ deploy_args=(
   -n "$NAME"
 )
 
+# Telemetry configuration (only 2 flags)
+# Usage: TELEMETRY_ENDPOINT=https://api.example.com/telemetry ./run-unikernel.sh
+# If TELEMETRY_ENDPOINT is set, telemetry is enabled; if not set, telemetry is disabled
+if [[ -n "${TELEMETRY_ENDPOINT:-}" ]]; then
+  echo "Telemetry ENABLED - endpoint: $TELEMETRY_ENDPOINT"
+  deploy_args+=( -e TELEMETRY_ENDPOINT="$TELEMETRY_ENDPOINT" )
+  if [[ -n "${TELEMETRY_CAPTURE:-}" ]]; then
+    deploy_args+=( -e TELEMETRY_CAPTURE="$TELEMETRY_CAPTURE" )
+  fi
+fi
+
 if [[ "${ENABLE_WEBRTC:-}" == "true" ]]; then
   echo "Deploying with WebRTC enabled"
   kraft cloud inst create --start \
diff --git a/images/chromium-headful/wrapper.sh b/images/chromium-headful/wrapper.sh
index dd15f099..49681487 100755
--- a/images/chromium-headful/wrapper.sh
+++ b/images/chromium-headful/wrapper.sh
@@ -97,6 +97,63 @@ else
   done
 fi
 
+# -----------------------------------------------------------------------------
+# Generate telemetry configuration from environment variables -----------------
+# -----------------------------------------------------------------------------
+# This creates /var/www/telemetry-config.js from TELEMETRY_* environment variables
+# which the neko client will load at runtime to configure telemetry.
+#
+# Only 2 environment variables:
+#   TELEMETRY_ENDPOINT - URL to send telemetry data. If set, telemetry is enabled.
+#                        If not set, telemetry is disabled.
+#   TELEMETRY_CAPTURE  - Comma-separated event types (defaults to 'all')
+#                        Examples: 'all', 'error_*,perf_fps', 'all,-perf_memory'
+#
+# Usage with Docker:
+#   docker run -e TELEMETRY_ENDPOINT=https://api.example.com/telemetry ...
+#
+# Usage with Kraft:
+#   kraft run -e TELEMETRY_ENDPOINT=https://api.example.com/telemetry ...
+
+generate_telemetry_config() {
+  local config_file="/var/www/telemetry-config.js"
+
+  if [[ -n "${TELEMETRY_ENDPOINT:-}" ]]; then
+    echo "[wrapper] Telemetry ENABLED - endpoint: ${TELEMETRY_ENDPOINT}"
+
+    # Escape single quotes in the endpoint URL
+    local endpoint="${TELEMETRY_ENDPOINT//\'/\\\'}"
+
+    # Build capture config (defaults to 'all' if not specified)
+    local capture="${TELEMETRY_CAPTURE:-all}"
+    capture="${capture//\'/\\\'}"
+
+    echo "[wrapper] Telemetry capture: ${capture}"
+
+    cat > "$config_file" <<EOF
+// Auto-generated telemetry configuration from container environment variables
+// Generated at: $(date -Iseconds)
+// TELEMETRY_ENDPOINT=${TELEMETRY_ENDPOINT}
+// TELEMETRY_CAPTURE=${capture}
+window.__NEKO_TELEMETRY_CONFIG__ = {
+  endpoint: '${endpoint}',
+  capture: '${capture}'
+};
+EOF
+    echo "[wrapper] Telemetry config written to $config_file"
+  else
+    echo "[wrapper] Telemetry DISABLED (TELEMETRY_ENDPOINT not set)"
+    # Create empty config - telemetry will be disabled
+    cat > "$config_file" <<EOF
+// Telemetry disabled - TELEMETRY_ENDPOINT not set
+window.__NEKO_TELEMETRY_CONFIG__ = {};
+EOF
+  fi
+}
+
+# Generate telemetry config before services start
+generate_telemetry_config
+
 # -----------------------------------------------------------------------------
 # Dynamic log aggregation for /var/log/supervisord -----------------------------
 # -----------------------------------------------------------------------------
