JavaScript错误处理权威指南 _生活知道

作者｜Lukas Gisder-Dubé
译者｜谢丽
向用户显示错误
下一个也是最后一个步骤是管理前端的错误。这里，你要使用第一部分描述的工具处理由前端逻辑产生的错误。不过，后端的错误也要显示。首先，让我们看看如何显示错误。如前所述，我们将使用 React 进行演练。
把错误保存在 React 状态中
和其他数据一样，错误和错误消息会变化，因此，你想把它们放在组件状态中。在默认情况下，你想要在加载时重置错误，以便用户第一次看到页面时，不会看到错误。
接下来我们必须澄清的是不同错误类型及与其匹配的可视化表示。就像在后端一样，有 3 种类型：

全局错误，例如，其中一个常见的错误是来自后端，或者用户没有登录等。

来自后端的具体错误，例如，用户向后端发送登录凭证。后端答复密码不匹配。前端无法进行此项验证，所以这样的信息只能来自后端。

由前端导致的具体错误，例如，电子邮件输入验证失败。

2 和 3 非常类似，虽然源头不一样，但如果你愿意，就可以在同样的 state 中处理。我们将从代码中看下如何实现。
我将使用 React 的原生 state 实现，但是，你还可以使用类似 MobX 或 Redux 这样的状态管理系统。
全局错误
通常，我将把这些错误保存在最外层的有状态组件中，并渲染一个静态 UI 元素，这可能是屏幕顶部的一个红色横幅、模态或其他什么东西，设计实现由你决定。
让我们看下代码：
正如你看到的那样，Application.js 中的状态存在错误。我们也有方法可以重置并改变错误的值。我们把值和重置方法传递给 GlobalError 组件，在点击\’x\’时，该组件会显示错误并重置它。让我们看看 GlobalError 组件：
你可以看到，在第 5 行，如果没有错误，我们就不做任何渲染。这可以防止我们的页面上出现一个空的红框。当然，你可以改变这个组件的外观和行为。例如，你可以将“x”替换为 Timeout，几秒钟后重置错误状态。
现在，你已经准备好在任何地方使用全局错误状态了，只是从 Application.js 把 _setError 向下传递，而且，你可以设置全局错误，例如，当一个请求从后端返回了字段 error: \’GENERIC\’ 。例如：
如果你比较懒，到这里就可以结束了。即使你有具体的错误，你总是可以改变全局错误状态，并把错误提示框显示在页面顶部。不过，我将向你展示如何处理和显示具体的错误。为什么？首先，这是关于错误处理的权威指南，所以我不能停在这里。其次，如果你只是把所有的错误都作为全局错误来显示，那么体验人员会疯掉。
处理具体的请求错误
和全局错误类似，我们也有位于其他组件内部的局部错误状态，过程相同：
有件事要记住，清除错误通常有一个不同的触发器。用\’ x \’删除错误是没有意义的。关于这一点，在发出新请求时清除错误会更有意义。你还可以在用户进行更改时清除错误，例如当修改输入值时。
源于前端的错误
如前所述，这些错误可以使用与处理后端具体错误相同的方式（状态）进行处理。这次，我们将使用一个有输入字段的示例，只允许用户在实际提供以下输入时删除一个城市：
使用错误代码实现错误国际化
也许你一直想知道为什么我们有这些错误代码，例如 GENERIC，我们只是显示从后端传递过来的错误描述。现在，随着你的应用越来越大，你就会希望征服新的市场，并在某个时候面临多种语言支持的问题。如果你到了这个时候，你就可以使用前面提到的错误代码使用用户的语言来显示恰当的描述。
我希望你对如何处理错误有了一些了解。忘掉 console.error(err)，它现在已经是过去时了。可以使用它进行调试，但它不应该出现在最终的产品构建中。为了防止这种情况，我建议你使用日志库，我过去一直使用 loglevel，我对它非常满意。
英文原文
https://levelup.gitconnected.com/the-definite-guide-to-handling-errors-gracefully-in-javascript-58424d9c60e6
【JavaScript错误处理权威指南】以上就是朝夕生活（www.30zx.com）关于“JavaScript错误处理权威指南”的详细内容，希望对大家有所帮助！

JavaScript错误处理权威指南

猜你喜欢