013-ant design pro advanced error handling

I. Overview

Original address: https://pro.ant.design/docs/error-cn

2. Details

2.1, page-level error reporting

2.1.1. Application scenarios

The route leads directly to the error page. For example, if the URL you entered does not match any page, the route can lead to the preset 404 page.
The code controls the jump to the error page, for example, according to the data returned by the request, guide the user without permission to the 403 page.

2.1.2. Implementation

For page-level error reporting, we provide two business components for you to choose from, which can easily implement an error reporting page:

Exception page
```
<Exception type="404" />
```

　　　　By default, it supports 404, 403, and 500 errors, and you can also customize content such as copywriting.

Result page
```
<Result
  type = "error" 
  title = "Submission failed" 
  description = "Please check and modify the following information before submitting again." 
  actions ={<Button size="large" type="primary">Return to modify</Button> }
 />
```
　　This component is generally used for submitting results display, copywriting operations, etc. can be customized.
　　By default, the scaffolding will guide the URL that cannot match the page to the preset 404 page. If you need to customize this page, you can modify this file ./src/routes/Exception/404.js. The relevant routing configuration is here BasicLayout.js#L362

2.2. Indicative error reporting

2.2.1. Application scenarios

Form item validation error.
Action feedback.
Bad network request.

2.2.2. Implementation

For form item errors, please refer to the implementation in antd Form . For operation feedback and network request error prompts, there are some components that may be used:

In a single-page application, the most common requirement is to handle network error information. We can use message and notification to spit out the interface/network/business data error of the response.

mport fetch from 'dva/fetch';
import { notification } from 'antd';

...

fetch(url)
  .then(response => response.json())
  .catch ((error) => {
     // The logic to handle the data format error returned by the interface if ( error.code ) {
    
      notification.error({
        message: error.name,
        description: error.message,
      });
    }
    if ('stack' in error && 'message' in error) {
      notification.error({
        message: `Request error: ${url}`,
        description: error.message,
      });
    }
    return error;
  });

Ant Design Pro encapsulates a request.js unified processing request, the complete code can be referred to: https://github.com/ant-design/ant-design-pro/blob/master/src/utils/request.js