diff --git a/shared/js/ui/frames/SideBarRenderer.tsx b/shared/js/ui/frames/SideBarRenderer.tsx index 5d0752f7..63ecfbf1 100644 --- a/shared/js/ui/frames/SideBarRenderer.tsx +++ b/shared/js/ui/frames/SideBarRenderer.tsx @@ -53,7 +53,6 @@ const ContentRendererClientInfo = () => { const contentData = useContentData("client-info"); if(!contentData) { return null; } - throw "XX"; return (
- + + +
diff --git a/shared/js/ui/frames/log/Renderer.tsx b/shared/js/ui/frames/log/Renderer.tsx index 2b9308e1..2269bebc 100644 --- a/shared/js/ui/frames/log/Renderer.tsx +++ b/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 return ( - + + + ); diff --git a/shared/js/ui/react-elements/ErrorBoundary.scss b/shared/js/ui/react-elements/ErrorBoundary.scss index e69de29b..bec1d731 100644 --- a/shared/js/ui/react-elements/ErrorBoundary.scss +++ b/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; + } +} \ No newline at end of file diff --git a/shared/js/ui/react-elements/ErrorBoundary.ts b/shared/js/ui/react-elements/ErrorBoundary.tsx similarity index 55% rename from shared/js/ui/react-elements/ErrorBoundary.ts rename to shared/js/ui/react-elements/ErrorBoundary.tsx index 1f585c8f..065a315d 100644 --- a/shared/js/ui/react-elements/ErrorBoundary.ts +++ b/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 ( +
+
A rendering error has occurred
+
+ ); } 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 {