re-hydration

Signed-off-by: Gabriel <gaccettola@mirantis.com>

packages/ui-components/error-boundary/src/error-boundary.scss

@@ -0,0 +1,34 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+.ErrorBoundary {
+  --flex-gap: #{$padding * 2};
+
+  padding: var(--flex-gap);
+  word-break: break-all;
+
+  .wrapper {
+    display: grid;
+    grid-template-columns: minmax(300px, 1fr) minmax(300px, 1fr);
+    column-gap: 12px;
+    row-gap: 12px;
+
+    @media screen and (max-width: 900px) {
+      grid-template-columns: auto;
+    }
+  }
+
+  code {
+    max-height: none;
+    border: 5px solid var(--borderFaintColor);
+    white-space: pre-wrap;
+    background: var(--contentColor);
+    color: var(--textColorSecondary);
+  }
+
+  a {
+    color: var(--colorInfo);
+  }
+}

packages/ui-components/error-boundary/src/error-boundary.tsx

@@ -0,0 +1,103 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+import "./error-boundary.scss";
+
+import type { ErrorInfo } from "react";
+import React from "react";
+import { observer } from "mobx-react";
+import { Button } from "../button";
+import { issuesTrackerUrl, forumsUrl } from "../../../common/vars";
+import type { SingleOrMany } from "@k8slens/utilities";
+import type { ObservableHistory } from "mobx-observable-history";
+import { withInjectables } from "@ogre-tools/injectable-react";
+import observableHistoryInjectable from "../../navigation/observable-history.injectable";
+
+export interface ErrorBoundaryProps {
+  children?: SingleOrMany<React.ReactNode>;
+}
+
+interface State {
+  error?: Error;
+  errorInfo?: ErrorInfo;
+}
+
+interface Dependencies {
+  observableHistory: ObservableHistory<unknown>;
+}
+
+@observer
+class NonInjectedErrorBoundary extends React.Component<ErrorBoundaryProps & Dependencies, State> {
+  public state: State = {};
+
+  componentDidCatch(error: Error, errorInfo: ErrorInfo) {
+    this.setState({ error, errorInfo });
+  }
+
+  back = () => {
+    this.setState({ error: undefined, errorInfo: undefined });
+    this.props.observableHistory.goBack();
+  };
+
+  render() {
+    const { error, errorInfo } = this.state;
+
+    if (error) {
+      return (
+        <div className="ErrorBoundary flex column gaps">
+          <h5>
+            {"App crash at "}
+            <span className="contrast">{location.pathname}</span>
+          </h5>
+          <p>
+
+            {"To help us improve the product please report bugs on"}
+            <a
+              href={forumsUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Lens Forums
+            </a>
+            {" or on our"}
+            <a
+              href={issuesTrackerUrl}
+              rel="noreferrer"
+              target="_blank"
+            >
+              Github
+            </a>
+            {" issues tracker."}
+          </p>
+          <div className="wrapper">
+            <code className="block">
+              <p className="contrast">Component stack:</p>
+              {errorInfo?.componentStack}
+            </code>
+            <code className="block">
+              <p className="contrast">Error stack:</p>
+              {error.stack}
+            </code>
+          </div>
+          <Button
+            className="box self-flex-start"
+            primary
+            label="Back"
+            onClick={this.back}
+          />
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
+export const ErrorBoundary = withInjectables<Dependencies, ErrorBoundaryProps>(NonInjectedErrorBoundary, {
+  getProps: (di, props) => ({
+    ...props,
+    observableHistory: di.inject(observableHistoryInjectable),
+  }),
+});

packages/ui-components/error-boundary/src/index.ts

@@ -0,0 +1,6 @@
+/**
+ * Copyright (c) OpenLens Authors. All rights reserved.
+ * Licensed under MIT License. See LICENSE in root directory for more information.
+ */
+
+export * from "./error-boundary";