New: Warn if UI won't update due to SignalR errors

frontend/src/Components/SignalRConnector.js

@@ -120,7 +120,7 @@ class SignalRConnector extends Component {
 
     this.connection.on('receiveMessage', this.onReceiveMessage);
 
-    this.connection.start().then(this.onConnected);
+    this.connection.start().then(this.onStart, this.onStartFail);
   }
 
   componentWillUnmount() {
@@ -296,7 +296,19 @@ class SignalRConnector extends Component {
   //
   // Listeners
 
-  onConnected = () => {
+  onStartFail = (error) => {
+    console.error('[signalR] failed to connect');
+    console.error(error);
+
+    this.props.dispatchSetAppValue({
+      isConnected: false,
+      isReconnecting: false,
+      isDisconnected: false,
+      isRestarting: false
+    });
+  }
+
+  onStart = () => {
     console.debug('[signalR] connected');
 
     this.props.dispatchSetAppValue({

frontend/src/Store/Selectors/createHealthCheckSelector.js

@@ -0,0 +1,24 @@
+import { createSelector } from 'reselect';
+
+function createHealthCheckSelector() {
+  return createSelector(
+    (state) => state.system.health,
+    (state) => state.app,
+    (health, app) => {
+      const items = [...health.items];
+
+      if (!app.isConnected) {
+        items.push({
+          source: 'UI',
+          type: 'warning',
+          message: 'Could not connect to SignalR, UI won\'t update',
+          wikiUrl: 'https://github.com/Lidarr/Lidarr/wiki/Health-Checks#could-not-connect-to-signalr'
+        });
+      }
+
+      return items;
+    }
+  );
+}
+
+export default createHealthCheckSelector;

frontend/src/System/Status/Health/HealthConnector.js

@@ -2,20 +2,21 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
 import { fetchHealth } from 'Store/Actions/systemActions';
 import { testAllDownloadClients, testAllIndexers } from 'Store/Actions/settingsActions';
 import Health from './Health';
 
 function createMapStateToProps() {
   return createSelector(
+    createHealthCheckSelector(),
     (state) => state.system.health,
     (state) => state.settings.downloadClients.isTestingAll,
     (state) => state.settings.indexers.isTestingAll,
-    (health, isTestingAllDownloadClients, isTestingAllIndexers) => {
+    (items, health, isTestingAllDownloadClients, isTestingAllIndexers) => {
       const {
         isFetching,
-        isPopulated,
-        items
+        isPopulated
       } = health;
 
       return {

frontend/src/System/Status/Health/HealthStatusConnector.js

@@ -2,19 +2,21 @@ import PropTypes from 'prop-types';
 import React, { Component } from 'react';
 import { connect } from 'react-redux';
 import { createSelector } from 'reselect';
+import createHealthCheckSelector from 'Store/Selectors/createHealthCheckSelector';
 import { fetchHealth } from 'Store/Actions/systemActions';
 import PageSidebarStatus from 'Components/Page/Sidebar/PageSidebarStatus';
 
 function createMapStateToProps() {
   return createSelector(
     (state) => state.app,
+    createHealthCheckSelector(),
     (state) => state.system.health,
-    (app, health) => {
-      const count = health.items.length;
+    (app, items, health) => {
+      const count = items.length;
       let errors = false;
       let warnings = false;
 
-      health.items.forEach((item) => {
+      items.forEach((item) => {
         if (item.type === 'error') {
           errors = true;
         }