mirror of
https://github.com/lensapp/lens.git
synced 2025-05-20 05:10:56 +00:00
chore: extract error-boundary
Signed-off-by: Gabriel <gaccettola@mirantis.com>
This commit is contained in:
Gabriel authored and 
Gabriel Accettola committed
1 parent
815e9adfca
commit
7dff8e31a6
22 files changed
+1403
-281
No files matched your search
+1
-1
@@ -7,7 +7,7 @@ import { getInjectable } from "@ogre-tools/injectable";
|
||||
import { rootFrameChildComponentInjectionToken } from "../../frames/root-frame/root-frame-child-component-injection-token";
|
||||
import { ClusterManager } from "./cluster-manager";
|
||||
import { computed } from "mobx";
|
||||
import { ErrorBoundary } from "../error-boundary";
|
||||
import { ErrorBoundary } from "@k8slens/error-boundary";
|
||||
|
||||
const clusterManagerRootFrameChildComponentInjectable = getInjectable({
|
||||
id: "cluster-manager-root-frame-child-component",
|
||||
|
||||
@@ -24,7 +24,7 @@ import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import createResourceTabInjectable from "./create-resource/create-resource-tab.injectable";
|
||||
import dockStoreInjectable from "./dock/store.injectable";
|
||||
import createTerminalTabInjectable from "./terminal/create-terminal-tab.injectable";
|
||||
import { ErrorBoundary } from "../error-boundary";
|
||||
import { ErrorBoundary } from "@k8slens/error-boundary";
|
||||
|
||||
export interface DockProps {
|
||||
className?: string;
|
||||
|
||||
@@ -1,34 +0,0 @@
|
||||
/**
|
||||
* 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);
|
||||
}
|
||||
}
|
||||
@@ -1,103 +0,0 @@
|
||||
/**
|
||||
* 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 "@k8slens/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 { observableHistoryInjectionToken } from "@k8slens/routing";
|
||||
|
||||
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(observableHistoryInjectionToken),
|
||||
}),
|
||||
});
|
||||
@@ -1,6 +0,0 @@
|
||||
/**
|
||||
* Copyright (c) OpenLens Authors. All rights reserved.
|
||||
* Licensed under MIT License. See LICENSE in root directory for more information.
|
||||
*/
|
||||
|
||||
export * from "./error-boundary";
|
||||
@@ -8,7 +8,7 @@ import styles from "./main-layout.module.scss";
|
||||
import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { cssNames } from "@k8slens/utilities";
|
||||
import { ErrorBoundary } from "../error-boundary";
|
||||
import { ErrorBoundary } from "@k8slens/error-boundary";
|
||||
import { ResizeDirection, ResizeGrowthDirection, ResizeSide, ResizingAnchor } from "../resizing-anchor";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import type { SidebarStorageState } from "./sidebar-storage/sidebar-storage.injectable";
|
||||
|
||||
@@ -9,7 +9,7 @@ import React from "react";
|
||||
import { observer } from "mobx-react";
|
||||
import { cssNames } from "@k8slens/utilities";
|
||||
import { Tab, Tabs } from "../tabs";
|
||||
import { ErrorBoundary } from "../error-boundary";
|
||||
import { ErrorBoundary } from "@k8slens/error-boundary";
|
||||
import type { HierarchicalSidebarItem } from "./sidebar-items.injectable";
|
||||
|
||||
export interface TabLayoutProps {
|
||||
|
||||
@@ -12,7 +12,7 @@ import { observer } from "mobx-react";
|
||||
import type { IClassName } from "@k8slens/utilities";
|
||||
import { cssNames } from "@k8slens/utilities";
|
||||
import { Tab, Tabs } from "../tabs";
|
||||
import { ErrorBoundary } from "../error-boundary";
|
||||
import { ErrorBoundary } from "@k8slens/error-boundary";
|
||||
import type { ObservableHistory } from "mobx-observable-history";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import { observableHistoryInjectionToken } from "@k8slens/routing";
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
*/
|
||||
import React, { useEffect } from "react";
|
||||
import { Observer, observer } from "mobx-react";
|
||||
import { ErrorBoundary } from "../../components/error-boundary";
|
||||
import { ErrorBoundary } from "@k8slens/error-boundary";
|
||||
import type { NamespaceStore } from "../../components/+namespaces/store";
|
||||
import { withInjectables } from "@ogre-tools/injectable-react";
|
||||
import namespaceStoreInjectable from "../../components/+namespaces/store.injectable";
|
||||
|
||||
Reference in new issue
Block a user