Increase global error handling (#500)

* Increase global error handling

* Increase global error handling

* fix bug

* rebase master

* Change 401 to 403

* add triggerException   style.less

.roadhogrc.mock.js

@@ -79,6 +79,33 @@ const proxy = {
     res.send({ status: 'ok' });
   },
   'GET /api/notices': getNotices,
+  'GET /api/500': (req, res) => {
+    res.status(500).send({
+      "timestamp": 1513932555104,
+      "status": 500,
+      "error": "error",
+      "message": "error",
+      "path": "/base/category/list"
+    });
+  },
+  'GET /api/404': (req, res) => {
+    res.status(404).send({
+      "timestamp": 1513932643431,
+      "status": 404,
+      "error": "Not Found",
+      "message": "No message available",
+      "path": "/base/category/list/2121212"
+    });
+  },
+  'GET /api/403': (req, res) => {
+    res.status(403).send({
+      "timestamp": 1513932555104,
+      "status": 403,
+      "error": "Unauthorized",
+      "message": "Unauthorized",
+      "path": "/base/category/list"
+    });
+  },
 };
 
 export default noProxy ? {} : delay(proxy, 1000);

src/common/menu.js

@@ -89,6 +89,9 @@ const menuData = [{
   }, {
     name: '500',
     path: '500',
+  }, {
+    name: '触发异常',
+    path: 'trigger',
   }],
 }, {
   name: '账户',

src/common/router.js

@@ -104,6 +104,9 @@ export const getRouterData = (app) => {
     '/exception/500': {
       component: dynamicWrapper(app, [], () => import('../routes/Exception/500')),
     },
+    '/exception/trigger': {
+      component: dynamicWrapper(app, ['error'], () => import('../routes/Exception/triggerException')),
+    },
     '/user': {
       component: dynamicWrapper(app, [], () => import('../layouts/UserLayout')),
     },

src/error.js

+import { routerRedux } from 'dva/router';
+
+const error = (e, dispatch) => {
+  if (e.name === 401 || e.name === 403) {
+    dispatch(routerRedux.push('/exception/403'));
+    return;
+  }
+  if (e.name <= 504 && e.name >= 500) {
+    dispatch(routerRedux.push('/exception/500'));
+    return;
+  }
+  if (e.name >= 404 && e.name < 422) {
+    dispatch(routerRedux.push('/exception/404'));
+  }
+};
+
+export default error;

src/index.js

@@ -3,12 +3,13 @@ import dva from 'dva';
 import 'moment/locale/zh-cn';
 import './g2';
 import './rollbar';
+import onError from './error';
 // import browserHistory from 'history/createBrowserHistory';
 import './index.less';
-
 // 1. Initialize
 const app = dva({
   // history: browserHistory(),
+  onError,
 });
 
 // 2. Plugins

src/models/error.js

+import { query403, query404, query500 } from '../services/error';
+
+export default {
+  namespace: 'error',
+
+  state: {
+    error: '',
+    isloading: false,
+  },
+
+  effects: {
+    *query403(_, { call, put }) {
+      yield call(query403);
+      yield put({
+        type: 'trigger',
+        payload: '403',
+      });
+    },
+    *query500(_, { call, put }) {
+      yield call(query500);
+      yield put({
+        type: 'trigger',
+        payload: '500',
+      });
+    },
+    *query404(_, { call, put }) {
+      yield call(query404);
+      yield put({
+        type: 'trigger',
+        payload: '404',
+      });
+    },
+  },
+
+  reducers: {
+    trigger(state, action) {
+      return {
+        error: action.payload,
+      };
+    },
+  },
+};

src/routes/Exception/style.less

+.trigger {
+  background: "red";
+  :global(.ant-btn) {
+    margin-right: 8px;
+    margin-bottom: 12px;
+  }
+}

src/routes/Exception/triggerException.js

+import React, { PureComponent } from 'react';
+import { Button, Spin } from 'antd';
+import { connect } from 'dva';
+import styles from './style.less';
+
+@connect(state => ({
+  isloading: state.error.isloading,
+}))
+export default class TriggerException extends PureComponent {
+  state={
+    isloading: false,
+  }
+  trigger403 = () => {
+    this.setState({
+      isloading: true,
+    });
+    this.props.dispatch({
+      type: 'error/query403',
+    });
+  };
+  trigger500 = () => {
+    this.setState({
+      isloading: true,
+    });
+    this.props.dispatch({
+      type: 'error/query500',
+    });
+  };
+  trigger404 = () => {
+    this.setState({
+      isloading: true,
+    });
+    this.props.dispatch({
+      type: 'error/query404',
+    });
+  };
+  render() {
+    return (
+      <Spin spinning={this.state.isloading} wrapperClassName={styles.trigger}>
+        <Button type="danger" onClick={this.trigger403}>
+        触发403
+        </Button>
+        <Button type="danger" onClick={this.trigger500}>
+         触发500
+        </Button>
+        <Button type="danger" onClick={this.trigger404}>
+         触发404
+        </Button>
+      </Spin>
+    );
+  }
+}

src/services/error.js

+import request from '../utils/request';
+
+export async function query404() {
+  return request('/api/404');
+}
+
+export async function query403() {
+  return request('/api/403');
+}
+
+export async function query500() {
+  return request('/api/500');
+}

src/utils/request.js

@@ -28,6 +28,7 @@ function checkStatus(response) {
     description: errortext,
   });
   const error = new Error(errortext);
+  error.name = response.status;
   error.response = response;
   throw error;
 }