错误处理

在用户使用过程中，可能遇到各种异常情况，比如页面 404，申请结果失败，请求的返回异常等等，这篇文档会按照报错形式的不同，分别介绍下相应的处理建议。

页面级报错

应用场景

  • 路由直接引导到报错页面，比如你输入的网址没有匹配到任何页面，可以由路由引导到预设的 404 页面。
  • 代码控制跳转到报错页面，比如根据请求返回的数据，将没有权限的用户引导到 403 页面。

实现

针对页面级的报错，我们提供了两个业务组件供你选择，可以很方便地实现一个报错页面：

  1. <Exception type="404" />

默认支持 404，403，500 三种错误，也可自定义文案等内容。

  1. <Result
  2.   type="error"
  3.   title="提交失败"
  4.   description="请核对并修改以下信息后，再重新提交。"
  5.   actions={
  6.     <Button size="large" type="primary">
  7.       返回修改
  8.     </Button>
  9.   }
  10. />

这个组件一般用在提交结果展示，文案操作等均可自定义。

提示性报错

应用场景

  • 表单项校验报错。
  • 操作反馈。
  • 网络请求错误。

实现

关于表单项报错，请参考 antd Form 中的实现。对于操作反馈和网络请求错误提示，有一些组件可能会用到：

  • Alert
  • message
  • notification
    在单页应用中，最常见的需求就是处理网络错误信息，我们可以利用 message 和 notification 来吐出响应的接口/网络/业务数据错误。

错误处理 - 图1

Ant Design Pro 封装了一个强大的 request.js 统一处理请求，提供了默认的错误处理以及提示。

  1. const checkStatus = response => {
  2.   if (response.status >= 200 && response.status < 300) {
  3.     return response;
  4.   }
  5.   const errortext = codeMessage[response.status] || response.statusText;
  6.   notification.error({
  7.     message: `请求错误 ${response.status}: ${response.url}`,
  8.     description: errortext,
  9.   });
  10.   const error = new Error(errortext);
  11.   error.name = response.status;
  12.   error.response = response;
  13.   throw error;
  14. };

为了方便展示 404 等页面，我们在 request.js 中封装了根据状态跳转到相应页面的逻辑,建议在线上环境中删除这个逻辑，代码如下：

  1.     .catch(e => {
  2.       const status = e.name;
  3.       if (status === 401) {
  4.         // @HACK
  5.         /* eslint-disable no-underscore-dangle */
  6.         window.g_app._store.dispatch({
  7.           type: 'login/logout',
  8.         });
  9.         return;
  10.       }
  11.       // environment should not be used
  12.       if (status === 403) {
  13.         router.push('/exception/403');
  14.         return;
  15.       }
  16.       if (status <= 504 && status >= 500) {
  17.         router.push('/exception/500');
  18.         return;
  19.       }
  20.       if (status >= 404 && status < 422) {
  21.         router.push('/exception/404');
  22.       }
  23.     });

完整代码可参考：https://github.com/ant-design/ant-design-pro/blob/master/src/utils/request.js