在React-Redux应用程序中显示和管理错误消息的最佳做法

Question

我正在构建一个React应用（带有react-redux，redux-saga和axios），并且我需要有关如何安排项目以显示用户友好错误消息的建议。

由我决定要显示给用户的内容。

特别是，我想获得以下问题的答案：

1. 我应该根据状态代码显示消息吗？
2. 我应该在哪里将错误消息保留在组件本身的配置文件中（我想查看此类文件的示例）？
3. 我应该细分客户端/服务器/其他错误，为什么？ （基于Axios的example）
4. 我的redux状态树看起来如何？
5. 我是否应该根据状态码为每个错误调度一个动作？

我将不胜感激任何建议或实际示例。

以下是来自后端的错误响应的一些示例：

Request URL: https://example.com/api/call/123
Request Method: POST
Status Code: 400 Bad Request

Request URL: https://example.com/api/call/123
Request Method: PUT
Status Code: 409 Conflict

Request URL: https://example.com/api/user/me/
Request Method: GET
Status Code: 401 Unauthorized

Answer 1

这基本上取决于您尝试显示消息的方法，例如，在我们自己的项目中，我们正在使用全局小吃栏组件来显示错误（如果在请求期间发生任何错误。

1. 大多数时候用户不关心状态码，如果您不想太具体，则可以显示一个简单的警报/小吃栏，例如：“抱歉，发生了一些错误”。

   ] >

2. 如果您确定确实需要向用户显示特定的错误，我绝对建议您为错误提供一个常量文件，该错误文件将存储所有错误消息。在/ helpers中，这取决于您的选择。

3. 是的，您绝对可以根据错误是在服务器上还是在客户端上来划分错误。

4. 如果您不在树中管理错误，我认为redux树不会改变。如果需要，请绝对在树的顶部使用小吃店/提醒减速器]]

5. 您可能不希望在每个不同组件中为状态代码显示相同的错误，否则，如果愿意，可以使用它，但是那样会在请求中添加很多不必要的代码。

   ] >

对于我们的项目，由于我们正在使用i18进行国际化，所以我们有一个小吃店减速器和action文件夹，我们将小吃店action导入了我们的sagas中，只显示了一条简单的错误消息（您绝对可以根据需要对其进行自定义因此，就这样，保持简单。

yield put(Actions.apiRequest);
try {
  const res = yield axios.put('/todo/', updateData);
  if (res.data.status === 'success') {
    yield put(Actions.fetchTodos(todoID));
    yield put(snackbarSuccess('Todo Saved Successfully !'));
  } else {
    throw new Error();
  }
} catch (error) {
  yield put(Actions.apiError);
  yield put(snackbarError(REQUEST_FAIL)); // an imported constant
}
我的实现背后的一些基本代码。

1. 假设您也正在执行BE，或者可以要求某人调整响应-最好返回一个包含API错误响应的主体，并尽可能避免使用状态码-如果可能的话。这可能包含错误“代码”（映射到您的前端消息）以及字段名称，这对于在表单等正确的位置上显示错误非常有帮助。因为404之类的内容可能是错误，或者它们只是指示性的（例如404-例如，注册时用户名不存在，因此允许用户使用该用户名）

或者，整个消息可能来自BE，而FE仅显示它。我致力于使用这两种方法的企业级代码库。

1. 关于错误消息，这实际上取决于您。这取决于您如何实现＃1。我个人喜欢存储在枚举文件中的错误“代码”方法，因为您可以从中进行其他逻辑处理（例如，如果触发了错误X，则不显示表单的其余部分。

不确定-如果您想记录服务器端错误但显示客户端，我想您应该这样做。在我工作的地方，我们纯粹针对我认为的不同日志类别进行区分。

再次取决于您的实现-取决于您。一些表单程序包将在redux中为您处理。其他人将只使用本地状态，而不使用redux。

是的，是的。同样，如果您在API调用的主体中查找返回的自定义错误代码，则会为您提供更大的灵活性。

我希望能根据我的经验而不是任何固定的思维方式为您提供一些想法。

也请查看https://reactjs.org/docs/error-boundaries.html，如果您还没有REST APIS / REST API最佳实践：https://blog.restcase.com/rest-api-error-codes-101/

Answer 2

1. 假设您也正在执行BE，或者可以要求某人调整响应-最好返回一个包含API错误响应的主体，并尽可能避免使用状态码-如果可能的话。这可能包含错误“代码”（映射到您的前端消息）以及字段名称，这对于在表单等正确的位置上显示错误非常有帮助。因为404之类的内容可能是错误，或者它们只是指示性的（例如404-例如，注册时用户名不存在，因此允许用户使用该用户名）