fix(striker-ui): expose novnc internal websock error, close events

striker-ui/components/Display/VncDisplay.tsx

@@ -1,4 +1,5 @@
 import RFB from '@novnc/novnc/core/rfb';
+import Websock from '@novnc/novnc/core/websock';
 import { useEffect } from 'react';
 
 const rfbConnect: RfbConnectFunction = ({
@@ -9,6 +10,8 @@ const rfbConnect: RfbConnectFunction = ({
   focusOnClick = false,
   onConnect,
   onDisconnect,
+  onWsClose,
+  onWsError,
   qualityLevel = 6,
   resizeSession = true,
   rfb,
@@ -45,6 +48,23 @@ const rfbConnect: RfbConnectFunction = ({
   if (onDisconnect) {
     rfb.current.addEventListener('disconnect', onDisconnect);
   }
+
+  /* eslint-disable no-underscore-dangle */
+  const ws: typeof Websock = rfb.current._sock;
+
+  const socketClose = ws._eventHandlers.close;
+  const socketError = ws._eventHandlers.error;
+
+  ws.on('close', (e?: WebsockCloseEvent) => {
+    socketClose(e);
+    onWsClose?.call(null, e);
+  });
+
+  ws.on('error', (e: Event) => {
+    socketError(e);
+    onWsError?.call(null, e);
+  });
+  /* eslint-enable no-underscore-dangle */
 };
 
 const rfbDisconnect: RfbDisconnectFunction = (rfb) => {
@@ -58,6 +78,8 @@ const VncDisplay = (props: VncDisplayProps): JSX.Element => {
   const {
     onConnect,
     onDisconnect,
+    onWsClose,
+    onWsError,
     rfb,
     rfbConnectArgs,
     rfbScreen,
@@ -73,6 +95,8 @@ const VncDisplay = (props: VncDisplayProps): JSX.Element => {
       const args: RfbConnectArgs = {
         onConnect,
         onDisconnect,
+        onWsClose,
+        onWsError,
         rfb,
         rfbScreen,
         url,
@@ -83,7 +107,16 @@ const VncDisplay = (props: VncDisplayProps): JSX.Element => {
     } else {
       rfbDisconnect(rfb);
     }
-  }, [initUrl, onConnect, onDisconnect, rfb, rfbConnectArgs, rfbScreen]);
+  }, [
+    initUrl,
+    onConnect,
+    onDisconnect,
+    onWsClose,
+    onWsError,
+    rfb,
+    rfbConnectArgs,
+    rfbScreen,
+  ]);
 
   useEffect(
     () => () => {

striker-ui/types/VncDisplay.d.ts

@@ -4,6 +4,8 @@ type RfbRef = import('react').MutableRefObject<
 
 type RfbScreenRef = import('react').MutableRefObject<HTMLDivElement | null>;
 
+type WebsockCloseEvent = Event & { code: number; reason: string };
+
 type RfbConnectArgs = {
   background?: string;
   clipViewport?: boolean;
@@ -12,6 +14,8 @@ type RfbConnectArgs = {
   focusOnClick?: boolean;
   onConnect?: () => void;
   onDisconnect?: (event: { detail: { clean: boolean } }) => void;
+  onWsClose?: (event?: WebsockCloseEvent) => void;
+  onWsError?: (event: Event) => void;
   qualityLevel?: number;
   resizeSession?: boolean;
   rfb: RfbRef;

striker-ui/types/novnc__novnc.d.ts

@@ -1 +1,2 @@
 declare module '@novnc/novnc/core/rfb';
+declare module '@novnc/novnc/core/websock';