Teardown watcher when out of focus (#4979)

web-common/src/features/entity-management/ResourceWatcher.svelte

@@ -24,8 +24,8 @@
     void fileArtifacts.init(queryClient, instanceId);
 
     return () => {
-      fileWatcher.cancel();
-      resourceWatcher.cancel();
+      fileWatcher.close();
+      resourceWatcher.close();
       stopJavascriptErrorListeners?.();
     };
   });

web-common/src/runtime-client/watch-request-client.ts

@@ -47,6 +47,7 @@ export class WatchRequestClient<Res extends WatchResponse> {
     ["response", []],
     ["reconnect", []],
   ]);
+  private closed = false;
 
   public on<K extends keyof EventMap<Res>>(
     event: K,
@@ -61,18 +62,19 @@ export class WatchRequestClient<Res extends WatchResponse> {
     this.listen().catch(console.error);
   }
 
-  public cancel() {
-    this.controller?.abort();
-    this.stream = this.controller = undefined;
+  public close() {
+    this.closed = true;
+    this.cancel();
   }
 
   public throttle() {
     this.outOfFocusThrottler.throttle(() => {
-      this.cancel();
+      this.close();
     });
   }
 
   public async reconnect() {
+    this.closed = true;
     clearTimeout(this.reconnectTimeout);
 
     if (this.outOfFocusThrottler.isThrottling()) {
@@ -94,6 +96,11 @@ export class WatchRequestClient<Res extends WatchResponse> {
     this.listen(true).catch(console.error);
   }
 
+  private cancel() {
+    this.controller?.abort();
+    this.stream = this.controller = undefined;
+  }
+
   private async listen(reconnect = false) {
     clearTimeout(this.reconnectTimeout);
 
@@ -124,6 +131,7 @@ export class WatchRequestClient<Res extends WatchResponse> {
       clearTimeout(this.retryTimeout);
 
       if (this.controller) this.cancel();
+      if (this.closed) return;
       this.reconnect().catch((e) => {
         throw new Error(e);
       });