React UI: Better exception handling (#1297)
Boris Sekachev
6 years ago
committed by
GitHub
parent
9ef89c724f
commit
796044782f
@ -0,0 +1,88 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import {
|
||||
ActionUnion,
|
||||
createAction,
|
||||
ThunkAction,
|
||||
ThunkDispatch,
|
||||
} from 'utils/redux';
|
||||
import getCore from 'cvat-core';
|
||||
import { LogType } from 'cvat-logger';
|
||||
import { computeZRange } from './annotation-actions';
|
||||
|
||||
const cvat = getCore();
|
||||
|
||||
export enum BoundariesActionTypes {
|
||||
RESET_AFTER_ERROR = 'RESET_AFTER_ERROR',
|
||||
THROW_RESET_ERROR = 'THROW_RESET_ERROR',
|
||||
}
|
||||
|
||||
export const boundariesActions = {
|
||||
resetAfterError: (
|
||||
job: any,
|
||||
states: any[],
|
||||
frameNumber: number,
|
||||
frameData: any | null,
|
||||
minZ: number,
|
||||
maxZ: number,
|
||||
colors: string[],
|
||||
) => createAction(BoundariesActionTypes.RESET_AFTER_ERROR, {
|
||||
job,
|
||||
states,
|
||||
frameNumber,
|
||||
frameData,
|
||||
minZ,
|
||||
maxZ,
|
||||
colors,
|
||||
}),
|
||||
throwResetError: () => createAction(BoundariesActionTypes.THROW_RESET_ERROR),
|
||||
};
|
||||
|
||||
export function resetAfterErrorAsync(): ThunkAction {
|
||||
return async (dispatch: ThunkDispatch, getState): Promise<void> => {
|
||||
try {
|
||||
const state = getState();
|
||||
const job = state.annotation.job.instance;
|
||||
|
||||
if (job) {
|
||||
const currentFrame = state.annotation.player.frame.number;
|
||||
const { showAllInterpolationTracks } = state.settings.workspace;
|
||||
const frameNumber = Math.max(Math.min(job.stopFrame, currentFrame), job.startFrame);
|
||||
|
||||
const states = await job.annotations
|
||||
.get(frameNumber, showAllInterpolationTracks, []);
|
||||
const frameData = await job.frames.get(frameNumber);
|
||||
const [minZ, maxZ] = computeZRange(states);
|
||||
const colors = [...cvat.enums.colors];
|
||||
|
||||
await job.logger.log(LogType.restoreJob);
|
||||
|
||||
dispatch(boundariesActions.resetAfterError(
|
||||
job,
|
||||
states,
|
||||
frameNumber,
|
||||
frameData,
|
||||
minZ,
|
||||
maxZ,
|
||||
colors,
|
||||
));
|
||||
} else {
|
||||
dispatch(boundariesActions.resetAfterError(
|
||||
null,
|
||||
[],
|
||||
0,
|
||||
null,
|
||||
0,
|
||||
0,
|
||||
[],
|
||||
));
|
||||
}
|
||||
} catch (error) {
|
||||
dispatch(boundariesActions.throwResetError());
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
export type boundariesActions = ActionUnion<typeof boundariesActions>;
|
||||
@ -0,0 +1,223 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
import './styles.scss';
|
||||
import React from 'react';
|
||||
import { connect } from 'react-redux';
|
||||
import { Action } from 'redux';
|
||||
import { ThunkDispatch } from 'redux-thunk';
|
||||
import Result from 'antd/lib/result';
|
||||
import Text from 'antd/lib/typography/Text';
|
||||
import Paragraph from 'antd/lib/typography/Paragraph';
|
||||
import Collapse from 'antd/lib/collapse';
|
||||
import TextArea from 'antd/lib/input/TextArea';
|
||||
import Tooltip from 'antd/lib/tooltip';
|
||||
import copy from 'copy-to-clipboard';
|
||||
import ErrorStackParser from 'error-stack-parser';
|
||||
|
||||
import { resetAfterErrorAsync } from 'actions/boundaries-actions';
|
||||
import { CombinedState } from 'reducers/interfaces';
|
||||
import logger, { LogType } from 'cvat-logger';
|
||||
|
||||
interface StateToProps {
|
||||
job: any | null;
|
||||
serverVersion: string;
|
||||
coreVersion: string;
|
||||
canvasVersion: string;
|
||||
uiVersion: string;
|
||||
}
|
||||
|
||||
interface DispatchToProps {
|
||||
restore(): void;
|
||||
}
|
||||
|
||||
interface State {
|
||||
hasError: boolean;
|
||||
error: Error | null;
|
||||
}
|
||||
|
||||
function mapStateToProps(state: CombinedState): StateToProps {
|
||||
const {
|
||||
annotation: {
|
||||
job: {
|
||||
instance: job,
|
||||
},
|
||||
},
|
||||
about: {
|
||||
server,
|
||||
packageVersion,
|
||||
},
|
||||
} = state;
|
||||
|
||||
return {
|
||||
job,
|
||||
serverVersion: server.version as string,
|
||||
coreVersion: packageVersion.core,
|
||||
canvasVersion: packageVersion.canvas,
|
||||
uiVersion: packageVersion.ui,
|
||||
};
|
||||
}
|
||||
|
||||
function mapDispatchToProps(dispatch: ThunkDispatch<CombinedState, {}, Action>): DispatchToProps {
|
||||
return {
|
||||
restore(): void {
|
||||
dispatch(resetAfterErrorAsync());
|
||||
},
|
||||
};
|
||||
}
|
||||
|
||||
|
||||
type Props = StateToProps & DispatchToProps;
|
||||
class GlobalErrorBoundary extends React.PureComponent<Props, State> {
|
||||
public constructor(props: Props) {
|
||||
super(props);
|
||||
this.state = {
|
||||
hasError: false,
|
||||
error: null,
|
||||
};
|
||||
}
|
||||
|
||||
static getDerivedStateFromError(error: Error): State {
|
||||
return {
|
||||
hasError: true,
|
||||
error,
|
||||
};
|
||||
}
|
||||
|
||||
public componentDidCatch(error: Error, errorInfo: React.ErrorInfo): void {
|
||||
const { job } = this.props;
|
||||
const parsed = ErrorStackParser.parse(error);
|
||||
|
||||
const logPayload = {
|
||||
filename: parsed[0].fileName,
|
||||
line: parsed[0].lineNumber,
|
||||
message: error.message,
|
||||
column: parsed[0].columnNumber,
|
||||
stack: error.stack,
|
||||
componentStack: errorInfo.componentStack,
|
||||
};
|
||||
|
||||
if (job) {
|
||||
job.logger.log(LogType.sendException, logPayload);
|
||||
} else {
|
||||
logger.log(LogType.sendException, logPayload);
|
||||
}
|
||||
}
|
||||
|
||||
public render(): React.ReactNode {
|
||||
const {
|
||||
restore,
|
||||
job,
|
||||
serverVersion,
|
||||
coreVersion,
|
||||
canvasVersion,
|
||||
uiVersion,
|
||||
} = this.props;
|
||||
|
||||
const { hasError, error } = this.state;
|
||||
|
||||
const restoreGlobalState = (): void => {
|
||||
this.setState({
|
||||
error: null,
|
||||
hasError: false,
|
||||
});
|
||||
|
||||
restore();
|
||||
};
|
||||
|
||||
if (hasError && error) {
|
||||
const message = `${error.name}\n${error.message}\n\n${error.stack}`;
|
||||
return (
|
||||
<div className='cvat-global-boundary'>
|
||||
<Result
|
||||
status='error'
|
||||
title='Oops, something went wrong'
|
||||
subTitle='More likely there are some issues with the tool'
|
||||
>
|
||||
<div>
|
||||
<Paragraph>
|
||||
<Paragraph strong>What has happened?</Paragraph>
|
||||
<Paragraph>Program error has just occured</Paragraph>
|
||||
<Collapse accordion>
|
||||
<Collapse.Panel header='Error message' key='errorMessage'>
|
||||
<Text type='danger'>
|
||||
<TextArea className='cvat-global-boundary-error-field' autoSize value={message} />
|
||||
</Text>
|
||||
</Collapse.Panel>
|
||||
</Collapse>
|
||||
</Paragraph>
|
||||
|
||||
<Paragraph>
|
||||
<Text strong>What should I do?</Text>
|
||||
</Paragraph>
|
||||
<ul>
|
||||
<li>
|
||||
<Tooltip title='Copied!' trigger='click'>
|
||||
{/* eslint-disable-next-line */}
|
||||
<a onClick={() => {copy(message)}}> Copy </a>
|
||||
</Tooltip>
|
||||
the error message to clipboard
|
||||
</li>
|
||||
<li>
|
||||
Notify an administrator or submit the issue directly on
|
||||
<a href='https://github.com/opencv/cvat'> GitHub. </a>
|
||||
Please, provide also:
|
||||
<ul>
|
||||
<li>Steps to reproduce the issue</li>
|
||||
<li>Your operating system and browser version</li>
|
||||
<li>CVAT version</li>
|
||||
<ul>
|
||||
<li>
|
||||
<Text strong>Server: </Text>
|
||||
{serverVersion}
|
||||
</li>
|
||||
<li>
|
||||
<Text strong>Core: </Text>
|
||||
{coreVersion}
|
||||
</li>
|
||||
<li>
|
||||
<Text strong>Canvas: </Text>
|
||||
{canvasVersion}
|
||||
</li>
|
||||
<li>
|
||||
<Text strong>UI: </Text>
|
||||
{uiVersion}
|
||||
</li>
|
||||
</ul>
|
||||
</ul>
|
||||
</li>
|
||||
{job ? (
|
||||
<li>
|
||||
Press
|
||||
{/* eslint-disable-next-line */}
|
||||
<a onClick={restoreGlobalState}> here </a>
|
||||
if you wish CVAT tried to restore your
|
||||
annotation progress or
|
||||
{/* eslint-disable-next-line */}
|
||||
<a onClick={() => window.location.reload()}> update </a>
|
||||
the page
|
||||
</li>
|
||||
) : (
|
||||
<li>
|
||||
{/* eslint-disable-next-line */}
|
||||
<a onClick={() => window.location.reload()}>Update </a>
|
||||
the page
|
||||
</li>
|
||||
)}
|
||||
</ul>
|
||||
</div>
|
||||
</Result>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
const { children } = this.props;
|
||||
return children;
|
||||
}
|
||||
}
|
||||
|
||||
export default connect(
|
||||
mapStateToProps,
|
||||
mapDispatchToProps,
|
||||
)(GlobalErrorBoundary);
|
||||
@ -0,0 +1,17 @@
|
||||
// Copyright (C) 2020 Intel Corporation
|
||||
//
|
||||
// SPDX-License-Identifier: MIT
|
||||
|
||||
@import '../../base.scss';
|
||||
|
||||
.cvat-global-boundary {
|
||||
.ant-result > .ant-result-content {
|
||||
background-color: $transparent-color;
|
||||
}
|
||||
|
||||
.cvat-global-boundary-error-field {
|
||||
color: red;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue