Implement engine-disconnect client reporting (#12489)

Author: pierremtb

src/components/ConnectionStream.tsx

@@ -7,14 +7,18 @@ import { useOnPageExit } from '@src/hooks/network/useOnPageExit'
 import { useOnPageIdle } from '@src/hooks/network/useOnPageIdle'
 import { useOnPageMounted } from '@src/hooks/network/useOnPageMounted'
 import { useOnPageResize } from '@src/hooks/network/useOnPageResize'
-import { useOnPeerConnectionClose } from '@src/hooks/network/useOnPeerConnectionClose'
+import {
+  type EngineDisconnectEvent,
+  useOnPeerConnectionClose,
+} from '@src/hooks/network/useOnPeerConnectionClose'
 import { useOnVitestEngineOnline } from '@src/hooks/network/useOnVitestEngineOnline'
 import { useOnWebsocketClose } from '@src/hooks/network/useOnWebsocketClose'
 import { useOnWindowOnlineOffline } from '@src/hooks/network/useOnWindowOnlineOffline'
 import { useTryConnect } from '@src/hooks/network/useTryConnect'
 import { useModelingContext } from '@src/hooks/useModelingContext'
 import { useNetworkContext } from '@src/hooks/useNetworkContext'
 import { NetworkHealthState } from '@src/hooks/useNetworkStatus'
+import { ClientErrorCode, reportClientError } from '@src/lib/clientErrors'
 import { findOperationForArtifact } from '@src/lang/queryAst'
 import {
   getArtifactOfTypes,
@@ -32,6 +36,7 @@ import {
 } from '@src/lib/selections'
 import { Themes, getResolvedTheme } from '@src/lib/theme'
 import { err, reportRejection } from '@src/lib/trap'
+import { EngineCommandManagerEvents } from '@src/network/utils'
 import type {
   EngineSceneExtensionContext,
   EngineSceneStreamLayer,
@@ -41,6 +46,14 @@ import { use, useCallback, useMemo, useRef, useState } from 'react'
 
 const TIME_TO_CONNECT = 30_000
 
+const stringHash = (value: string) => {
+  let hash = 0
+  for (let i = 0; i < value.length; i++) {
+    hash = (hash * 31 + value.charCodeAt(i)) | 0
+  }
+  return hash.toString(36)
+}
+
 interface ConnectionStreamProps {
   authToken: string | undefined
   sketchSolveStreamDimming?: number
@@ -81,6 +94,45 @@ export const ConnectionStream = (props: ConnectionStreamProps) => {
     return isSafari ? ' object-fill' : ''
   }, [])
 
+  const reportEngineDisconnect = useCallback(
+    (eventType: EngineDisconnectEvent, extra?: Record<string, unknown>) => {
+      const kclSource = kclManager.code
+      const connection = engineCommandManager.connection
+
+      void reportClientError({
+        code: ClientErrorCode.EngineDisconnect,
+        message: `Engine disconnected: ${eventType}`,
+        dedupeKey: `ConnectionStream:engine-disconnect:${eventType}:${kclManager.currentFileName ?? 'unknown'}:${stringHash(kclSource)}`,
+        extra: {
+          source: 'ConnectionStream',
+          eventType,
+          projectName: project?.name,
+          currentFileName: kclManager.currentFileName,
+          isSceneReady,
+          numberOfConnectionAttempts,
+          pendingCommandCount: Object.keys(engineCommandManager.pendingCommands)
+            .length,
+          hasConnection: Boolean(connection),
+          connectionId: connection?.id,
+          connectionConnected: connection?.connected,
+          peerConnectionState: connection?.peerConnection?.connectionState,
+          iceConnectionState: connection?.peerConnection?.iceConnectionState,
+          dataChannelReadyState: connection?.unreliableDataChannel?.readyState,
+          ...extra,
+          kclSourceLength: kclSource.length,
+          kclSource,
+        },
+      })
+    },
+    [
+      engineCommandManager,
+      isSceneReady,
+      kclManager,
+      numberOfConnectionAttempts,
+      project?.name,
+    ]
+  )
+
   const handleMouseUp: MouseEventHandler<HTMLDivElement> = useCallback(
     (e) => {
       if (!isNetworkOkay) return
@@ -337,7 +389,10 @@ export const ConnectionStream = (props: ConnectionStreamProps) => {
 
   const onWebSocketCloseParams = useMemo(
     () => ({
-      callback: () => {
+      callback: (code: string | undefined) => {
+        reportEngineDisconnect(EngineCommandManagerEvents.WebsocketClosed, {
+          websocketCloseCode: code,
+        })
         setShowManualConnect(false)
         tryConnecting({
           authToken: props.authToken || '',
@@ -356,13 +411,22 @@ export const ConnectionStream = (props: ConnectionStreamProps) => {
           setShowManualConnect(true)
         })
       },
-      infiniteDetectionLoopCallback: () => {
+      infiniteDetectionLoopCallback: (code: string | undefined) => {
+        reportEngineDisconnect(EngineCommandManagerEvents.WebsocketClosed, {
+          websocketCloseCode: code,
+        })
         setShowManualConnect(true)
       },
       engineCommandManager,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isConnecting, numberOfConnectionAttempts, props.authToken, settings]
+    [
+      isConnecting,
+      numberOfConnectionAttempts,
+      props.authToken,
+      reportEngineDisconnect,
+      settings,
+    ]
   )
   useOnWebsocketClose(onWebSocketCloseParams)
 
@@ -396,7 +460,8 @@ export const ConnectionStream = (props: ConnectionStreamProps) => {
 
   const onPeerConnectionCloseParams = useMemo(
     () => ({
-      callback: () => {
+      callback: (eventType: EngineDisconnectEvent) => {
+        reportEngineDisconnect(eventType)
         setShowManualConnect(false)
         tryConnecting({
           authToken: props.authToken || '',
@@ -418,7 +483,13 @@ export const ConnectionStream = (props: ConnectionStreamProps) => {
       engineCommandManager,
     }),
     // eslint-disable-next-line react-hooks/exhaustive-deps
-    [isConnecting, numberOfConnectionAttempts, props.authToken, settings]
+    [
+      isConnecting,
+      numberOfConnectionAttempts,
+      props.authToken,
+      reportEngineDisconnect,
+      settings,
+    ]
   )
   useOnPeerConnectionClose(onPeerConnectionCloseParams)
 

src/hooks/network/useOnPeerConnectionClose.spec.tsx

@@ -163,6 +163,9 @@ describe('useOnPeerConnectionClose', () => {
         )
         unmount()
         expect(callback).toHaveBeenCalledTimes(1)
+        expect(callback).toHaveBeenCalledWith(
+          EngineCommandManagerEvents.peerConnectionDisconnected
+        )
       })
       test('dispatched peerConnectionFailed', async () => {
         const callback = vi.fn(() => 1)

src/hooks/network/useOnPeerConnectionClose.tsx

@@ -2,8 +2,15 @@ import type { ConnectionManager } from '@src/network/connectionManager'
 import { EngineCommandManagerEvents } from '@src/network/utils'
 import { useEffect } from 'react'
 
+export type EngineDisconnectEvent =
+  | EngineCommandManagerEvents.WebsocketClosed
+  | EngineCommandManagerEvents.peerConnectionClosed
+  | EngineCommandManagerEvents.peerConnectionDisconnected
+  | EngineCommandManagerEvents.peerConnectionFailed
+  | EngineCommandManagerEvents.dataChannelClose
+
 export interface IUseOnPeerConnectionClose {
-  callback: () => void
+  callback: (eventType: EngineDisconnectEvent) => void
   engineCommandManager: ConnectionManager
 }
 /**
@@ -20,8 +27,8 @@ export function useOnPeerConnectionClose({
 }: IUseOnPeerConnectionClose) {
   useEffect(() => {
     // same failure handler for all for now
-    const onFailure: EventListener = () => {
-      callback()
+    const onFailure: EventListener = (event) => {
+      callback(event.type as EngineDisconnectEvent)
     }
 
     engineCommandManager.addEventListener(

src/hooks/network/useOnWebsocketClose.spec.tsx

@@ -57,6 +57,7 @@ describe('useOnWebsocketClose', () => {
       )
       unmount()
       expect(callback).toHaveBeenCalledTimes(1)
+      expect(callback).toHaveBeenCalledWith(undefined)
     })
     test('should call infinite detection loop callback on close event', async () => {
       const callback = vi.fn(() => 1)
@@ -82,6 +83,7 @@ describe('useOnWebsocketClose', () => {
       unmount()
       expect(callback).toHaveBeenCalledTimes(0)
       expect(infiniteLoopCallback).toHaveBeenCalledTimes(1)
+      expect(infiniteLoopCallback).toHaveBeenCalledWith('1006')
     })
   })
 })

src/hooks/network/useOnWebsocketClose.tsx

@@ -4,8 +4,8 @@ import { EngineCommandManagerEvents } from '@src/network/utils'
 import { useEffect } from 'react'
 
 export interface IUseOnWebsocketClose {
-  callback: () => void
-  infiniteDetectionLoopCallback: () => void
+  callback: (code: string | undefined) => void
+  infiniteDetectionLoopCallback: (code: string | undefined) => void
   engineCommandManager: ConnectionManager
 }
 
@@ -20,7 +20,7 @@ export function useOnWebsocketClose({
   engineCommandManager,
 }: IUseOnWebsocketClose) {
   useEffect(() => {
-    const onWebsocketClose = (event: CustomEvent) => {
+    const onWebsocketClose = (event: CustomEvent<{ code?: string }>) => {
       if (event?.detail?.code === '1006') {
         // Most likely your internet is out. Do not try to auto reconnect
         // This will result in an infinite loop
@@ -32,11 +32,11 @@ export function useOnWebsocketClose({
           },
         })
 
-        infiniteDetectionLoopCallback()
+        infiniteDetectionLoopCallback(event.detail.code)
         return
       }
 
-      callback()
+      callback(event?.detail?.code)
     }
 
     engineCommandManager.addEventListener(

src/lib/clientErrors.ts

@@ -13,6 +13,7 @@ type ReportClientErrorParams = {
 }
 
 export enum ClientErrorCode {
+  EngineDisconnect = 'engine_disconnect',
   UserFeaturesFetchError = 'user_features_fetch_error',
   ZookeeperActorError = 'zookeeper_actor_error',
   ZookeeperSetupError = 'zookeeper_setup_error',