fix(config): added configurable retry duration and logging

.github/workflows/demo.yml

@@ -2,7 +2,7 @@ name: Deploy to github.io
 
 on:
   push:
-    branches: [ master ]
+    branches: [ main ]
 
 jobs:
   deploy:

README.md

@@ -144,6 +144,8 @@ interface Props {
   background?: string;
   qualityLevel?: number;
   compressionLevel?: number;
+  retryDuration?: number; // in milliseconds
+  debug?: boolean; // show logs in the console
 }
 ```
 

src/App.tsx

@@ -49,6 +49,7 @@ function App() {
                   width: '75vw',
                   height: '75vh',
                 }}
+                debug
               />
             )
             : <div>VNC URL not provided.</div>

src/lib/VncScreen.tsx

@@ -15,6 +15,8 @@ interface Props {
     background?: string;
     qualityLevel?: number;
     compressionLevel?: number;
+    retryDuration?: number;
+    debug?: boolean;
 }
 
 export default function VncScreen(props: Props) {
@@ -36,8 +38,16 @@ export default function VncScreen(props: Props) {
         background,
         qualityLevel,
         compressionLevel,
+        retryDuration = 3000,
+        debug = false,
     } = props;
 
+    const logger = {
+        log: (...args: any[]) => { if (debug) console.log(...args); },
+        info: (...args: any[]) => { if (debug) console.info(...args); },
+        error: (...args: any[]) => { if (debug) console.error(...args); },
+    };
+
     const disconnect = () => {
         if (!rfb) {
             return;
@@ -48,48 +58,51 @@ export default function VncScreen(props: Props) {
     };
 
     const connect = () => {
-        disconnect();
-
-        if (!screen.current) {
-            return;
+        try {
+            disconnect();
+
+            if (!screen.current) {
+                return;
+            }
+
+            screen.current.innerHTML = '';
+
+            const _rfb = new RFB(screen.current, url);
+
+            _rfb.viewOnly = viewOnly || false;
+            _rfb.focusOnClick = focusOnClick || false;
+            _rfb.clipViewport = clipViewport || false;
+            _rfb.dragViewport = dragViewport || false;
+            _rfb.resizeSession = resizeSession || false;
+            _rfb.scaleViewport = scaleViewport || false;
+            _rfb.showDotCursor = showDotCursor || false;
+            _rfb.background = background || '';
+            _rfb.qualityLevel = qualityLevel || 6;
+            _rfb.compressionLevel = compressionLevel || 2;
+            setRfb(_rfb);
+
+            _rfb.addEventListener('connect', () => {
+                logger.info('Connected to remote VNC.');
+                setLoading(false);
+            });
+
+            _rfb.addEventListener('disconnect', () => {
+                logger.info(`Disconnected from remote VNC, retrying in ${retryDuration / 1000} seconds.`);
+                setTimeout(connect, retryDuration);
+                setLoading(true);
+            });
+
+            _rfb.addEventListener('credentialsrequired', () => {
+                const password = prompt("Password Required:");
+                _rfb.sendCredentials({ password: password });
+            });
+
+            _rfb.addEventListener('desktopname', (e: { detail: { name: string } }) => {
+                logger.info(`Desktop name is ${e.detail.name}`);
+            });
+        } catch (err) {
+            logger.error(err);
         }
-
-        screen.current.innerHTML = '';
-
-        const _rfb = new RFB(screen.current, url);
-
-        _rfb.viewOnly = viewOnly || false;
-        _rfb.focusOnClick = focusOnClick || false;
-        _rfb.clipViewport = clipViewport || false;
-        _rfb.dragViewport = dragViewport || false;
-        _rfb.resizeSession = resizeSession || false;
-        _rfb.scaleViewport = scaleViewport || false;
-        _rfb.showDotCursor = showDotCursor || false;
-        _rfb.background = background || '';
-        _rfb.qualityLevel = qualityLevel || 6;
-        _rfb.compressionLevel = compressionLevel || 2;
-        setRfb(_rfb);
-
-        _rfb.addEventListener('connect', () => {
-            console.info('Connected to remote VNC.');
-            setLoading(false);
-        });
-
-        _rfb.addEventListener('disconnect', () => {
-            const retryDuration = 3000;
-            console.info(`Disconnected from remote VNC, retrying in ${retryDuration / 1000} seconds.`);
-            setTimeout(connect, retryDuration);
-            setLoading(true);
-        });
-
-        _rfb.addEventListener('credentialsrequired', () => {
-            const password = prompt("Password Required:");
-            _rfb.sendCredentials({ password: password });
-        });
-
-        _rfb.addEventListener('desktopname', (e: { detail: { name: string } }) => {
-            console.info(`Desktop name is ${e.detail.name}`);
-        });
     };
 
     useEffect(() => {