Add error boundaries WD-8089

src/Root.tsx

@@ -9,29 +9,35 @@ import { InstanceLoadingProvider } from "context/instanceLoading";
 import { ProjectProvider } from "context/project";
 import Events from "pages/instances/Events";
 import App from "./App";
+import ErrorBoundary from "components/ErrorBoundary";
+import ErrorPage from "components/ErrorPage";
 
 const queryClient = new QueryClient();
 
 const Root: FC = () => {
   return (
-    <NotificationProvider>
-      <QueryClientProvider client={queryClient}>
-        <AuthProvider>
-          <ProjectProvider>
-            <InstanceLoadingProvider>
-              <EventQueueProvider>
-                <div className="l-application" role="presentation">
-                  <Navigation />
-                  <App />
-                  <Panels />
-                  <Events />
-                </div>
-              </EventQueueProvider>
-            </InstanceLoadingProvider>
-          </ProjectProvider>
-        </AuthProvider>
-      </QueryClientProvider>
-    </NotificationProvider>
+    <ErrorBoundary fallback={ErrorPage}>
+      <NotificationProvider>
+        <QueryClientProvider client={queryClient}>
+          <AuthProvider>
+            <ProjectProvider>
+              <InstanceLoadingProvider>
+                <EventQueueProvider>
+                  <div className="l-application" role="presentation">
+                    <Navigation />
+                    <ErrorBoundary fallback={ErrorPage}>
+                      <App />
+                      <Panels />
+                      <Events />
+                    </ErrorBoundary>
+                  </div>
+                </EventQueueProvider>
+              </InstanceLoadingProvider>
+            </ProjectProvider>
+          </AuthProvider>
+        </QueryClientProvider>
+      </NotificationProvider>
+    </ErrorBoundary>
   );
 };
 

src/components/ErrorBoundary.tsx

@@ -0,0 +1,33 @@
+import React, { FC } from "react";
+import type { PropsWithChildren } from "react";
+import { Component } from "react";
+
+type Props = PropsWithChildren & {
+  fallback: FC<{ error?: Error }>;
+};
+
+type State = {
+  error?: Error;
+  hasError: boolean;
+};
+
+export default class ErrorBoundary extends Component<Props, State> {
+  constructor(props: Props) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    return {
+      hasError: true,
+      error,
+    };
+  }
+
+  render() {
+    const { error, hasError } = this.state;
+    const { children, fallback: ErrorComponent } = this.props;
+
+    return hasError ? <ErrorComponent error={error} /> : <>{children}</>;
+  }
+}

src/components/ErrorPage.tsx

@@ -0,0 +1,55 @@
+import React, { FC } from "react";
+import {
+  CodeSnippet,
+  CodeSnippetBlockAppearance,
+  Notification,
+  Strip,
+} from "@canonical/react-components";
+
+type Props = {
+  error?: Error;
+};
+
+const ErrorPage: FC<Props> = ({ error }) => {
+  const body = encodeURIComponent(
+    `\`\`\`\n${error?.stack ?? "No stack track"}\n\`\`\``,
+  );
+  const url = `https://github.com/canonical/lxd-ui/issues/new?labels=bug&title=Error%20report&body=${body}`;
+
+  return (
+    <Strip>
+      <Notification severity="negative" title="Error">
+        Something has gone wrong. If this issue persists,{" "}
+        <a href={url} rel="noopener noreferrer" target="_blank">
+          please raise an issue on GitHub.
+        </a>
+      </Notification>
+      <CodeSnippet
+        blocks={[
+          ...(error?.message
+            ? [
+                {
+                  title: "Error",
+                  appearance: CodeSnippetBlockAppearance.NUMBERED,
+                  wrapLines: true,
+                  code: error.message,
+                },
+              ]
+            : []),
+          ...(error?.stack
+            ? [
+                {
+                  title: "Stack trace",
+                  appearance: CodeSnippetBlockAppearance.NUMBERED,
+                  wrapLines: true,
+                  code: error.stack,
+                },
+              ]
+            : []),
+        ]}
+      />
+    </Strip>
+  );
+};
+
+export default ErrorPage;