React前端与.NET/C#后端的异常处理方案咨询

后端（.NET/C#）错误处理优化 #

直接抛出Exception会让ASP.NET默认返回500内部服务器错误，且不会把自定义错误消息返回给前端，需要调整为返回明确的HTTP状态码和错误信息，有两种常用方式：

方式1：直接返回IActionResult（推荐） #

把方法返回类型从int改为IActionResult，主动校验参数并返回对应响应：

[HttpGet("calculator/calculate")]
public IActionResult Calculate(int input)
{
    if (input < 0)
    {
        // 返回400 Bad Request，携带自定义错误信息
        return BadRequest("Negative numbers are not allowed");
    }
    
    int[] res = new int[input];
    // 执行你的计算逻辑
    return Ok(res[input]); // 注：这里input作为数组索引时，若input为0会触发索引越界，需额外处理
}

方式2：全局异常捕获 #

如果需要统一处理所有异常，可以自定义异常过滤器，将异常转换为HTTP响应：

public class CustomExceptionFilter : IExceptionFilter
{
    public void OnException(ExceptionContext context)
    {
        // 可根据异常类型区分处理，比如自定义InvalidInputException
        var errorMsg = context.Exception.Message;
        context.Result = new BadRequestObjectResult(errorMsg);
        context.HttpContext.Response.StatusCode = (int)System.Net.HttpStatusCode.BadRequest;
        context.ExceptionHandled = true;
    }
}

然后在Program.cs全局注册过滤器：

builder.Services.AddControllers(options =>
{
    options.Filters.Add<CustomExceptionFilter>();
});

前端（React）错误处理修正 #

现有代码存在两个问题：onClick中的同步try/catch无法捕获异步Promise的错误；未解析后端返回的具体错误信息，需要调整：

修正请求方法，解析后端错误信息 #

const requestCalculation = {
    calculate: (number) => {
        const url = `/calculator/calculate?input=${number}`;
        return fetch(url)
            .then(response => {
                if (response.ok) {
                    return response.text();
                }
                // 解析后端返回的错误消息并抛出
                return response.text().then(errorMsg => {
                    throw new Error(errorMsg || '请求失败');
                });
            })
            .catch(error => {
                console.error(error);
                throw error; // 向上抛出，让调用方处理
            });
    },
};

修正按钮点击事件，正确捕获异步错误 #

使用async/await配合try/catch处理异步操作的错误：

return <button onClick={async () => {
    try {
        const result = await requestCalculation.calculate(-1);
        console.log('计算结果:', result);
        // 处理成功逻辑
    } catch (error) {
        console.error('错误:', error.message);
        // 这里可以给用户显示错误提示，比如弹出Toast
    }
}}>Click</button>

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