fix watch leak on window unload (#3858)

Signed-off-by: Jari Kolehmainen <jari.kolehmainen@gmail.com>

src/renderer/bootstrap.tsx

@@ -29,7 +29,7 @@ import * as ReactRouterDom from "react-router-dom";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsRendererApi from "../extensions/renderer-api";
 import { monaco } from "react-monaco-editor";
-import { render, unmountComponentAtNode } from "react-dom";
+import { render } from "react-dom";
 import { delay } from "../common/utils";
 import { isMac, isDevelopment } from "../common/vars";
 import { ClusterStore } from "../common/cluster-store";
@@ -66,7 +66,7 @@ async function attachChromeDebugger() {
 }
 
 type AppComponent = React.ComponentType & {
-  init?(): Promise<void>;
+  init?(rootElem: HTMLElement): Promise<void>;
 };
 
 export async function bootstrap(App: AppComponent) {
@@ -125,16 +125,8 @@ export async function bootstrap(App: AppComponent) {
 
   // init app's dependencies if any
   if (App.init) {
-    await App.init();
+    await App.init(rootElem);
   }
-  window.addEventListener("message", (ev: MessageEvent) => {
-    if (ev.data === "teardown") {
-      UserStore.getInstance(false)?.unregisterIpcListener();
-      ClusterStore.getInstance(false)?.unregisterIpcListener();
-      unmountComponentAtNode(rootElem);
-      window.location.href = "about:blank";
-    }
-  });
   render(<>
     {isMac && <div id="draggable-top" />}
     {DefaultProps(App)}

src/renderer/components/app.tsx

@@ -73,6 +73,7 @@ import { getHostedClusterId } from "../utils";
 import { ClusterStore } from "../../common/cluster-store";
 import type { ClusterId } from "../../common/cluster-types";
 import { watchHistoryState } from "../remote-helpers/history-updater";
+import { unmountComponentAtNode } from "react-dom";
 
 @observer
 export class App extends React.Component {
@@ -83,7 +84,7 @@ export class App extends React.Component {
     makeObservable(this);
   }
 
-  static async init() {
+  static async init(rootElem: HTMLElement) {
     catalogEntityRegistry.init();
     const frameId = webFrame.routingId;
 
@@ -112,6 +113,20 @@ export class App extends React.Component {
     window.addEventListener("online", () => {
       window.location.reload();
     });
+
+    window.addEventListener("message", (ev: MessageEvent) => {
+      if (ev.data === "teardown") {
+        unmountComponentAtNode(rootElem);
+        window.location.href = "about:blank";
+      }
+    });
+
+    window.onbeforeunload = () => {
+      logger.info(`[APP]: Unload dashboard, clusterId=${App.clusterId}, frameId=${frameId}`);
+
+      unmountComponentAtNode(rootElem);
+    };
+
     whatInput.ask(); // Start to monitor user input device
 
     // Setup hosted cluster context

src/renderer/lens-app.tsx

@@ -37,10 +37,12 @@ import { ipcRenderer } from "electron";
 import { IpcRendererNavigationEvents } from "./navigation/events";
 import { catalogEntityRegistry } from "./api/catalog-entity-registry";
 import { registerKeyboardShortcuts } from "./keyboard-shortcuts";
+import logger from "../common/logger";
+import { unmountComponentAtNode } from "react-dom";
 
 @observer
 export class LensApp extends React.Component {
-  static async init() {
+  static async init(rootElem: HTMLElement) {
     catalogEntityRegistry.init();
     ExtensionLoader.getInstance().loadOnClusterManagerRenderer();
     LensProtocolRouterRenderer.createInstance().init();
@@ -51,6 +53,12 @@ export class LensApp extends React.Component {
 
     registerKeyboardShortcuts();
     registerIpcListeners();
+
+    window.onbeforeunload = () => {
+      logger.info("[App]: Unload app");
+
+      unmountComponentAtNode(rootElem);
+    };
   }
 
   componentDidMount() {