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

我正在构建React应用程序（使用、和），并且 我需要建议如何安排我的项目显示用户友好的错误消息

（由我决定向用户显示什么以及如何显示）

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

我应该根据状态代码显示消息吗

我是否应该将错误分解为客户端/服务器/其他错误，这有什么好处？（基于来自Axios的）

我应该将错误消息保存在组件本身的配置文件中的什么位置（我想看看这样一个文件的示例）

我的redux状态树会是什么样子

我是否应该根据状态代码为每个错误分派操作

如果有任何建议或真实的例子，我将不胜感激

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

---

这基本上取决于您试图显示消息的方法，例如，在我们自己的项目中，如果请求过程中出现任何错误，我们将使用全局快餐店组件来显示错误

大多数情况下，用户不关心状态代码，如果您不想非常具体，那么您可以显示一个简单的警报/快餐店，例如：“对不起，发生了一些错误”

如果您确定您确实需要向用户显示特定的错误，我绝对推荐一个用于存储所有错误消息的常量文件，您可以将它们保存在store文件夹中的constants目录中，甚至可以保存在/helpers中，这取决于您的选择

是的，您可以根据错误是在服务器端还是客户端来划分错误

如果不管理树中的错误，我认为redux树不会改变。如果你想的话，一定要在树顶上放一个快餐店/警报减速机

您可能不希望在每个不同的组件中为状态代码显示相同的错误，否则，如果您愿意，您可以使用它，但这会在您的请求中添加大量不必要的代码

对于我们的项目，因为我们使用i18进行国际化，所以我们有一个快餐店缩减器和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错误响应的正文，并避免仅使用HTTP状态代码。然后，它可能包含一个映射到前端消息的错误“代码”，以及字段名，该字段名对于在表单的正确位置显示错误非常有用，等等。或者，整个消息可能来自be，FE只需显示它。我在使用这两种方法的企业级代码库上工作

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

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

4） 同样，这取决于您的实现——在某种程度上取决于您。一些表单包将在redux中为您处理此问题。其他人只使用本地状态，而不使用redux

5） 是的，这样做是有道理的。同样，如果您查看API调用主体中返回的自定义错误代码，这将为您提供更大的灵活性

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

---

如果您还没有REST API/REST API的最佳实践，也可以查看一下：

3。是的，您完全可以根据错误是在服务器端还是客户端来划分错误。-你能描述一下它为什么有用吗？我会根据是客户端还是服务器错误显示不同的消息吗？也许你可以举个例子。谢谢，我不必相信它对任何目的都有用。顺便说一句，要在客户端/服务器上划分错误，您应该更新API以返回特定的错误响应和错误描述（对于服务器上可能发生的每个错误），对于客户端，因为您在react上，如果可能有意外错误，我建议您查看错误边界，到目前为止，我还没有一个例子。（这里的“错误”并不是指由于输入验证而导致的错误）

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

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
}