From 838d8418f917d6338b392447d12f44b9bb234226 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E5=B8=85?= Date: Wed, 27 Dec 2017 23:20:50 +0800 Subject: [PATCH] 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 | 27 ++++++++++++ src/common/menu.js | 3 ++ src/common/router.js | 3 ++ src/error.js | 17 ++++++++ src/index.js | 3 +- src/models/error.js | 42 +++++++++++++++++++ src/routes/Exception/style.less | 7 ++++ src/routes/Exception/triggerException.js | 52 ++++++++++++++++++++++++ src/services/error.js | 13 ++++++ src/utils/request.js | 1 + 10 files changed, 167 insertions(+), 1 deletion(-) create mode 100644 src/error.js create mode 100644 src/models/error.js create mode 100644 src/routes/Exception/style.less create mode 100644 src/routes/Exception/triggerException.js create mode 100644 src/services/error.js diff --git a/.roadhogrc.mock.js b/.roadhogrc.mock.js index 36e6e97f..cf82620d 100644 --- a/.roadhogrc.mock.js +++ b/.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); diff --git a/src/common/menu.js b/src/common/menu.js index 9fd3f3fe..e73b95b3 100644 --- a/src/common/menu.js +++ b/src/common/menu.js @@ -89,6 +89,9 @@ const menuData = [{ }, { name: '500', path: '500', + }, { + name: '触发异常', + path: 'trigger', }], }, { name: '账户', diff --git a/src/common/router.js b/src/common/router.js index 612fee15..a2305f5f 100644 --- a/src/common/router.js +++ b/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')), }, diff --git a/src/error.js b/src/error.js new file mode 100644 index 00000000..83d1386d --- /dev/null +++ b/src/error.js @@ -0,0 +1,17 @@ +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; diff --git a/src/index.js b/src/index.js index 71f460ec..1298630b 100644 --- a/src/index.js +++ b/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 diff --git a/src/models/error.js b/src/models/error.js new file mode 100644 index 00000000..818d65bf --- /dev/null +++ b/src/models/error.js @@ -0,0 +1,42 @@ +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, + }; + }, + }, +}; diff --git a/src/routes/Exception/style.less b/src/routes/Exception/style.less new file mode 100644 index 00000000..44fccccf --- /dev/null +++ b/src/routes/Exception/style.less @@ -0,0 +1,7 @@ +.trigger { + background: "red"; + :global(.ant-btn) { + margin-right: 8px; + margin-bottom: 12px; + } +} diff --git a/src/routes/Exception/triggerException.js b/src/routes/Exception/triggerException.js new file mode 100644 index 00000000..0ed15a9f --- /dev/null +++ b/src/routes/Exception/triggerException.js @@ -0,0 +1,52 @@ +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 ( + + + + + + ); + } +} diff --git a/src/services/error.js b/src/services/error.js new file mode 100644 index 00000000..b1969d82 --- /dev/null +++ b/src/services/error.js @@ -0,0 +1,13 @@ +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'); +} diff --git a/src/utils/request.js b/src/utils/request.js index fa043e3b..d5c5200e 100644 --- a/src/utils/request.js +++ b/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; } -- GitLab