为啥 axios .catch() 在 redux 中间件中捕获 javascript 错误？

Posted 2023-02-22

【中文标题】为啥 axios .catch() 在 redux 中间件中捕获 javascript 错误？

【英文标题】：Why axios .catch() catch javascript error in redux middleware?为什么 axios .catch() 在 redux 中间件中捕获 javascript 错误？

【发布时间】：2017-06-25 21:55:54

【问题描述】：

我在 react redux 应用程序中使用 axios 作为我的 ajax 请求客户端。

为了处理异步操作，我使用中间件：

识别承诺对象 如果成功则使用then() 解决承诺，如果失败则使用catch() 已解决的承诺将调度与其对应的操作 成功/失败动作。例如， GET_TRANSACTIONS 将调度 GET_TRANSACTIONS_SUCCESS 或 GET_TRANSACTIONS_FAIL

问题是，每次应用程序遇到错误（如undefined的访问属性）时，它都会触发异步操作中间件中的catch()处理程序并调度失败操作，这与此无关。

结果，javascript 错误没有显示在控制台中，所以我不知道应用程序实际发生了什么。

分派的失败动作的有效负载只是一个空对象。 （应该是undefined的访问属性）

如何确保.catch() 只处理promise 错误，而不处理javascript 错误？

clientMiddleware.js

export const clientMiddleware = (client) => 
  return ( dispatch, getState ) => 
    return next => action => 
      if (typeof action === 'function') 
        return action(dispatch, getState)
      

      const  promise, types, ...rest  = action

      if (!promise) 
        return next(action)
      

      const [REQUEST, SUCCESS, FAILURE] = types
      next( ...rest, type: REQUEST )

      const actionPromise = promise(client)

      actionPromise
        .then((res) => next( ...rest, payload: res, type: SUCCESS ))
        .catch((err) => next( ...rest, payload: err, type: FAILURE ))

      return actionPromise
    
  

【问题讨论】：

你用的是什么中间件？

我使用自己的中间件（在问题中添加了代码）@AlessanderFrança

【参考方案1】：

如何确保 .catch() 只处理 promise 错误，而不是 javascript 错误？

AFAIK 没有。我们在应用程序中遇到了同样的问题。错误有点被吞没。出于调试目的，我们使用如下内容：

Promise.prototype.nativeCatch = Promise.prototype.catch;
Promise.prototype.catch = function(handler) 
    return this.nativeCatch(function(error) 
        try 
            console.error(error.stack);
        
        catch(error) 

        
        handler(error);
    );
;

【讨论】：

我明白了...是否可以添加另一个中间件来捕获任何 javascript 错误？如果可能，我宁愿不更改本机代码。