React UI: Better exception handling (#1297)

Author: bsekachev

cvat-core/package.json

@@ -34,6 +34,7 @@
   "dependencies": {
     "axios": "^0.18.0",
     "browser-or-node": "^1.2.1",
+    "detect-browser": "^5.0.0",
     "error-stack-parser": "^2.0.2",
     "form-data": "^2.5.0",
     "jest-config": "^24.8.0",

cvat-core/src/enums.js

@@ -109,6 +109,7 @@
         * @memberof module:API.cvat.enums
         * @property {string} loadJob Load job
         * @property {string} saveJob Save job
+        * @property {string} restoreJob Restore job
         * @property {string} uploadAnnotations Upload annotations
         * @property {string} sendUserActivity Send user activity
         * @property {string} sendException Send exception
@@ -142,6 +143,7 @@
     const LogType = Object.freeze({
         loadJob: 'Load job',
         saveJob: 'Save job',
+        restoreJob: 'Restore job',
         uploadAnnotations: 'Upload annotations',
         sendUserActivity: 'Send user activity',
         sendException: 'Send exception',

cvat-core/src/log.js

@@ -6,6 +6,7 @@
     require:false
 */
 
+const { detect } = require('detect-browser');
 const PluginRegistry = require('./plugins');
 const { ArgumentError } = require('./exceptions');
 const { LogType } = require('./enums');
@@ -179,6 +180,48 @@ class LogWithExceptionInfo extends Log {
                 + 'It must be a number';
             throw new ArgumentError(message);
         }
+
+        if (typeof (this.payload.column) !== 'number') {
+            const message = `The field "column" is required for ${this.type} log. `
+                + 'It must be a number';
+            throw new ArgumentError(message);
+        }
+
+        if (typeof (this.payload.stack) !== 'string') {
+            const message = `The field "stack" is required for ${this.type} log. `
+                + 'It must be a string';
+            throw new ArgumentError(message);
+        }
+    }
+
+    dump() {
+        const payload = { ...this.payload };
+        const client = detect();
+        const body = {
+            client_id: payload.client_id,
+            name: this.type,
+            time: this.time.toISOString(),
+            message: payload.message,
+            filename: payload.filename,
+            line: payload.line,
+            column: payload.column,
+            stack: payload.stack,
+            system: client.os,
+            client: client.name,
+            version: client.version,
+        };
+
+        delete payload.client_id;
+        delete payload.message;
+        delete payload.filename;
+        delete payload.line;
+        delete payload.column;
+        delete payload.stack;
+
+        return {
+            ...body,
+            payload,
+        };
     }
 }
 

cvat-core/src/logger-storage.js

@@ -7,7 +7,7 @@
 */
 
 const PluginRegistry = require('./plugins');
-const server = require('./server-proxy');
+const serverProxy = require('./server-proxy');
 const logFactory = require('./log');
 const { ArgumentError } = require('./exceptions');
 const { LogType } = require('./enums');
@@ -128,6 +128,14 @@ LoggerStorage.prototype.log.implementation = function (logType, payload, wait) {
         this.collection.push(log);
     };
 
+    if (log.type === LogType.sendException) {
+        serverProxy.server.exception(log.dump()).catch(() => {
+            pushEvent();
+        });
+
+        return log;
+    }
+
     if (wait) {
         log.onClose(pushEvent);
     } else {
@@ -156,7 +164,7 @@ LoggerStorage.prototype.save.implementation = async function () {
     const userActivityLog = logFactory(LogType.sendUserActivity, logPayload);
     collectionToSend.push(userActivityLog);
 
-    await server.logs.save(collectionToSend.map((log) => log.dump()));
+    await serverProxy.logs.save(collectionToSend.map((log) => log.dump()));
 
     for (const rule of Object.values(this.ignoreRules)) {
         rule.lastLog = null;

cvat-ui/package-lock.json

@@ -57,6 +57,7 @@
     "antd": "^3.25.2",
     "copy-to-clipboard": "^3.2.0",
     "dotenv-webpack": "^1.7.0",
+    "error-stack-parser": "^2.0.6",
     "moment": "^2.24.0",
     "prop-types": "^15.7.2",
     "react": "^16.9.0",

cvat-ui/package.json

@@ -78,10 +78,14 @@ function receiveAnnotationsParameters(): AnnotationsParameters {
     };
 }
 
-function computeZRange(states: any[]): number[] {
+export function computeZRange(states: any[]): number[] {
     let minZ = states.length ? states[0].zOrder : 0;
     let maxZ = states.length ? states[0].zOrder : 0;
     states.forEach((state: any): void => {
+        if (state.objectType === ObjectType.TAG) {
+            return;
+        }
+
         minZ = Math.min(minZ, state.zOrder);
         maxZ = Math.max(maxZ, state.zOrder);
     });

cvat-ui/src/actions/annotation-actions.ts

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

cvat-ui/src/actions/boundaries-actions.ts

@@ -5,6 +5,8 @@
 import React, { useState, useEffect } from 'react';
 import { GlobalHotKeys, KeyMap } from 'react-hotkeys';
 import { connect } from 'react-redux';
+import { Action } from 'redux';
+import { ThunkDispatch } from 'redux-thunk';
 import Layout, { SiderProps } from 'antd/lib/layout';
 import { SelectValue } from 'antd/lib/select';
 import { CheckboxChangeEvent } from 'antd/lib/checkbox';
@@ -65,7 +67,7 @@ function mapStateToProps(state: CombinedState): StateToProps {
     };
 }
 
-function mapDispatchToProps(dispatch: any): DispatchToProps {
+function mapDispatchToProps(dispatch: ThunkDispatch<CombinedState, {}, Action>): DispatchToProps {
     return {
         activateObject(clientID: number, attrID: number): void {
             dispatch(activateObjectAction(clientID, attrID));