ui: Add error boundary in the React UI

pkg/query/api/v1.go

@@ -485,6 +485,10 @@ func (api *API) labelValues(r *http.Request) (interface{}, []error, *ApiError) {
 		return nil, nil, &ApiError{errorExec, err}
 	}
 
+	if vals == nil {
+		vals = make([]string, 0)
+	}
+
 	return vals, warnings, nil
 }
 

pkg/ui/react-app/src/App.tsx

@@ -6,12 +6,13 @@ import { Alerts, Config, Flags, Rules, ServiceDiscovery, Status, Targets, TSDBSt
 import PathPrefixProps from './types/PathPrefixProps';
 import ThanosComponentProps from './thanos/types/ThanosComponentProps';
 import Navigation from './thanos/Navbar';
+import { ErrorBoundary } from './thanos/pages';
 
 import './App.css';
 
 const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosComponent }) => {
   return (
-    <>
+    <ErrorBoundary>
       <Navigation pathPrefix={pathPrefix} thanosComponent={thanosComponent} />
       <Container fluid style={{ paddingTop: 70 }}>
         <Router basepath={`${pathPrefix}/new`}>
@@ -32,7 +33,7 @@ const App: FC<PathPrefixProps & ThanosComponentProps> = ({ pathPrefix, thanosCom
           <Targets path="/targets" pathPrefix={pathPrefix} />
         </Router>
       </Container>
-    </>
+    </ErrorBoundary>
   );
 };
 

pkg/ui/react-app/src/thanos/pages/errorBoundary/ErrorBoundary.module.css

@@ -0,0 +1,17 @@
+.container {
+  display: flex;
+  min-height: 100vh;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+}
+
+button.detailsBtn {
+  font-size: 1.2em;
+  margin: 2em 0;
+}
+
+.errorDiv {
+  white-space: pre-wrap;
+  font-family: monospace;
+}

pkg/ui/react-app/src/thanos/pages/errorBoundary/ErrorBoundary.tsx

@@ -0,0 +1,50 @@
+import React, { ErrorInfo } from 'react';
+import { Container, UncontrolledCollapse, Button } from 'reactstrap';
+import styles from './ErrorBoundary.module.css';
+
+interface ErrorState {
+  error: Error | null;
+  errorInfo: ErrorInfo | null;
+}
+
+class ErrorBoundary extends React.Component<{}, ErrorState> {
+  constructor(props: {}) {
+    super(props);
+    this.state = {
+      error: null,
+      errorInfo: null,
+    };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo): void {
+    this.setState({
+      error,
+      errorInfo,
+    });
+  }
+  render(): React.ReactNode {
+    if (this.state.errorInfo) {
+      return (
+        <Container fluid className={styles.container}>
+          <h1>Aaaah! Something went wrong.</h1>
+          <h3>
+            Please file an issue in the&nbsp;
+            <a href="https://github.com/thanos-io/thanos/issues" target="_blank" rel="noreferrer noopener">
+              Thanos issue tracker.
+            </a>
+          </h3>
+          <Button color="link" id="error-details-toggler" className={styles.detailsBtn}>
+            View error details.
+          </Button>
+          <UncontrolledCollapse toggler="#error-details-toggler" className={styles.errorDiv}>
+            <span>{this.state.error && this.state.error.toString()}</span>
+            {this.state.errorInfo.componentStack}
+          </UncontrolledCollapse>
+        </Container>
+      );
+    }
+    return this.props.children;
+  }
+}
+
+export default ErrorBoundary;

pkg/ui/react-app/src/thanos/pages/index.tsx

@@ -1 +1,3 @@
-export {};
+import ErrorBoundary from './errorBoundary/ErrorBoundary';
+
+export { ErrorBoundary };