javascript - 哪些类型的 Javascript (Angular2) 错误会阻止页面完成渲染

Question

我是 Angular2 的新手，负责开发“稳健的错误处理”。到目前为止，我已经遵循了添加自定义错误处理的简单示例 (console.logging)。但有时，如果页面由于错误而完全停止加载，我们会希望重定向用户。

但是有时，如下所示，尽管有错误，但页面会完全加载。是否只有某些类型的错误会阻止页面完全加载？ One of the following 6 types perhaps?

Answer 1

任何错误都可能会阻止您的页面呈现，具体取决于它在您的流程中发生的位置。如果在回调或其他异步操作中，任何错误都可能无法捕获。

小心使用诸如“稳健的错误处理”之类的术语 - 我见过大型商业项目声称只是这样，但实际上只是默默地解决了很多问题，有点像 on下一个错误继续。

我发现黄金法则是:

1. 如果您的应用可以继续处理异常(例如从非必要服务获取损坏的 JSON 数据)，则应始终明确处理该特定情况。

2. 否则意外异常应该总是破坏可见的东西。

第二条规则违反直觉，但确实是最佳实践。用户会提示他们看到的错误，可见的异常和崩溃会让他们感到不安，并降低他们对您的应用程序的信心。

但是，他们看不到的异常仍然会发生，并且因为您已经默默地解决了它们，所以导致它们的原因仍然存在。静默异常会导致数据丢失或损坏。它们会导致您在生产 6 个月后才能发现的那种错误。它们会导致您可能会被起诉的错误。

用户会原谅您快速修复的明显错误，如果您丢失数据并且没有立即知道，他们会离开并且永远不会回来。

好吧，综上所述，您似乎突出显示的错误是异步，并且与有时被描述为回调 hell 的问题有关。

在您的屏幕截图中，错误来自 HTTP GET 请求 - 这通常是您发出 AJAX 请求的方法，在成功时触发回调，但没有回调来处理异常。

Angular2 使用 promises，这是您屏幕截图的下一个错误行。 Promises 包装这些回调并允许您链接它们 - 它们确实有助于回调 hell ，但它们不是 Elixir :您必须确保每个 .then() 有错误处理程序或以下 .catch()。

但是，还有更好的方法:在 Angular2 中，您可以使用 TypeScript，这意味着您可以使用 async 和 await。这些是 promises 的语法糖，但它们也可以与 try-catch 一起使用，使异步异常的错误处理更加容易。

我已经 blogged about that in a lot more detail than I can fit here .

TL;DR: 在 Angular2 中使用 async/await(如果需要，使用 TS 转译)确保你的 Promise 和回调异常使其备份，然后处理您期望/可以解决的问题，并明显地因您不能解决的问题而崩溃。