Umi: 在组件里面调用dispatch，返回的promise未能catch异常

[cheerful-li]

What happens?

在组件里面调用dispatch，返回的promise未能catch异常

// dva model tagEditModel
*addCategory(action, { call, put, select }) {
      throw new Error('错误测试');
 }

// component

onSubmitCategoryAdd = () => {
    const { onChange, categoryList, tagList, dispatch } = this.props;
    dispatch({
      type: `tagEditModel/addCategory`,
    }).then((category) => {
      console.log('then then');
      onChange([...categoryList, category], tagList);
    }).catch(e => {
      console.error(3333333333, e);
      message.error('请求出错');
    });
  }

** 抛出的错误没有被catch

实际的控制台报错如下

uncaught at _callee3 at _callee3 
 at _callee6 
 at takeEvery(tagEditModel/addCategory, _callee) 
 at _callee 
 at _callee 
 Error: Error: 错误测试
    at addCategory$ (http://localhost:8000/umi.js:93924:21)
    at tryCatch (http://localhost:8000/umi.js:77209:40)
    at Generator.invoke [as _invoke] (http://localhost:8000/umi.js:77435:22)
    at Generator.prototype.(anonymous function) [as next] (http://localhost:8000/umi.js:77261:21)
    at next (http://localhost:8000/umi.js:75226:27)
    at proc (http://localhost:8000/umi.js:75185:3)
    at resolveIterator (http://localhost:8000/umi.js:75371:5)
    at runEffect (http://localhost:8000/umi.js:75347:178)
    at next (http://localhost:8000/umi.js:75230:9)
    at currCb (http://localhost:8000/umi.js:75303:7)
    at http://localhost:8000/umi.js:75414:16
    at exec (http://localhost:8000/umi.js:76081:5)
    at flush (http://localhost:8000/umi.js:76122:5)
    at asap (http://localhost:8000/umi.js:76095:5)
    at Array.<anonymous> (http://localhost:8000/umi.js:74456:27)

Context

• Umi Version: 2.6.1
• Node Version: 11.10.1
• Platform: npm crate umi

[sorrycc]

提供可复现仓库。

[cheerful-li]

提供可复现仓库。

https://github.com/cheerful-li/testUmi

src/pages/Welcome.js

[sorrycc]

参考 https://umijs.org/guide/with-dva.html#configuration-and-plugins 新建 src/app.js，然后配上 onError 就能捕获了。

[sorrycc]

[cheerful-li]

@sorrycc 我之前使用roadhog的时候，也是在组件里面dispatch一个effect, 然后在dispatch返回的promise里面去catch错误，做一些处理啊。 你这种全局捕获错误的方式并不是我想要的。 或者说我没描述清楚，或者说是切换到Umi以后这种方式就不被支持了？

[cheerful-li]

@sorrycc 我找到一个你之前的评论，看能不能描述清楚我的意思

https://github.com/dvajs/dva/issues/1222#issuecomment-329715876

我想要的是 dispatch().catch(err => {});

[cheerful-li]

额 我摸索了一下， 添加app.js确实是黑魔法

// src/app.js
export const dva = {
  config: {
    onError(e) {
      // e.preventDefault();
      console.error(e.message);
    },
  },
};

注释掉 e.preventDefault()就可以在组件里面捕获到错误。 实现dispatch().catch(err => {})

[hnsylitao]

https://github.com/dvajs/dva/issues/1586

可以参考之前我出现的这个问题～

[fallenner]

额 我摸索了一下， 添加app.js确实是黑魔法

// src/app.js
export const dva = {
  config: {
    onError(e) {
      // e.preventDefault();
      console.error(e.message);
    },
  },
};

注释掉 e.preventDefault()就可以在组件里面捕获到错误。 实现dispatch().catch(err => {})

如果注释掉e.preventDefault() 那就需要在每一个effects中捕捉异常，这样很麻烦呢。

[superchow]

额 我摸索了一下， 添加app.js确实是黑魔法

// src/app.js
export const dva = {
  config: {
    onError(e) {
      // e.preventDefault();
      console.error(e.message);
    },
  },
};

注释掉 e.preventDefault()就可以在组件里面捕获到错误。 实现dispatch().catch(err => {})

添加这个文件能否解决 dispatch 无法再次被触发的问题？
我先去试试

[haoyinag]

@superchow @sorrycc 请问最终是怎样解决的，我用的是dva+ant，用trycatch和onError都无法再次触发

[jinboker]

@superchow @sorrycc 请问最终是怎样解决的，我用的是dva+ant，用trycatch和onError都无法再次触发

我刚刚也碰到了这个问题，不过我用的是ant-design-pro那一套，哪怕加上了app.js也是catch不到错误，后面仔细翻了一下，原来是src/utils/request.ts 里面那个errorHandler最后只是 return response;没有直接throw error，改掉就正常了

虽然用的东西不同，但还是希望上述回答能起到作用