diff --git a/lib/static/new-ui/components/ErrorInfo/index.module.css b/lib/static/new-ui/components/ErrorInfo/index.module.css
index 4e3d762aa..bc3cffbb2 100644
--- a/lib/static/new-ui/components/ErrorInfo/index.module.css
+++ b/lib/static/new-ui/components/ErrorInfo/index.module.css
@@ -5,6 +5,6 @@
overflow-y: hidden;
background: #101827;
border-radius: 5px;
- border: 12px solid #101827;
+ padding: 12px;
box-shadow: rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0) 0 0 0 0, rgba(0, 0, 0, 0.1) 0 10px 15px -3px, rgba(0, 0, 0, 0.1) 0 4px 6px -4px;
}
diff --git a/lib/static/new-ui/components/SuiteTitle/index.tsx b/lib/static/new-ui/components/SuiteTitle/index.tsx
index 139b5a405..d2e564c17 100644
--- a/lib/static/new-ui/components/SuiteTitle/index.tsx
+++ b/lib/static/new-ui/components/SuiteTitle/index.tsx
@@ -7,9 +7,6 @@ import styles from './index.module.css';
interface SuiteTitleProps {
className?: string;
-}
-
-interface SuiteTitlePropsInternal extends SuiteTitleProps {
suitePath: string[];
browserName: string;
stateName?: string;
@@ -19,7 +16,7 @@ interface SuiteTitlePropsInternal extends SuiteTitleProps {
onNext: () => void;
}
-export function SuiteTitle(props: SuiteTitlePropsInternal): ReactNode {
+export function SuiteTitle(props: SuiteTitleProps): ReactNode {
const suiteName = props.suitePath[props.suitePath.length - 1];
const suitePath = props.suitePath.slice(0, -1);
diff --git a/lib/static/new-ui/components/TreeViewItem/index.module.css b/lib/static/new-ui/components/TreeViewItem/index.module.css
index 3ef5ddfe8..c6a9bd6ac 100644
--- a/lib/static/new-ui/components/TreeViewItem/index.module.css
+++ b/lib/static/new-ui/components/TreeViewItem/index.module.css
@@ -16,6 +16,8 @@
cursor: pointer;
padding-left: calc(var(--indent) * 24px);
+
+ transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out;
}
.tree-view-item--error {
@@ -23,3 +25,11 @@
background: var(--g-color-private-red-100);
color: var(--g-color-private-red-600-solid);
}
+
+.tree-view-item--corrupted {
+ --g-color-base-simple-hover: hsl(32deg 100% 48% / 20%);
+ background-color: rgba(255, 235, 206, 1);
+ color: hsl(32 100% 48% / 1);
+ --box-shadow-color: hsl(32deg 100% 48% / 42%);
+ --g-button-text-color-hover: hsl(32 100% 48% / 1);
+}
diff --git a/lib/static/new-ui/components/TreeViewItem/index.tsx b/lib/static/new-ui/components/TreeViewItem/index.tsx
index a2de64e7a..67d049dca 100644
--- a/lib/static/new-ui/components/TreeViewItem/index.tsx
+++ b/lib/static/new-ui/components/TreeViewItem/index.tsx
@@ -21,7 +21,7 @@ interface TreeListItemProps
{
id: string;
list: UseListResult;
mapItemDataToContentProps: (data: T) => ListItemViewContentType;
- isFailed?: boolean;
+ status?: 'error' | 'corrupted';
onItemClick?: (data: {id: string}) => unknown;
}
@@ -34,7 +34,8 @@ export function TreeViewItem(props: TreeListItemProps): ReactNode {
>
{
+ constructor(props: BoundaryProps) {
+ super(props);
+ this.state = {
+ watchFor: props.watchFor,
+ hasError: false,
+ error: null,
+ errorInfo: null
+ };
+ }
+
+ private static messageStyle = 'background: crimson; color: white;';
+ private static timestampStyle = 'color: gray; font-size: smaller';
+
+ private static isNothingChanged(prev?: DependencyList, next?: DependencyList): boolean {
+ if (prev === next) {
+ return true;
+ }
+
+ if (prev === undefined || next === undefined) {
+ return false;
+ }
+
+ if (prev.length !== next.length) {
+ return false;
+ }
+
+ return prev.every((item, index) => item === next[index]);
+ }
+
+ private restore(): void {
+ this.setState({hasError: false, error: null});
+ }
+
+ static getDerivedStateFromProps(nextProps: BoundaryProps, prevState: BoundaryState): null | BoundaryState {
+ if (Boundary.isNothingChanged(prevState.watchFor, nextProps.watchFor)) {
+ return null;
+ }
+
+ return {...prevState, error: null, hasError: false, errorInfo: null, watchFor: nextProps.watchFor};
+ }
+
+ private componentDidCatchErrorInstance(error: Error, errorInfo: ErrorInfo): void {
+ this.setState({hasError: true, error, errorInfo});
+
+ const timestamp = new Date().toTimeString();
+
+ console.groupCollapsed(
+ `%cError boundary catched error named "${error.name}". See details below:` + '%c @ ' + timestamp,
+ Boundary.messageStyle,
+ Boundary.timestampStyle
+ );
+ console.error(error);
+ console.error('Component stack: ', errorInfo.componentStack);
+ console.groupEnd();
+ }
+
+ private componentDidCatchSomethingWeird(notAnError: unknown, errorInfo: ErrorInfo): void {
+ this.setState({hasError: true, error: new Error(`Unknown error, based on ${typeof notAnError} value provided.\nReceived value: ${notAnError}, which is not an Error instance.\nTry check your code for throwing ${typeof notAnError}s.`), errorInfo});
+
+ const timestamp = new Date().toTimeString();
+
+ console.groupCollapsed(
+ `%cError boundary catched ${typeof notAnError} instead of Error class instance. Try check your code for throwing ${typeof notAnError}s. See details below:` + '%c @ ' + timestamp,
+ Boundary.messageStyle,
+ Boundary.timestampStyle
+ );
+
+ console.log(`Received ${typeof notAnError} value: `, notAnError);
+ console.error('Component stack: ', errorInfo.componentStack);
+ console.groupEnd();
+ }
+
+ /**
+ * @param _error - The value throwed from the child component. This is not necessarily an Error class instance because of the ability to throw anything in JS.
+ * @param errorInfo - React specific object, contains useful componentStack parameter.
+ */
+ componentDidCatch(error: unknown, errorInfo: ErrorInfo): void {
+ if (error instanceof Error) {
+ return this.componentDidCatchErrorInstance(error, errorInfo);
+ }
+
+ return this.componentDidCatchSomethingWeird(error, errorInfo);
+ }
+
+ render(): ReactNode {
+ if (this.state.hasError) {
+ return (
+
+ {this.props.fallback}
+
+ );
+ }
+
+ return this.props.children;
+ }
+}
diff --git a/lib/static/new-ui/features/error-handling/components/ErrorHandling/actions.tsx b/lib/static/new-ui/features/error-handling/components/ErrorHandling/actions.tsx
new file mode 100644
index 000000000..6c1b0efb7
--- /dev/null
+++ b/lib/static/new-ui/features/error-handling/components/ErrorHandling/actions.tsx
@@ -0,0 +1,32 @@
+import {ArrowsRotateLeft} from '@gravity-ui/icons';
+import {Button, ButtonProps, Icon} from '@gravity-ui/uikit';
+import React, {ReactNode} from 'react';
+import GithubIcon from '../../../../../icons/github-icon.svg';
+import {NEW_ISSUE_LINK} from '@/constants';
+
+type ActionProps = Omit;
+
+function reportIssue(): void {
+ window.open(NEW_ISSUE_LINK, '_blank');
+}
+
+export function FileIssue(props: ActionProps): ReactNode {
+ return
+
+
+
+ File an issue
+ ;
+}
+
+function reloadPage(): void {
+ window.location.reload();
+}
+
+export function ReloadPage(props: ActionProps): ReactNode {
+ return
+ ;
+}
diff --git a/lib/static/new-ui/features/error-handling/components/ErrorHandling/context.ts b/lib/static/new-ui/features/error-handling/components/ErrorHandling/context.ts
new file mode 100644
index 000000000..12c7e762b
--- /dev/null
+++ b/lib/static/new-ui/features/error-handling/components/ErrorHandling/context.ts
@@ -0,0 +1,16 @@
+import React from 'react';
+import {ErrorContext} from './interfaces';
+
+const Context = React.createContext(null);
+
+export const ErrorContextProvider = Context.Provider;
+
+export const useErrorContext = (): ErrorContext => {
+ const ctx = React.useContext(Context);
+
+ if (ctx === null) {
+ throw new Error('useErrorContext must be used within ErrorContextProvider');
+ }
+
+ return ctx;
+};
diff --git a/lib/static/new-ui/features/error-handling/components/ErrorHandling/fallbacks.tsx b/lib/static/new-ui/features/error-handling/components/ErrorHandling/fallbacks.tsx
new file mode 100644
index 000000000..e635e365b
--- /dev/null
+++ b/lib/static/new-ui/features/error-handling/components/ErrorHandling/fallbacks.tsx
@@ -0,0 +1,79 @@
+import {Divider, Link, Text} from '@gravity-ui/uikit';
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+import TestplaneIcon from '../../../../../icons/testplane-mono-black.svg';
+import ExclamationTriangleLarge from '../../../../../icons/exclamation-triangle-large.svg';
+import {ErrorInfo as ErrorInfoFc} from '../../../../components/ErrorInfo';
+import styles from './index.module.css';
+import {useErrorContext} from './context';
+import {FileIssue, ReloadPage} from './actions';
+import {NEW_ISSUE_LINK} from '@/constants';
+
+export function FallbackAppCrash(): ReactNode {
+ const {state} = useErrorContext();
+
+ return
+
+
+
+
+
+
Something went wrong
+
Testplane UI has crashed
+
+
+
+
+
+
+
+
+
+
+
+ We would appreciate a detailed
+
+
+
+
+
Something went wrong
+
The data is corrupted or there’s a bug on our side
+
+
+
+ {typeof recommendedAction === 'string' ?
{recommendedAction} : recommendedAction}
+
+ {recommendedAction &&
}
+
+
+
+ The data is corrupted or there’s a bug on our side.
+
+
;
+}
diff --git a/lib/static/new-ui/features/error-handling/components/ErrorHandling/index.module.css b/lib/static/new-ui/features/error-handling/components/ErrorHandling/index.module.css
new file mode 100644
index 000000000..1aac31875
--- /dev/null
+++ b/lib/static/new-ui/features/error-handling/components/ErrorHandling/index.module.css
@@ -0,0 +1,107 @@
+.crash-absolute-wrapper {
+ overflow: hidden;
+ position: absolute;
+ background: white;
+ top: 0;
+ left: 0;
+ right: 0;
+ bottom: 0;
+}
+
+.crash {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ flex: 1;
+ gap: 8px;
+ width: 100%;
+ height: 100%;
+ margin: auto;
+ background: white;
+}
+
+.lined {
+ padding: 16px;
+ max-width: 432px;
+ border: 1px solid rgba(0, 0, 0, 0.03);
+ border-top: none;
+ border-bottom: none;
+}
+
+.divider {
+ position: relative;
+ width: 100vw;
+ height: 1px;
+ background: rgba(0, 0, 0, 0.03);
+}
+
+.divider:after, .divider:before {
+ content: '';
+ position: absolute;
+ top: -8px;
+ width: 17px;
+ height: 17px;
+ background:
+ linear-gradient(
+ to right,
+ transparent 0%,
+ transparent 8px,
+ rgba(0, 0, 0, 0.1) 8px,
+ rgba(0, 0, 0, 0.1) 9px,
+ transparent 9px,
+ transparent 100%
+ ),
+ linear-gradient(
+ to bottom,
+ transparent 0%,
+ transparent 8px,
+ rgba(0, 0, 0, 0.1) 8px,
+ rgba(0, 0, 0, 0.1) 9px,
+ transparent 9px,
+ transparent 100%
+ );
+}
+
+.divider:before {
+ left: calc(50% - 216px - 8px);
+}
+
+.divider:after {
+ right: calc(50% - 216px - 8px);
+}
+
+.crashCorruption {
+ gap: 0;
+ align-items: start;
+}
+
+.pick-action-separator {
+ flex-direction: row;
+ display: flex;
+ width: 100%;
+ max-width: 400px;
+ gap: 8px;
+ align-items: center;
+}
+
+.pick-action-separator-line {
+ flex: 1;
+}
+
+.error-info {
+ max-width: 100%;
+ max-height: 700px;
+ color: white;
+ margin: 8px 0;
+ font-size: 13px;
+ overflow-y: auto;
+ scrollbar-color: white #101827;
+}
+
+.action-row {
+ display: flex;
+ flex-direction: row;
+ width: 100%;
+ gap: 8px;
+}
\ No newline at end of file
diff --git a/lib/static/new-ui/features/error-handling/components/ErrorHandling/index.tsx b/lib/static/new-ui/features/error-handling/components/ErrorHandling/index.tsx
new file mode 100644
index 000000000..3f37a90a5
--- /dev/null
+++ b/lib/static/new-ui/features/error-handling/components/ErrorHandling/index.tsx
@@ -0,0 +1,9 @@
+import {Boundary} from './Boundary';
+import {FallbackAppCrash, FallbackCardCrash, FallbackDataCorruption} from './fallbacks';
+
+export const ErrorHandler = {
+ Boundary,
+ FallbackAppCrash,
+ FallbackCardCrash,
+ FallbackDataCorruption
+};
diff --git a/lib/static/new-ui/features/error-handling/components/ErrorHandling/interfaces.ts b/lib/static/new-ui/features/error-handling/components/ErrorHandling/interfaces.ts
new file mode 100644
index 000000000..bfd315c78
--- /dev/null
+++ b/lib/static/new-ui/features/error-handling/components/ErrorHandling/interfaces.ts
@@ -0,0 +1,32 @@
+import {ReactNode, DependencyList, ErrorInfo} from 'react';
+
+export interface BoundaryProps {
+ /** Node to display when falling */
+ fallback?: ReactNode,
+ /** Changing this primitive will update the component forcibly if it crashed with an error. */
+ watchFor?: DependencyList;
+ children?: ReactNode
+}
+
+export interface BoundaryStateAlive {
+ hasError: false;
+ error: null;
+ errorInfo: null;
+}
+
+export interface BoundaryStateDead {
+ hasError: true;
+ error: Error;
+ errorInfo: ErrorInfo;
+}
+
+export interface BoundaryStateInternal {
+ watchFor?: DependencyList
+}
+
+export type BoundaryState = (BoundaryStateAlive | BoundaryStateDead) & BoundaryStateInternal;
+
+export interface ErrorContext {
+ state: BoundaryStateDead;
+ restore(): void;
+}
diff --git a/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx b/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
index bb4c0ac92..ff1c7fed6 100644
--- a/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
+++ b/lib/static/new-ui/features/suites/components/ScreenshotsTreeViewItem/index.tsx
@@ -17,6 +17,7 @@ import {AssertViewStatus} from '@/static/new-ui/components/AssertViewStatus';
import styles from './index.module.css';
import {thunkAcceptImages, thunkRevertImages} from '@/static/modules/actions/screenshots';
import {useAnalytics} from '@/static/new-ui/hooks/useAnalytics';
+import {ErrorHandler} from '../../../error-handling/components/ErrorHandling';
interface ScreenshotsTreeViewItemProps {
image: ImageEntity;
@@ -95,6 +96,9 @@ export function ScreenshotsTreeViewItem(props: ScreenshotsTreeViewItemProps): Re
}
}
}
- 
+
+
+
+ 
+
+