ui: create error Boundary component

Previously, when there was an error on the pages on the console
it would crash and nothing would load. This commit introduces
an error boundary, making an error message show instead of the
blank page.

Release note (ui change): New page for when something goes wrong
and the page crashes.

pkg/ui/workspaces/db-console/src/app.spec.tsx

@@ -38,7 +38,7 @@ import { EnqueueRange } from "src/views/reports/containers/enqueueRange";
 import { RangesMain } from "src/views/devtools/containers/raftRanges";
 import { RaftMessages } from "src/views/devtools/containers/raftMessages";
 import Raft from "src/views/devtools/containers/raft";
-import NotFound from "src/views/app/components/NotFound";
+import NotFound from "src/views/app/components/errorMessage/notFound";
 import { ProblemRanges } from "src/views/reports/containers/problemRanges";
 import { Localities } from "src/views/reports/containers/localities";
 import { Nodes } from "src/views/reports/containers/nodes";
@@ -580,7 +580,7 @@ describe("Routing to", () => {
   });
 
   describe("'/unknown-url' path", () => {
-    it("routes to <NotFound> component", () => {
+    it("routes to <errorMessage> component", () => {
       navigateToPath("/some-random-ulr");
       assert.lengthOf(appWrapper.find(NotFound), 1);
     });

pkg/ui/workspaces/db-console/src/app.tsx

@@ -32,7 +32,7 @@ import {
   tabAttr,
   tableNameAttr,
 } from "src/util/constants";
-import NotFound from "src/views/app/components/NotFound";
+import NotFound from "src/views/app/components/errorMessage/notFound";
 import Layout from "src/views/app/containers/layout";
 import DataDistributionPage from "src/views/cluster/containers/dataDistribution";
 import { EventPage } from "src/views/cluster/containers/events";

pkg/ui/workspaces/db-console/src/views/app/components/errorMessage/errorBoundary.tsx

@@ -0,0 +1,70 @@
+// Copyright 2021 The Cockroach Authors.
+//
+// Use of this software is governed by the Business Source License
+// included in the file licenses/BSL.txt.
+//
+// As of the Change Date specified in that file, in accordance with
+// the Business Source License, use of this software will be governed
+// by the Apache License, Version 2.0, included in the file
+// licenses/APL.txt.
+
+import React, { ErrorInfo } from "react";
+import Helmet from "react-helmet";
+import "./errorMessage.styl";
+import SleepyMoonImg from "assets/sleepy-moon.svg";
+
+interface ErrorBoundaryProps {
+  onCatch?: (error: Error, errorInfo: ErrorInfo) => void;
+}
+
+interface ErrorBoundaryState {
+  hasError: boolean;
+  error: Error | undefined;
+}
+
+// ErrorBoundary with image and text message.
+export default class ErrorBoundary extends React.Component<
+  ErrorBoundaryProps,
+  ErrorBoundaryState
+> {
+  constructor(props: ErrorBoundaryProps) {
+    super(props);
+    this.state = {
+      hasError: false,
+      error: undefined,
+    };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    // Console.error for developer visibility.
+    console.error(error);
+    this.props.onCatch && this.props.onCatch(error, errorInfo);
+  }
+
+  render() {
+    if (!this.state.hasError) {
+      return this.props.children;
+    }
+    return (
+      <main className="error-message-page">
+        <Helmet title="Error" />
+        <div className="error-message-page__content">
+          <img className="error-message-page__img" src={SleepyMoonImg} />
+          <div className="error-message-page__body">
+            <div className="error-message-page__message">
+              Something went wrong.
+            </div>
+            <p>
+              There is a problem loading the component of this page. Try
+              refreshing the page.
+            </p>
+          </div>
+        </div>
+      </main>
+    );
+  }
+}

pkg/ui/workspaces/db-console/src/views/app/components/NotFound/notFound.styl → pkg/ui/workspaces/db-console/src/views/app/components/errorMessage/errorMessage.styl

@@ -10,7 +10,7 @@
 
 @require '~src/components/core/index'
 
-.not-found-page
+.error-message-page
   min-width 320px
   &__content
     display flex

pkg/ui/workspaces/db-console/src/views/app/components/NotFound/index.tsx → pkg/ui/workspaces/db-console/src/views/app/components/errorMessage/notFound.tsx

@@ -10,21 +10,21 @@
 
 import React from "react";
 import Helmet from "react-helmet";
-import "./notFound.styl";
+import "./errorMessage.styl";
 import NotFoundImg from "assets/not-found.svg";
 
 function NotFound() {
   return (
-    <main className="not-found-page">
+    <main className="error-message-page">
       <Helmet title="Not Found" />
-      <div className="not-found-page__content">
+      <div className="error-message-page__content">
         <img
-          className="not-found-page__img"
+          className="error-message-page__img"
           src={NotFoundImg}
           alt="404 Error"
         />
-        <div className="not-found-page__body">
-          <div className="not-found-page__message">Whoops!</div>
+        <div className="error-message-page__body">
+          <div className="error-message-page__message">Whoops!</div>
           <p>
             We can&apos;t find the page you are looking for. You may have typed
             the wrong address or found a broken link.

pkg/ui/workspaces/db-console/src/views/app/containers/layout/index.tsx

@@ -14,6 +14,7 @@ import { RouteComponentProps, withRouter } from "react-router-dom";
 import { connect } from "react-redux";
 
 import NavigationBar from "src/views/app/components/layoutSidebar";
+import ErrorBoundary from "src/views/app/components/errorMessage/errorBoundary";
 import TimeWindowManager from "src/views/app/containers/timewindow";
 import AlertBanner from "src/views/app/containers/alertBanner";
 import RequireLogin from "src/views/login/requireLogin";
@@ -99,7 +100,7 @@ class Layout extends React.Component<LayoutProps & RouteComponentProps> {
               <NavigationBar />
             </div>
             <div ref={this.contentRef} className="layout-panel__content">
-              {this.props.children}
+              <ErrorBoundary>{this.props.children}</ErrorBoundary>
             </div>
           </div>
         </div>