tell user about websocket connection failure but dont throw away any data until a reconnect

Author: rerpha

app/components/InstrumentData.tsx

@@ -59,6 +59,7 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
   } = useWebSocket(socketURL, {
     shouldReconnect: (closeEvent) => true,
     onOpen: () => {
+      setWebSockErr("");
       setLastUpdate(""); // if this is called on a reconnect, we want to clear the last update so we can re-subscribe to everything again
       sendJsonMessage(instListSubscription);
     },
@@ -168,6 +169,11 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
         }
       }
     },
+    onError: (err) => {
+      setWebSockErr(
+        "Failed to connect to websocket - please check your network connection and contact Experiment Controls if this persists.",
+      );
+    },
     share: true,
     retryOnError: true,
   });
@@ -182,6 +188,7 @@ export function InstrumentData({ instrumentName }: { instrumentName: string }) {
         instName={instName}
         runInfoPVs={currentInstrument.runInfoPVs}
       />
+      {webSockErr && <h1 className={"text-red-600"}>{webSockErr}</h1>}
       <div className="flex gap-2 ml-2 md:flex-row flex-col">
         <CheckToggle
           checked={showHiddenBlocks}

app/components/InstrumentsDisplay.tsx

@@ -65,6 +65,7 @@ export default function InstrumentsDisplay({
     },
     onOpen: () => {
       setInstList([]); // if this is called on a reconnect, clear the instlist so we can re-subscribe to it and get its latest value
+      setWebSockErr("");
       sendJsonMessage(instListSubscription);
       // Subscribe to beam current PVs
       sendJsonMessage({
@@ -117,13 +118,9 @@ export default function InstrumentsDisplay({
     retryOnError: true,
   });
 
-  if (webSockErr) {
-    // The instlist isnt available yet so we should tell the user.
-    return <h1 className={"text-white"}>{webSockErr}</h1>;
-  }
-
   return (
     <div>
+      {webSockErr && <h1 className={"text-red-600"}>{webSockErr}</h1>}
       {sortByGroups &&
         Array.from(createInstrumentGroups(instList).entries())
           .sort((a, b) => b[1].length - a[1].length) // Sort to display the biggest group first