reactjs中的一般400/500错误处理

Question

我一直在构建一个react网站，在创建错误页面404、500时可能需要支持，但我不确定如何实现这一点——因为我有很多api服务/操作——如果任何或所有服务中发生错误，该如何调用错误处理程序？

我看到了这个关于处理细粒度错误页面的链接-https://code-maze.com/react-net-core-error-handling/

如果路由无法与其他页面一起工作，我现有的错误页面只有404，所以它是路由的底部。

所以我做了两页

import NotFound from './components/ErrorPages/NotFound/NotFound';
import InternalServer from './components/ErrorPages/InternalServer/InternalServer';

在路线的底部

        <Route exact path="/" render={() => (<Home/>)} />
        
        <Route path="/500" component={InternalServer} />
        <Route path="*" component={NotFound} />
      </Switch>

//行动

export const HTTP_404_ERROR = 'HTTP_404_ERROR';
export const HTTP_500_ERROR = 'HTTP_500_ERROR';
export const HTTP_OTHER_ERROR = 'HTTP_OTHER_ERROR';

const execute404Handler = (props) => {
    return {
        type: HTTP_404_ERROR,
        props: props
    }
}
const execute500Handler = (props) => {
    return {
        type: HTTP_500_ERROR,
        props: props
    }
}
const executeOtherErrorHandler = (error) => {
    return {
        type: HTTP_OTHER_ERROR,
        error: error
    }
}
export const handleHTTPError = (error, props) => {
    if (error.response.status === 404) {
        return execute404Handler(props);
    }
    else if (error.response.status === 500) {
        return execute500Handler(props);
    }
    else {
        return executeOtherErrorHandler(error);
    }
}

//减速器

import { HTTP_404_ERROR, HTTP_500_ERROR, HTTP_OTHER_ERROR } from '../actions/errorHandlerActions';
const initialState = {
    data: "",
    showErrorModal: false,
    errorMessage: ""
}
const execute404 = (state, action) => {
    action.props.history.push('/404');
    return { ...state, isError: true };
}
const execute500 = (state, action) => {
    action.props.history.push('/500');
    return { ...state, isError: true };
}
const executeOtherError = (state, action) => {
    return {
        ...state,
        showErrorModal: true,
        errorMessage: action.error.response.data
    };
}
export function errorHandlerReducer (state = initialState, {type, payload} = {}) {
  switch (type) {
    case HTTP_404_ERROR:
        return execute404(state, payload);
    case HTTP_500_ERROR:
        return execute500(state, payload);
    case HTTP_OTHER_ERROR:
        return executeOtherError(state, payload);      
    default:
      return {...state} 
  }
}

---

Answer 1

坦率地说，您在应用程序中引入了许多不必要的复杂性，这只会降低DX和UX。在React中处理数据获取/API错误时，应努力防止中断错误击中客户端。出于同样的原因，您永远不应该故意将客户端推到500页，而是优雅地处理错误并显示消息。

在最低级别，您应该将所有异步请求封装在try-catch或Promise.catch((中，以防止请求错误破坏客户端。在catch中，您可以通过错误的状态代码优雅地处理错误。

try {
  await fetchData();
} catch (error) {
 if(error.response.status === 500) {//check the library you use to fetch data for how they responds with error statuses
    ...do something graceful like show a message or call your reducer
 }
}

您应该使用的另一个断路器是错误边界，以防止错误完全破坏客户端。您可以在主组件中声明一次，它可以在整个应用程序中使用，以提供一种备份方法来优雅地捕捉和显示错误。

最后，您唯一不会处理的错误是React之外的硬错误，这些错误或您的代码无论如何都不会到达。

如果你完成了以上操作，你就不需要上面的任何代码——只需要捕捉错误并将失败点包裹在错误边界中。

您将处理404个错误，但是，您正在使用的路由框架建议您这样做。例如，在React Router v5中，您可以在我们的路由(<Route path=*">(的末尾放置一个捕获所有不匹配的路由(404(，或者按照路由框架的建议将用户推到404页面(router.push('/404')(。