Added some error boundaries to keep the ui functional even if elements may throw and error for a connection instance

shared/js/ui/frames/SideBarRenderer.tsx

@@ -53,7 +53,6 @@ const ContentRendererClientInfo = () => {
     const contentData = useContentData("client-info");
     if(!contentData) { return null; }
 
-    throw "XX";
     return (
         <ClientInfoRenderer
             events={contentData.events}
@@ -138,7 +137,9 @@ export const SideBarRenderer = (props: {
     return (
         <EventContent.Provider value={props.events}>
             <div className={cssStyle.container}>
+                <ErrorBoundary>
                     <SideBarHeader eventsHeader={props.eventsHeader} type={content} />
+                </ErrorBoundary>
                 <div className={cssStyle.frameContainer}>
                     <SideBarFrame type={content} />
                 </div>

shared/js/ui/frames/log/Renderer.tsx

@@ -6,6 +6,7 @@ import {findLogEventRenderer} from "./RendererEvent";
 import {LogMessage} from "tc-shared/connectionlog/Definitions";
 import {ServerEventLogUiEvents} from "tc-shared/ui/frames/log/Definitions";
 import {useDependentState} from "tc-shared/ui/react-elements/Helper";
+import {ErrorBoundary} from "tc-shared/ui/react-elements/ErrorBoundary";
 
 const cssStyle = require("./Renderer.scss");
 
@@ -111,7 +112,9 @@ export const ServerLogFrame = (props: { events: Registry<ServerEventLogUiEvents>
     return (
         <EventsContext.Provider value={props.events}>
             <HandlerIdContext.Provider value={handlerId}>
+                <ErrorBoundary>
                     <ServerLogRenderer />
+                </ErrorBoundary>
             </HandlerIdContext.Provider>
         </EventsContext.Provider>
     );

shared/js/ui/react-elements/ErrorBoundary.scss

@@ -0,0 +1,18 @@
+.container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+
+    background-color: red;
+
+    height: 100%;
+    width: 100%;
+
+    .text {
+        align-items: center;
+        text-align: center;
+
+        font-weight: bold;
+        color: white;
+    }
+}

shared/js/ui/react-elements/ErrorBoundary.tsx

@@ -1,20 +1,31 @@
 import * as React from "react";
 
+const cssStyle = require("./ErrorBoundary.scss");
+
 interface ErrorBoundaryState {
     errorOccurred: boolean
 }
 
 export class ErrorBoundary extends React.Component<{}, ErrorBoundaryState> {
+    constructor(props) {
+        super(props);
+
+        this.state = { errorOccurred: false };
+    }
     render() {
         if(this.state.errorOccurred) {
-
+            return (
+                <div className={cssStyle.container}>
+                    <div className={cssStyle.text}>A rendering error has occurred</div>
+                </div>
+            );
         } else {
             return this.props.children;
         }
     }
 
     componentDidCatch(error: Error, errorInfo: React.ErrorInfo) {
-        console.error("Did catch: %o - %o", error, errorInfo);
+        /* TODO: Some kind of logging? */
     }
 
     static getDerivedStateFromError() : Partial<ErrorBoundaryState> {