在 React-Redux 应用程序中显示和管理错误消息的最佳实践答案

【问题标题】：Best practices for displaying and managing error messages in React-Redux app在 React-Redux 应用程序中显示和管理错误消息的最佳实践
【发布时间】：2020-04-15 09:16:44
【问题描述】：

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

（由我决定向用户显示的内容和方式）

特别想得到以下问题的答案：

我应该根据状态码显示消息吗？
我应该将错误分解为客户端/服务器/其他错误，这样做有什么好处？（基于来自 Axios 的 example）
我应该在哪里保存错误消息，在组件本身的配置文件中（我想看一个这样的文件的例子）？
我的 redux 状态树看起来如何？
我是否应该根据状态代码为每个错误分派一个操作？

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

以下是我们后端的一些错误响应示例：

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

【问题讨论】：

标签： reactjs redux error-handling axios redux-saga

【解决方案1】：

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

大多数时候用户并不关心状态码，如果你不想非常具体，那么你可以显示一个简单的警报/小吃栏，例如：“对不起，发生了一些错误”。
如果您确定确实需要向用户显示特定错误，我绝对推荐使用常量文件来存储您的所有错误消息，您可以将它们保存在 store 文件夹中的常量目录中甚至可能在 /helpers 中，这取决于您的选择。
是的，您绝对可以根据错误是在服务器端还是客户端来划分错误。
如果您不管理树中的错误，我认为 redux 树不会改变。如果你愿意，一定要在树顶使用小吃店/警报减速器
您可能不想在每个不同的组件中为状态代码显示相同的错误，否则，如果您愿意，您可以使用它，但这会在您的请求中添加很多不必要的代码。

对于我们的项目，由于我们使用 i18 进行国际化，我们有一个小吃店减速器和动作文件夹，我们在我们的 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
}

我的实现背后的一些基本代码。

【讨论】：

3.是的，您绝对可以根据错误是在服务器还是客户端来划分错误。 - 你能描述一下它为什么有用吗，我会根据它是客户端还是服务器错误显示不同的消息吗？也许你可以举个例子。谢谢
我不必相信它对任何目的都有用。顺便说一句，要在客户端/服务器的基础上划分错误，您应该更新您的 API 以返回带有错误描述的特定错误响应（对于服务器上可能发生的每个错误），因为您正在响应客户端，如果您可能遇到意外错误，我建议您查看错误边界，目前我没有示例。 reactjs.org/docs/error-boundaries.html（这里的错误我不是在谈论由于输入验证引起的错误）

【解决方案2】：

1) 假设您也在执行 BE 或可以要求某人调整响应 - 最好返回带有 API 错误响应的正文，并避免仅使用 HTTP 状态代码 - 如果可能的话。然后，它可能包含映射到前端消息的错误“代码”，以及有助于在表单的正确位置显示错误的字段名称等。或者，整个消息可能来自BE 和 FE 只是显示它。我在使用这两种方法的企业级代码库上工作。

2) 关于错误消息，我总是将它们存储在一个公共文件中，但除此之外，真的取决于你。这有点取决于你如何实现#1。就我个人而言，我喜欢存储在枚举文件中的错误“代码”，它对应于一条消息，因为您可以从中执行其他逻辑（例如，如果触发错误 X，则不显示表单的其余部分，使用自定义消息一种情况下的错误代码或回退到默认值

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

4) 再次取决于您的实施 - 取决于您。一些表单包会在 redux 中为你处理这个问题。其他人只会使用本地状态而不是 redux。

5) 会有意义，是的。同样，如果您查看 API 调用正文中返回的自定义错误代码，这将为您提供更大的灵活性。

我希望这能给你一些想法，基于我的经验，而不是任何固定的思维方式。

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

【讨论】：