Users/mordvinx/testplane 404.new UI error boundaries

lib/static/new-ui.css

@@ -23,10 +23,18 @@ body {
 }
 
 .report {
+    min-width: 100%;
+    min-height: 100%;
     font-family: var(--g-font-family-sans), sans-serif !important;
     margin-bottom: 0 !important;;
 }
 
+#app {
+    position: relative;
+    min-width: 100%;
+    min-height: 100%;
+}
+
 /* Aside header styles */
 :root {
     --gn-aside-header-item-current-background-color: #1f2937;

lib/static/new-ui/app/App.tsx

@@ -17,6 +17,7 @@ import {CustomScripts} from '@/static/new-ui/components/CustomScripts';
 import {State} from '@/static/new-ui/types/store';
 import {AnalyticsProvider} from '@/static/new-ui/providers/analytics';
 import {MetrikaScript} from '@/static/new-ui/components/MetrikaScript';
+import {ErrorHandler} from '../features/error-handling/components/ErrorHandling';
 
 export function App(): ReactNode {
     const pages = [
@@ -33,26 +34,30 @@ export function App(): ReactNode {
     const customScripts = (store.getState() as State).config.customScripts;
 
     return <StrictMode>
-        <CustomScripts scripts={customScripts} />
-        <ThemeProvider theme='light'>
-            <ToasterProvider>
-                <Provider store={store}>
-                    <MetrikaScript/>
-                    <AnalyticsProvider>
-                        <HashRouter>
-                            <MainLayout menuItems={pages}>
-                                <LoadingBar/>
-                                <Routes>
-                                    <Route element={<Navigate to={'/suites'}/>} path={'/'}/>
-                                    {pages.map(page => <Route element={page.element} path={page.url} key={page.url}>{page.children}</Route>)}
-                                </Routes>
-                                <GuiniToolbarOverlay/>
-                                <ToasterComponent />
-                            </MainLayout>
-                        </HashRouter>
-                    </AnalyticsProvider>
-                </Provider>
-            </ToasterProvider>
-        </ThemeProvider>
+        <ErrorHandler.Root fallback={<ErrorHandler.AppCrash />}>
+            <CustomScripts scripts={customScripts} />
+            <ThemeProvider theme='light'>
+                <ToasterProvider>
+                    <Provider store={store}>
+                        <MetrikaScript/>
+                        <AnalyticsProvider>
+                            <HashRouter>
+                                <ErrorHandler.Root fallback={<ErrorHandler.AppCrash />}>
+                                    <MainLayout menuItems={pages}>
+                                        <LoadingBar/>
+                                        <Routes>
+                                            <Route element={<Navigate to={'/suites'}/>} path={'/'}/>
+                                            {pages.map(page => <Route element={page.element} path={page.url} key={page.url}>{page.children}</Route>)}
+                                        </Routes>
+                                        <GuiniToolbarOverlay/>
+                                        <ToasterComponent />
+                                    </MainLayout>
+                                </ErrorHandler.Root>
+                            </HashRouter>
+                        </AnalyticsProvider>
+                    </Provider>
+                </ToasterProvider>
+            </ThemeProvider>
+        </ErrorHandler.Root>
     </StrictMode>;
 }

lib/static/new-ui/components/AssertViewResult/index.tsx

@@ -8,6 +8,7 @@ import {Screenshot} from '@/static/new-ui/components/Screenshot';
 import {ImageLabel} from '@/static/new-ui/components/ImageLabel';
 import {getImageDisplayedSize} from '@/static/new-ui/utils';
 import styles from './index.module.css';
+import {ErrorHandler} from '../../features/error-handling/components/ErrorHandling';
 
 interface AssertViewResultProps {
     result: ImageEntity;
@@ -17,27 +18,45 @@ interface AssertViewResultProps {
 
 function AssertViewResultInternal({result, diffMode, style}: AssertViewResultProps): ReactNode {
     if (result.status === TestStatus.FAIL) {
-        return <DiffViewer diffMode={diffMode} {...result} />;
-    } else if (result.status === TestStatus.ERROR) {
-        return <div className={styles.screenshotContainer}>
-            <ImageLabel title={'Actual'} subtitle={getImageDisplayedSize(result.actualImg)} />
-            <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.actualImg} />
-        </div>;
-    } else if (result.status === TestStatus.SUCCESS || result.status === TestStatus.UPDATED) {
-        return <div className={styles.screenshotContainer}>
-            <ImageLabel title={'Expected'} subtitle={getImageDisplayedSize(result.expectedImg)} />
-            <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.expectedImg} />
-        </div>;
-    } else if (result.status === TestStatus.STAGED) {
-        return <div className={styles.screenshotContainer}>
-            <ImageLabel title={'Staged'} subtitle={getImageDisplayedSize(result.actualImg)} />
-            <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.actualImg} />
-        </div>;
-    } else if (result.status === TestStatus.COMMITED) {
-        return <div className={styles.screenshotContainer}>
-            <ImageLabel title={'Committed'} subtitle={getImageDisplayedSize(result.actualImg)} />
-            <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.actualImg} />
-        </div>;
+        return <ErrorHandler.Root watchFor={[result]} fallback={<ErrorHandler.CardCrash />}>
+            <DiffViewer diffMode={diffMode} {...result} />
+        </ErrorHandler.Root>;
+    }
+
+    if (result.status === TestStatus.ERROR) {
+        return <ErrorHandler.Root watchFor={[result]} fallback={<ErrorHandler.CardCrash />}>
+            <div className={styles.screenshotContainer}>
+                <ImageLabel title={'Actual'} subtitle={getImageDisplayedSize(result.actualImg)} />
+                <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.actualImg} />
+            </div>
+        </ErrorHandler.Root>;
+    }
+
+    if (result.status === TestStatus.SUCCESS || result.status === TestStatus.UPDATED) {
+        return <ErrorHandler.Root watchFor={[result]} fallback={<ErrorHandler.CardCrash />}>
+            <div className={styles.screenshotContainer}>
+                <ImageLabel title={'Expected'} subtitle={getImageDisplayedSize(result.expectedImg)} />
+                <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.expectedImg} />
+            </div>
+        </ErrorHandler.Root>;
+    }
+
+    if (result.status === TestStatus.STAGED) {
+        return <ErrorHandler.Root watchFor={[result]} fallback={<ErrorHandler.CardCrash />}>
+            <div className={styles.screenshotContainer}>
+                <ImageLabel title={'Staged'} subtitle={getImageDisplayedSize(result.actualImg)} />
+                <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.actualImg} />
+            </div>
+        </ErrorHandler.Root>;
+    }
+
+    if (result.status === TestStatus.COMMITED) {
+        return <ErrorHandler.Root watchFor={[result]} fallback={<ErrorHandler.CardCrash />}>
+            <div className={styles.screenshotContainer}>
+                <ImageLabel title={'Committed'} subtitle={getImageDisplayedSize(result.actualImg)} />
+                <Screenshot containerStyle={style} containerClassName={styles.screenshot} image={result.actualImg} />
+            </div>
+        </ErrorHandler.Root>;
     }
 
     return null;

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);
 

lib/static/new-ui/components/TreeViewItem/index.module.css

@@ -23,3 +23,9 @@
     background: var(--g-color-private-red-100);
     color: var(--g-color-private-red-600-solid);
 }
+
+.tree-view-item--corrupted {
+    --g-color-base-simple-hover: var(--g-color-private-orange-50);
+    background: var(--g-color-private-orange-100);
+    color: var(--g-color-private-orange-600-solid);
+}

lib/static/new-ui/components/TreeViewItem/index.tsx

@@ -21,7 +21,7 @@ interface TreeListItemProps<T> {
     id: string;
     list: UseListResult<T>;
     mapItemDataToContentProps: (data: T) => ListItemViewContentType;
-    isFailed?: boolean;
+    status?: 'error' | 'corrupted';
     onItemClick?: (data: {id: string}) => unknown;
 }
 
@@ -34,7 +34,8 @@ export function TreeViewItem<T>(props: TreeListItemProps<T>): ReactNode {
     >
         <ListItemView
             className={classNames([styles.treeViewItem, {
-                [styles['tree-view-item--error']]: props.isFailed
+                [styles['tree-view-item--corrupted']]: props.status === 'corrupted',
+                [styles['tree-view-item--error']]: props.status === 'error'
             }])}
             activeOnHover={true}
             style={{'--indent': indent + Number(!hasChildren)} as React.CSSProperties}

lib/static/new-ui/features/error-handling/components/ErrorHandling/Boundary.tsx

@@ -0,0 +1,74 @@
+import React, {Component, DependencyList, ErrorInfo, ReactNode} from 'react';
+import {BoundaryProps, BoundaryState} from './interfaces';
+import {ErrorContextProvider} from './context';
+
+export class Boundary extends Component<BoundaryProps, BoundaryState> {
+    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};
+    }
+
+    componentDidCatch(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();
+    }
+
+    render(): ReactNode {
+        if (this.state.hasError) {
+            return (
+                <ErrorContextProvider value={{state: this.state, restore: this.restore.bind(this)}}>
+                    {this.props.fallback}
+                </ErrorContextProvider>
+            );
+        }
+
+        return this.props.children;
+    }
+}

lib/static/new-ui/features/error-handling/components/ErrorHandling/actions.tsx

@@ -0,0 +1,27 @@
+import {ArrowsRotateLeft} from '@gravity-ui/icons';
+import {Button, Icon} from '@gravity-ui/uikit';
+import React, {ReactNode} from 'react';
+import GithubIcon from '../../../../../icons/github-icon.svg';
+import {NEW_ISSUE_LINK} from '@/constants';
+
+function reportIssue(): void {
+    window.open(NEW_ISSUE_LINK, '_blank');
+}
+
+export function FileIssue(): ReactNode {
+    return <Button view="outlined" onClick={reportIssue}>
+        <img src={GithubIcon} alt="icon" />
+        File an issue
+    </Button>;
+}
+
+function reloadPage(): void {
+    window.location.reload();
+}
+
+export function ReloadPage(): ReactNode {
+    return <Button view="outlined" onClick={reloadPage}>
+        <Icon data={ArrowsRotateLeft} />
+        Refresh this page
+    </Button>;
+}

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<ErrorContext| null>(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;
+};

lib/static/new-ui/features/error-handling/components/ErrorHandling/fallbacks.tsx

@@ -0,0 +1,69 @@
+import {TriangleExclamation} from '@gravity-ui/icons';
+import {Divider, Icon, Link, Text} from '@gravity-ui/uikit';
+import classNames from 'classnames';
+import React, {ReactNode} from 'react';
+import TestplaneIcon from '../../../../../icons/testplane-mono-black.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 AppCrash(): ReactNode {
+    const {state} = useErrorContext();
+
+    return <div className={styles.crashAbsoluteWrapper}>
+        <div className={classNames(styles.crash)}>
+            <img src={TestplaneIcon} alt="icon" width={32} height={32}/>
+
+            <Text variant="subheader-3">Something went wrong</Text>
+            <Text variant="body-1" color="secondary">Testplane UI has crashed</Text>
+
+            <ErrorInfoFc className={styles.errorInfo} name={state.error.name} stack={state.error.stack} />
+
+            <div className={classNames(styles.actionRow)}>
+                <ReloadPage />
+
+                <FileIssue />
+            </div>
+
+            <Text variant="body-1" color="secondary">
+                We would appreciate a detailed<br/>
+                report with reproduction steps.
+            </Text>
+        </div>
+    </div>;
+}
+
+export function CardCrash(): ReactNode {
+    const {state} = useErrorContext();
+
+    return <div className={classNames(styles.crash)}>
+        <Icon data={TriangleExclamation} size={52}/>
+
+        <Text variant="subheader-3">Something went wrong</Text>
+        <Text variant="body-1" color="secondary">The data is corrupted or there’s a bug on our side</Text>
+
+        <ErrorInfoFc className={styles.errorInfo} name={state.error.name} stack={state.error.stack} />
+
+        <Text variant="body-1">Try choosing another item</Text>
+
+        <div className={classNames(styles.pickActionSeparator)}>
+            <Divider className={classNames(styles.pickActionSeparatorLine)} />
+            <Text variant="caption-1" color="secondary">OR</Text>
+            <Divider className={classNames(styles.pickActionSeparatorLine)} />
+        </div>
+
+        <FileIssue />
+    </div>;
+}
+
+export function DataCorruption(): ReactNode {
+    const {state} = useErrorContext();
+
+    return <div className={classNames(styles.crash)}>
+        <Text variant="body-1" color="secondary">The data is corrupted or there’s a bug on our side. <Link href={NEW_ISSUE_LINK} target='_blank'>File an issue</Link></Text>
+
+        <ErrorInfoFc className={styles.errorInfo} name={state.error.name} stack={state.error.stack} />
+    </div>;
+}