React，Vue，Angular等，如何在整个应用程序中处理错误？

Question

假设我有应用程序（不管前端有什么）。

后端只是API。

有很多页面/表格。 每个页面/表单都需要与API进行一些交互。

可能会出现许多错误：

 1. User is disconnected from network
 2. User is not authenticated 
 3. API for some reason returns unexpected 500 code

在每种形式和每页中对这些错误进行代码处理都是很糟糕的（因为我们要通知用户出了点问题），因此必须在一个地方完成。

例如，在Vue中，我可以设置http拦截器，它可以吞下断开的网络错误和500个错误，并向用户显示信息。

但是有些事情可能是不好的，例如Web应用程序每N秒检查一次API，因此每N秒它将显示错误（如果网络断开连接）。

在哪里可以阅读有关删除此类重复代码的Web应用程序体系结构的信息？

另一件事，向用户显示应用正在处理其请求

据我所知，在React中，我可以使用以下方法来存储Redux

{
    "loading": false
}

然后，每个页面/表单都会分派动作，这使loading = true，在完成请求后，设置loading = false，因此在某些顶级组件中，我可以显示loading spinner。

在哪里可以读到这种情况？

PS问题，正如我认为的那样，主要是关于中央状态对象（例如Redux中的对象）。 那么，在一个地方处理前端错误的最佳解决方案是什么？ 可能会有一些关于设计应用程序状态的好文章？

Answer 1

您的问题范围很广，并且确实取决于您的应用程序和框架，但是我将尝试指出一些常见的用例：

1. 每个框架都有拦截器概念（Vue，Angular，React），按照您的建议使用它们是很好的
2. 关于您提到的情况，该应用程序ping API并通知用户很多时间-您可以使用showedMessage类的布尔值轻松获取它，如果为false，则将其设置为true并在下一次向用户显示消息网络恢复正常，您将其恢复为假。 这样，您只显示一次网络中断消息。
3. Redux不是React独有的，并且有angular（ ngrx ）和Vue（ vuex ）的实现，它们都在处理所有组件共享的一个主要状态对象的相同概念上工作。 到目前为止，这是推荐的方法。 另一个选择是mobx ，但是它不太常见，我认为只有react可以实现。
4. 另一种方法是使用自定义事件，但我只建议事件类型不超过5种的小型应用程序使用它，否则您将很快失去对真实情况的跟踪。