如何在React.js端获取.NET接口catch捕获的错误详情

你遇到的类型冲突问题可以通过将接口返回值改为 IActionResult（.NET Core）/ IHttpActionResult（.NET Framework）解决，它支持同时包装正常返回值和错误响应，无需修改原有接口契约。
原来抛出FaultException的逻辑会被.NET默认转为500错误，且不会输出自定义错误内容，你可以将业务异常改为返回400状态码+自定义错误对象，系统异常保持500即可：

[HttpPost]
public IActionResult CalculateDepositAmount([FromBody] DepositAmountParameters depositAmountParameters)
{
    ConcreteApplication application = depositAmountParameters.application;
    int multiplier = depositAmountParameters.multiplier;
    bool forceCalculation = depositAmountParameters.forceCalculation;
    long registryInfoOid = depositAmountParameters.registryInfoOid;
    long subscriberRegistryOid = depositAmountParameters.subscriberRegistryOid;

    try
    {
        Com.BS.WaterSupplyAndSeverage.Services.WaterSupplyAndSewerage wssService = new Com.BS.WaterSupplyAndSeverage.Services.WaterSupplyAndSewerage();
        var result = wssService.CalculateDepositAmount(application, multiplier, forceCalculation, registryInfoOid, subscriberRegistryOid);
        // 正常结果用200状态码返回
        return Ok(result);
    }
    catch (BSException e)
    {
        FileLogger.Error(CLASS_NAME, "CalculateDepositAmount", e.Message, e.StackTrace, application, multiplier, forceCalculation);
        BSCommunicationException commException = new BSCommunicationException();
        commException.Id = e.Id;
        commException.ExceptionMessage = e.ExceptionMessage;
        // 业务校验异常用400状态码返回，错误对象直接放进响应体
        return BadRequest(commException);
    }
    catch (Exception e)
    {
        FileLogger.Error(CLASS_NAME, "CalculateDepositAmount", e.Message, e.StackTrace, application, multiplier, forceCalculation);
        BSCommunicationException commException = PrepareCommunicationException(e);
        // 系统异常返回500，可根据需求调整是否返回详细错误
        return StatusCode(500, commException);
    }
}

你原来的catch回调没有接收错误参数，因此拿不到后端返回的错误内容。axios返回的错误对象中response字段包含了完整的响应状态、响应体信息：

export const CalculateDepositAmount = (APPLICATION,MULTIPLIER,FORCE_CALCULATION,REGISTRY_INFO_OID, SUBSCRIBER_REGISTRY_OID, SuccessOperation, FailedOperation) => {
  return () => {
    const body = { application:APPLICATION,multiplier:MULTIPLIER,forceCalculation:FORCE_CALCULATION,registryInfoOid:REGISTRY_INFO_OID, subscriberRegistryOid:SUBSCRIBER_REGISTRY_OID};
    console.log("bodyFormData",body)
    axios.post('https://localhost:44396/api/CalculateDepositAmount', body)
      .then(response => {
        SuccessOperation({ CALCULATED_DEPOSIT_AMOUNT_DATA: response.data });
      })
      .catch(error => {
        // 存在响应说明请求已经到达后端，是后端返回的错误
        if (error.response) {
          const { status, data } = error.response;
          if (status === 400) {
            // 400状态码对应业务异常，data就是你定义的BSCommunicationException对象
            FailedOperation({ 
              CALCULATED_DEPOSIT_AMOUNT_DATA: null,
              errorCode: data.Id,
              errorMsg: data.ExceptionMessage
            });
          } else if (status === 500) {
            // 500是系统异常
            FailedOperation({ 
              CALCULATED_DEPOSIT_AMOUNT_DATA: null,
              errorMsg: "服务内部错误，请稍后重试"
            });
          }
        } else {
          // 网络错误、请求超时等前端侧异常
          FailedOperation({ 
            CALCULATED_DEPOSIT_AMOUNT_DATA: null,
            errorMsg: "网络请求失败，请检查网络连接"
          });
        }
      });
  }
}

• 如果你的项目配置了全局异常处理滤镜，需要确保不会拦截覆盖上面返回的400/500响应内容
• 生产环境可以根据需求决定是否要把系统异常的详细信息返回给前端，避免泄露服务端敏感信息

内容的提问来源于stack exchange，提问作者Veysel Turan