feat: Improve Appium Inspector stability by handling USB/Wifi disconnection gracefully (#2328)

* Improve Appium Inspector stability by handling USB/Wifi disconnection

* handled undefined localstorage

* handled undefined localstorage

* handled undefined localstorage

* handled undefined localstorage

* Toggle for Auto Restart Session added

* Toggle for Auto Restart Session added

* Images updated in assets folder

* Images are updated in assets folder

* Comments Fixed

* minor fix

* implemented custom session expired error message

* comment fixed

* comment fixed

* Comment Fixed

* Comment fixed

* Comment Fixed

* lint, prettier check

* comment fixed

* else part added for the condition

* W3C error code implemented to check session expire

* Comment Fixed

* Comment Fixed

* Comment Fixed

* Comment Fixed

* Catch block pushed to callClientMethod from applyClientMethod

* Constant Added

* lint and prettier the code

* prettier the code

* comment fixed

* replacing with unicode for ellipses and hyphen

Author: mohangowdak

app/common/public/locales/en/translation.json

@@ -314,5 +314,7 @@
   "Fireflink DeviceFarm Domain": "Fireflink DeviceFarm Domain",
   "Fireflink DeviceFarm Access Key": "Fireflink DeviceFarm Access Key",
   "Fireflink DeviceFarm License ID": "Fireflink DeviceFarm License ID",
-  "Fireflink DeviceFarm Project Name": "Fireflink DeviceFarm Project Name"
+  "Fireflink DeviceFarm Project Name": "Fireflink DeviceFarm Project Name",
+  "RestartSessionMessage": "Device Connection Lost – Restarting the Session…",
+  "ToggleRestartSession": "Toggle Session Reload Upon Device Disconnect"
 }

app/common/renderer/actions/SessionInspector.js

@@ -2,21 +2,22 @@ import _ from 'lodash';
 
 import {SAVED_CLIENT_FRAMEWORK, SET_SAVED_GESTURES} from '../../shared/setting-defs.js';
 import {POINTER_TYPES} from '../constants/gestures.js';
-import {APP_MODE, NATIVE_APP} from '../constants/session-inspector.js';
+import {APP_MODE, NATIVE_APP, UNKNOWN_ERROR} from '../constants/session-inspector.js';
 import i18n from '../i18next.js';
 import InspectorDriver from '../lib/appium/inspector-driver.js';
 import {CLIENT_FRAMEWORK_MAP} from '../lib/client-frameworks/map.js';
 import {getSetting, setSetting} from '../polyfills.js';
 import {readTextFromUploadedFiles} from '../utils/file-handling.js';
 import {getOptimalXPath, getSuggestedLocators} from '../utils/locator-generation.js';
 import {log} from '../utils/logger.js';
+import {notification} from '../utils/notification.js';
 import {
   findDOMNodeByPath,
   findJSONElementByPath,
   xmlToDOM,
   xmlToJSON,
 } from '../utils/source-parsing.js';
-import {showError} from './SessionBuilder.js';
+import {newSession, showError} from './SessionBuilder.js';
 
 export const SET_SESSION_DETAILS = 'SET_SESSION_DETAILS';
 export const SET_SOURCE_AND_SCREENSHOT = 'SET_SOURCE_AND_SCREENSHOT';
@@ -117,6 +118,7 @@ export const TOGGLE_SHOW_ATTRIBUTES = 'TOGGLE_SHOW_ATTRIBUTES';
 export const TOGGLE_REFRESHING_STATE = 'TOGGLE_REFRESHING_STATE';
 
 export const SET_GESTURE_UPLOAD_ERROR = 'SET_GESTURE_UPLOAD_ERROR';
+export const SET_AUTO_SESSION_RESTART = 'SET_AUTO_SESSION_RESTART';
 
 const KEEP_ALIVE_PING_INTERVAL = 20 * 1000;
 const NO_NEW_COMMAND_LIMIT = 24 * 60 * 60 * 1000; // Set timeout to 24 hours
@@ -272,65 +274,90 @@ export function applyClientMethod(params) {
       params.methodName !== 'getPageSource' &&
       params.methodName !== 'gesture' &&
       getState().inspector.isRecording;
-    try {
-      dispatch({type: METHOD_CALL_REQUESTED});
-      const callAction = callClientMethod(params);
-      const {
+    dispatch({type: METHOD_CALL_REQUESTED});
+    const callAction = callClientMethod(params);
+    const {
+      contexts,
+      contextsError,
+      commandRes,
+      currentContext,
+      currentContextError,
+      source,
+      screenshot,
+      windowSize,
+      sourceError,
+      screenshotError,
+      windowSizeError,
+      variableName,
+      variableIndex,
+      strategy,
+      selector,
+    } = await callAction(dispatch, getState);
+
+    // TODO: Implement recorder code for gestures
+    if (isRecording) {
+      // Add 'findAndAssign' line of code. Don't do it for arrays though. Arrays already have 'find' expression
+      if (strategy && selector && !variableIndex && variableIndex !== 0) {
+        const findAction = findAndAssign(strategy, selector, variableName, false);
+        findAction(dispatch, getState);
+      }
+
+      // now record the actual action
+      let args = [variableName, variableIndex];
+      args = args.concat(params.args || []);
+      dispatch({type: RECORD_ACTION, action: params.methodName, params: args});
+    }
+    dispatch({type: METHOD_CALL_DONE});
+
+    if (source) {
+      dispatch({
+        type: SET_SOURCE_AND_SCREENSHOT,
         contexts,
-        contextsError,
-        commandRes,
         currentContext,
-        currentContextError,
-        source,
+        sourceJSON: xmlToJSON(source),
+        sourceXML: source,
         screenshot,
         windowSize,
+        contextsError,
+        currentContextError,
         sourceError,
         screenshotError,
         windowSizeError,
-        variableName,
-        variableIndex,
-        strategy,
-        selector,
-      } = await callAction(dispatch, getState);
-
-      // TODO: Implement recorder code for gestures
-      if (isRecording) {
-        // Add 'findAndAssign' line of code. Don't do it for arrays though. Arrays already have 'find' expression
-        if (strategy && selector && !variableIndex && variableIndex !== 0) {
-          const findAction = findAndAssign(strategy, selector, variableName, false);
-          findAction(dispatch, getState);
-        }
-
-        // now record the actual action
-        let args = [variableName, variableIndex];
-        args = args.concat(params.args || []);
-        dispatch({type: RECORD_ACTION, action: params.methodName, params: args});
-      }
-      dispatch({type: METHOD_CALL_DONE});
+      });
+    }
+    window.dispatchEvent(new Event('resize'));
+    return commandRes;
+  };
+}
 
-      if (source) {
-        dispatch({
-          type: SET_SOURCE_AND_SCREENSHOT,
-          contexts,
-          currentContext,
-          sourceJSON: xmlToJSON(source),
-          sourceXML: source,
-          screenshot,
-          windowSize,
-          contextsError,
-          currentContextError,
-          sourceError,
-          screenshotError,
-          windowSizeError,
-        });
-      }
-      window.dispatchEvent(new Event('resize'));
-      return commandRes;
-    } catch (error) {
-      log.error(error);
+export function restartSession(error, params) {
+  return async (dispatch, getState) => {
+    if (error?.name !== UNKNOWN_ERROR) {
       showError(error, {methodName: params.methodName, secs: 10});
-      dispatch({type: METHOD_CALL_DONE});
+      return dispatch({type: METHOD_CALL_DONE});
     }
+    showError(error, {methodName: params.methodName, secs: 3});
+    notification.info({
+      message: i18n.t('RestartSessionMessage'),
+      duration: 3,
+    });
+    const quitSes = quitSession('Window closed');
+    const newSes = newSession(getState().builder.caps);
+    const getPageSrc = applyClientMethod({methodName: 'getPageSource', ignoreResult: true});
+    const storeSessionSet = storeSessionSettings();
+    const getSavedClientFrame = getSavedClientFramework();
+    const runKeepAliveLp = runKeepAliveLoop();
+    const setSesTime = setSessionTime(Date.now());
+
+    await quitSes(dispatch, getState);
+    await newSes(dispatch, getState);
+    await getPageSrc(dispatch, getState);
+    await storeSessionSet(dispatch, getState);
+    await getSavedClientFrame(dispatch);
+    runKeepAliveLp(dispatch, getState);
+    setSesTime(dispatch);
+    dispatch({type: SET_AUTO_SESSION_RESTART, autoSessionRestart: true});
+    dispatch({type: METHOD_CALL_DONE});
   };
 }
 
@@ -878,9 +905,11 @@ export function keepSessionAlive() {
 
 export function callClientMethod(params) {
   return async (dispatch, getState) => {
-    const {driver, appMode, isUsingMjpegMode, isSourceRefreshOn} = getState().inspector;
+    const {driver, appMode, isUsingMjpegMode, isSourceRefreshOn, autoSessionRestart} =
+      getState().inspector;
     const {methodName, ignoreResult = true} = params;
     params.appMode = appMode;
+    params.autoSessionRestart = autoSessionRestart;
 
     // don't retrieve screenshot if we're already using the mjpeg stream
     if (isUsingMjpegMode) {
@@ -893,28 +922,38 @@ export function callClientMethod(params) {
 
     log.info(`Calling client method with params:`);
     log.info(params);
-    const action = keepSessionAlive();
-    action(dispatch, getState);
-    const inspectorDriver = InspectorDriver.instance(driver);
-    const res = await inspectorDriver.run(params);
-    let {commandRes} = res;
-
-    // Ignore empty objects
-    if (_.isObject(res) && _.isEmpty(res)) {
-      commandRes = null;
-    }
+    try {
+      const action = keepSessionAlive();
+      action(dispatch, getState);
+      const inspectorDriver = InspectorDriver.instance(driver);
+      const res = await inspectorDriver.run(params);
+      let {commandRes} = res;
+
+      // Ignore empty objects
+      if (_.isObject(res) && _.isEmpty(res)) {
+        commandRes = null;
+      }
 
-    if (!ignoreResult) {
-      // if the user is running actions manually, we want to show the full response with the
-      // ability to scroll etc...
-      const result = JSON.stringify(commandRes, null, '  ');
-      const truncatedResult = _.truncate(result, {length: 2000});
-      log.info(`Result of client command was:`);
-      log.info(truncatedResult);
-      setVisibleCommandResult(result, methodName)(dispatch);
+      if (!ignoreResult) {
+        // if the user is running actions manually, we want to show the full response with the
+        // ability to scroll etc...
+        const result = JSON.stringify(commandRes, null, '  ');
+        const truncatedResult = _.truncate(result, {length: 2000});
+        log.info(`Result of client command was:`);
+        log.info(truncatedResult);
+        setVisibleCommandResult(result, methodName)(dispatch);
+      }
+      res.elementId = res.id;
+      return res;
+    } catch (error) {
+      log.error(error);
+      if (getState().inspector.autoSessionRestart) {
+        const restartSes = restartSession(error, params);
+        return await restartSes(dispatch, getState);
+      }
+      showError(error, {methodName: params.methodName, secs: 10});
+      dispatch({type: METHOD_CALL_DONE});
     }
-    res.elementId = res.id;
-    return res;
   };
 }
 
@@ -1096,3 +1135,10 @@ export function toggleShowAttributes() {
     dispatch({type: TOGGLE_SHOW_ATTRIBUTES});
   };
 }
+
+export function toggleAutoSessionRestart() {
+  return (dispatch, getState) => {
+    const autoSessionRestart = !getState().inspector.autoSessionRestart;
+    dispatch({type: SET_AUTO_SESSION_RESTART, autoSessionRestart});
+  };
+}

app/common/renderer/components/SessionInspector/Header/HeaderButtons.jsx

@@ -11,7 +11,7 @@ import {
   VideoCameraOutlined,
 } from '@ant-design/icons';
 import {Button, Divider, Select, Space, Tooltip} from 'antd';
-import {BiCircle, BiSquare} from 'react-icons/bi';
+import {BiCircle, BiRecycle, BiSquare} from 'react-icons/bi';
 import {HiOutlineHome, HiOutlineMicrophone} from 'react-icons/hi';
 import {IoChevronBackOutline} from 'react-icons/io5';
 
@@ -40,6 +40,8 @@ const HeaderButtons = (props) => {
     currentContext,
     setContext,
     t,
+    autoSessionRestart,
+    toggleAutoSessionRestart,
   } = props;
 
   const deviceControls = (
@@ -225,12 +227,24 @@ const HeaderButtons = (props) => {
     </Tooltip>
   );
 
+  const sessionReloadButton = (
+    <Tooltip title={t('ToggleRestartSession')}>
+      <Button
+        id={autoSessionRestart ? 'btnDisableRestartSession' : 'btnEnableRestartSession'}
+        icon={<BiRecycle />}
+        type={autoSessionRestart ? BUTTON.PRIMARY : undefined}
+        onClick={toggleAutoSessionRestart}
+      />
+    </Tooltip>
+  );
+
   return (
     <div className={styles.headerButtons}>
       <Space size="middle">
         {deviceControls}
         {appModeControls}
         {generalControls}
+        {sessionReloadButton}
         {quitSessionButton}
       </Space>
       <Divider />

app/common/renderer/constants/session-inspector.js

@@ -9,6 +9,9 @@ export const APP_MODE = {
 
 export const NATIVE_APP = 'NATIVE_APP';
 
+export const UNKNOWN_ERROR = 'unknown error';
+export const SESSION_EXPIRED = 'Session Expired';
+
 export const LOCATOR_STRATEGIES = {
   ID: 'id',
   XPATH: 'xpath',