Fix WebUI becoming unresponsive if the MultiClient was closed but the WebAUI was left open for too long.

- Implemented maximum number of retry attempts (20)
    - Added Output Logs directory to .gitignore

data/web/package.json

@@ -12,7 +12,7 @@
   "dependencies": {
     "@fortawesome/fontawesome-svg-core": "^1.2.28",
     "@fortawesome/free-solid-svg-icons": "^5.13.0",
-    "@fortawesome/react-fontawesome": "^0.1.9",
+    "@fortawesome/react-fontawesome": "^0.1.10",
     "crypto-js": "^4.0.0",
     "css-loader": "^3.5.3",
     "lodash-es": "^4.17.15",
@@ -20,7 +20,7 @@
     "react": "^16.13.1",
     "react-dom": "^16.13.1",
     "react-redux": "^7.2.0",
-    "react-router-dom": "^5.1.2",
+    "react-router-dom": "^5.2.0",
     "redux": "^4.0.5",
     "redux-devtools-extension": "^2.13.8",
     "sass-loader": "^8.0.2",
@@ -28,20 +28,20 @@
     "webpack-cli": "^3.3.11"
   },
   "devDependencies": {
-    "@babel/core": "^7.9.6",
+    "@babel/core": "^7.10.2",
-    "@babel/plugin-proposal-class-properties": "^7.8.3",
+    "@babel/plugin-proposal-class-properties": "^7.10.1",
-    "@babel/preset-env": "^7.9.6",
+    "@babel/preset-env": "^7.10.2",
-    "@babel/preset-react": "^7.9.4",
+    "@babel/preset-react": "^7.10.1",
     "babel-eslint": "^10.1.0",
     "babel-loader": "^8.1.0",
     "eslint": "^6.8.0",
     "eslint-config-airbnb": "^18.1.0",
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-jsx-a11y": "^6.2.3",
-    "eslint-plugin-react": "^7.19.0",
+    "eslint-plugin-react": "^7.20.0",
     "eslint-plugin-react-hooks": "^2.5.1",
     "file-loader": "^6.0.0",
-    "node-sass": "^4.14.0",
+    "node-sass": "^4.14.1",
     "webpack": "^4.43.0"
   }
 }

data/web/src/js/WebUI/containers/WebUI.js

@@ -3,12 +3,14 @@ import { connect } from 'react-redux';
 import HeaderBar from '../../HeaderBar/components/HeaderBar';
 import Monitor from '../../Monitor/components/Monitor';
 import WidgetArea from '../../WidgetArea/containers/WidgetArea';
+import MonitorTools from '../../global/MonitorTools';
 import '../../../styles/WebUI/containers/WebUI.scss';
 
 // Redux actions
 import setWebSocket from '../Redux/actions/setWebSocket';
 import WebSocketUtils from '../../global/WebSocketUtils';
 import updateGameState from '../../global/Redux/actions/updateGameState';
+import appendMessage from '../../Monitor/Redux/actions/appendMessage';
 
 const mapReduxStateToProps = (reduxState) => ({
   connections: reduxState.gameState.connections,
@@ -18,13 +20,18 @@ const mapDispatchToProps = (dispatch) => ({
   doSetWebSocket: (webSocket) => dispatch(setWebSocket(webSocket)),
   handleIncomingMessage: (message) => dispatch(WebSocketUtils.handleIncomingMessage(message)),
   doUpdateGameState: (gameState) => dispatch(updateGameState(gameState)),
+  appendMonitorMessage: (message) => dispatch(appendMessage(message)),
 });
 
 class WebUI extends Component {
   constructor(props) {
     super(props);
     this.webSocket = null;
+    this.maxConnectionAttempts = 20;
     this.webUiRef = React.createRef();
+    this.state = {
+      connectionAttempts: 0,
+    };
   }
 
   componentDidMount() {
@@ -32,6 +39,18 @@ class WebUI extends Component {
   }
 
   webSocketConnect = () => {
+    this.props.appendMonitorMessage(MonitorTools.createTextDiv(
+      `Attempting to connect to MultiClient (attempt ${this.state.connectionAttempts + 1})...`,
+    ));
+    // eslint-disable-next-line react/no-access-state-in-setstate
+    this.setState({ connectionAttempts: this.state.connectionAttempts + 1 }, () => {
+      if (this.state.connectionAttempts >= 20) {
+        this.props.appendMonitorMessage(MonitorTools.createTextDiv(
+          'Unable to connect to MultiClient. Maximum of 20 attempts exceeded.',
+        ));
+        return;
+      }
+
       const getParams = new URLSearchParams(document.location.search.substring(1));
       const port = getParams.get('port');
       if (!port) { throw new Error('Unable to determine socket port from GET parameters'); }
@@ -54,19 +73,9 @@ class WebUI extends Component {
             serverConnected: false,
           },
         });
+        if (this.state.connectionAttempts < this.maxConnectionAttempts) {
           setTimeout(this.webSocketConnect, 5000);
-    };
+        }
-    webSocket.onclose = () => {
-      // If the WebSocket connection is closed for some reason, attempt to reconnect
-      this.props.doUpdateGameState({
-        connections: {
-          snesDevice: this.props.connections.snesDevice,
-          snesConnected: false,
-          serverAddress: this.props.connections.serverAddress,
-          serverConnected: false,
-        },
-      });
-      setTimeout(this.webSocketConnect, 5000);
       };
 
       // Dispatch a custom event when websocket messages are received
@@ -78,7 +87,11 @@ class WebUI extends Component {
       webSocket.onopen = () => {
         this.props.doSetWebSocket(webSocket);
         webSocket.send(WebSocketUtils.formatSocketData('webStatus', 'connections'));
+        this.props.appendMonitorMessage(MonitorTools.createTextDiv('Connected to MultiClient.'));
+        this.setState({ connectionAttempts: 0 });
       };
+      this.setState({ connectionInProgress: false });
+    });
   };
 
   render() {