[ant-design/ant-design-pro]需求是后台响应404或者500,这个异常能够到app.tsx中errorHandler中,直接使用ant.desgin.pro自带的异常配置,但是获取不到异常

2023-12-19 996 views
9
🧐 问题描述

需求是后台响应404或者500,这个异常能够到app.tsx中errorHandler中,直接使用ant.desgin.pro自带的异常配置,但是获取不到异常

💻 示例代码

`/**

  • 异常处理程序 */ const errorHandler = (error: ResponseError) => { console.log("异常程序处理**");
    const { response } = error; if (response && response.status) { console.log("异常程序处理**");
    console.log(response);
    const errorText = codeMessage[response.status] || response.statusText; const { status, url } = response;

    notification.error({ message: 请求错误 ${status}: ${url}, description: errorText, }); }

    if (!response) { notification.error({ description: '您的网络发生异常,无法连接服务器', message: '网络异常', }); } throw error; };`

    自己手动响应401和403可以,但是直接springboot返回的404和500异常捕捉不到

    🚑 其他信息

    error: "Not Found" message: "Not Found" path: "/debit/api/rule" status: 404 timestamp: "2020-12-16T06:58:00.786+0000" 这是后台响应的异常, 根据文档说,只要是http抛出的错误,不需要关系,会统一错误处理,但是我在errorHandler中打印日志,啥也没有,而且404界面也没触发

回答

2

那估计是respone里的吧 这里只能处理http的请求

2

就是http的请求啊

5

我怀疑是返回数据跟ant.desgin.pro封装错误处理字段不一样,导致出现问题

0

大佬,我还有一个问题,我在form中使用select的时候,采用filterOption={(input,option) => option?.value.includes(input)}这个来搜索,option对象中获取不到label的值,只能获取到value、key的值,这个是bug吗?我用官网的案例发现也获取不到

2

就是http的请求啊

说的是http的状态不是response返回的404,你可以把图放出来

5

这个你应该是用的children你要是设置的options就会返回label,这不算是bug吧

3

多谢大佬,明白你们说的

0

const optionBrachs = branchList.map(item => { return <Option value={item.value} key={item.value}>{item.value}-{item.label}</Option>})

2

这个 Option 组件下有 children了所以不返回label,这种情况返回label没有意义

2

我 直接在app.ts中搞个响应拦截,打印响应的数据body: (...) bodyUsed: true headers: Headers {} ok: false redirected: false status: 404 statusText: "Not Found" type: "basic" url: "http://localhost:8000/api/role/allRole" 这是打印的数据,这个状态吗就是404啊,我感觉这个errorHandler有bug,捕捉不到

7

现在只能通过响应拦截来做这个事情了

0

截图给代码看看

8

不知道为啥,我上传不了图片,上面发的就是浏览器响应的结果

7

我后端直接响应403response.sendError(HttpServletResponse.SC_FORBIDDEN, accessDeniedException.getMessage());,然后控制台就报错了,报错代码如下: index.es.js:710 GET http://localhost:8000/api/dacl/list?current=1&pageSize=20&sorter=%7B%7D&filter=%7B%7D 403 (Forbidden) fetchMiddleware @ index.es.js:710 dispatch @ index.es.js:146 (anonymous) @ index.es.js:147 parseResponseMiddleware @ index.es.js:742 dispatch @ index.es.js:146 (anonymous) @ index.es.js:147 simpleGetMiddleware @ index.es.js:966 dispatch @ index.es.js:146 (anonymous) @ index.es.js:147 simplePostMiddleware @ index.es.js:853 dispatch @ index.es.js:146 wrapMiddlewares @ index.es.js:154 execute @ index.es.js:221 (anonymous) @ index.es.js:1051 Promise.then (async) (anonymous) @ index.es.js:1050 request @ index.es.js:1049 umiInstance @ index.es.js:1188 _callee$ @ service.ts:4 tryCatch @ runtime.js:45 invoke @ runtime.js:274 prototype.<computed> @ runtime.js:97 asyncGeneratorStep @ asyncToGenerator.js:3 _next @ asyncToGenerator.js:25 (anonymous) @ asyncToGenerator.js:32 (anonymous) @ asyncToGenerator.js:21 _queryRule @ service.ts:4 queryRule @ service.ts:4 request @ index.tsx:201 _callee$ @ Table.js:208 tryCatch @ runtime.js:45 invoke @ runtime.js:274 prototype.<computed> @ runtime.js:97 asyncGeneratorStep @ Table.js:28 _next @ Table.js:30 (anonymous) @ Table.js:30 (anonymous) @ Table.js:30 (anonymous) @ Table.js:238 _callee$ @ useFetchData.js:117 tryCatch @ runtime.js:45 invoke @ runtime.js:274 prototype.<computed> @ runtime.js:97 asyncGeneratorStep @ useFetchData.js:9 _next @ useFetchData.js:11 (anonymous) @ useFetchData.js:11 (anonymous) @ useFetchData.js:11 fetchList @ useFetchData.js:174 _callee$ @ index.js:69 tryCatch @ runtime.js:45 invoke @ runtime.js:274 prototype.<computed> @ runtime.js:97 asyncGeneratorStep @ index.js:13 _next @ index.js:15 (anonymous) @ index.js:15 (anonymous) @ index.js:15 setTimeout (async) (anonymous) @ index.js:63 _callee2$ @ index.js:61 tryCatch @ runtime.js:45 invoke @ runtime.js:274 prototype.<computed> @ runtime.js:97 asyncGeneratorStep @ index.js:13 _next @ index.js:15 (anonymous) @ index.js:15 (anonymous) @ index.js:15 (anonymous) @ useFetchData.js:238 commitHookEffectListMount @ react-dom.development.js:19731 commitPassiveHookEffects @ react-dom.development.js:19769 callCallback @ react-dom.development.js:188 invokeGuardedCallbackDev @ react-dom.development.js:237 invokeGuardedCallback @ react-dom.development.js:292 flushPassiveEffectsImpl @ react-dom.development.js:22853 unstable_runWithPriority @ scheduler.development.js:653 runWithPriority$1 @ react-dom.development.js:11039 flushPassiveEffects @ react-dom.development.js:22820 (anonymous) @ react-dom.development.js:22699 workLoop @ scheduler.development.js:597 flushWork @ scheduler.development.js:552 performWorkUntilDeadline @ scheduler.development.js:164 Show 24 more frames useFetchData.js:160 Uncaught (in promise) Error: ResponseError: http error at _callee$ (useFetchData.js:160) at tryCatch (runtime.js:45) at Generator.invoke [as _invoke] (runtime.js:274) at Generator.prototype.<computed> [as throw] (runtime.js:97) at asyncGeneratorStep (useFetchData.js:9) at _throw (useFetchData.js:11)

9

返回label当然有意义啊,这样可以通过label来过滤,没有label的值,如何和input的值作比较啊,现在只有value的值,我只能通过value来筛选,当然可以通过key来做,把key的值也设置成label的值。

9

这是浏览器整个响应结果: Request URL: http://localhost:8000/api/organ/list?current=1&pageSize=20&sorter=%7B%7D&filter=%7B%7D Request Method: GET Status Code: 403 Forbidden Remote Address: 127.0.0.1:8000 Referrer Policy: strict-origin-when-cross-origin access-control-allow-origin: * cache-control: no-cache, no-store, max-age=0, must-revalidate connection: close Content-Encoding: gzip content-type: application/json date: Thu, 17 Dec 2020 09:27:52 GMT expires: 0 pragma: no-cache Transfer-Encoding: chunked Vary: Origin, Access-Control-Request-Method, Access-Control-Request-Headers, Accept-Encoding x-content-type-options: nosniff x-frame-options: SAMEORIGIN X-Powered-By: Express x-real-url: http://localhost:18082/api/organ/list?current=1&pageSize=20&sorter=%7B%7D&filter=%7B%7D x-xss-protection: 1; mode=block Accept: */* Accept-Encoding: gzip, deflate, br Accept-Language: zh-CN,zh;q=0.9,ar;q=0.8 Authorization: Bearer eyJhbGciOiJIUzUxMiJ9.eyJzdWIiOiJxdWdsIiwiYXV0aCI6IlJPTEVfU2ltcGxlIiwiZXhwIjoxNjA4MzA0MjYyLCJpc3MiOiI2NTY3Nzk4MTIyMTEzOTY2MDgifQ.NTuGDZvvrP7g6yfKBHsuohL5ZlzwovnucB5W6VaqxRDwvQLw9ojNKEOCHDbBX1EaaUdG8B2okncB4V1ZbY_gsg Connection: keep-alive Cookie: _ga=GA1.1.832775166.1580697557; Abp.Localization.CultureName=zh-Hans; Abp.TenantId=3; Hm_lvt_7174bade1219f9cc272e7978f9523fc8=1604319509 Host: localhost:8000 Referer: http://localhost:8000/ Sec-Fetch-Dest: empty Sec-Fetch-Mode: cors Sec-Fetch-Site: same-origin User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_0) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36 current: 1 pageSize: 20 sorter: {} filter: {}

3

看下这个例子,我从一开始就说了你应该好好看看描述的话,并且用children不是一样吗

1

嗯,是我理解错了,不好意思

2

请问这个问题最后怎么解决的,我也遇到类似问题,后台返回500,errorHandler捕获不到,浏览器提示这个什么意思? image