在 Angular 应用程序中捕获网络::ERR_NETWORK_CHANGED

Question

我们有一个 Angular4 应用程序，有时在 Chrome 中我们会收到错误消息

净 :: ERR_NETWORK_CHANGED

加载资源（图像等）时。这通常发生在客户端/Chrome 的 IP 更改时。

有谁知道如何在 Angular 中捕获这个错误？

Answer 1

此问题的一个可能的解决方法是创建一个永无止境的请求，例如 SSE 请求。然后检测错误（如果您确实需要全局侦听器）。

仅当您想要在发生网络错误时重新加载页面时，此示例才真正有用。似乎没有可用于此类错误的全局错误侦听器，但您也可以将其应用于对服务器的特定短请求（例如加载图像）。只需根据您的特定（而不是全局）请求注册一个错误处理程序。

JavaScript SSE 示例

在这种情况下，重新加载页面就足够了。net :: ERR_NETWORK_CHANGED当我打开或关闭 VPN 连接时，会出现此错误。我只想此后重新加载页面。

var source = new EventSource("YOUR_SSE_ENDPOINT");
source.onmessage = function(event) {};
source.onerror = function() { 
    source.close();
    console.log("Reload the page after 10 seconds because of network error");
    setTimeout(function(){ 
        location.reload();
    }, 10*1000);
};

HTML5 / Javascript 图像示例

正如我所说，它也可以处理其他特定请求，例如图像：

<img src="image_link_where_network_changed_error_occurs" onerror="location.reload()">

您应该意识到它不会过滤发生的错误类型，因此当您的图像 url 给出 404 错误时，它会重新加载页面。这可能不是你想要的。

尝试重新加载图像

另一个用例是尝试重新加载图像 5 次。同时网络可以恢复并加载图像，否则（或图像返回404）它将在5次后停止。

<script>
function reloadImage(image) {
    if (!image.hasOwnProperty('counter')){
      image.counter = 0;
    }
    
    if (image.counter < 5){
      setTimeout(function (){
          image.src += '?' + +Math.random();
          image.counter += 1;
      }, 1000);
    }
  }
</script>

<img src="image_link_where_network_changed_error_occurs" onerror="reloadImage(this)">