Fix error throwing sometimes during Terminal.detach

Signed-off-by: Sebastian Malton <sebastian@malton.name>

src/main/lens-proxy.ts

@@ -80,7 +80,7 @@ export class LensProxy extends Singleton {
         const cluster = getClusterForRequest(req);
 
         if (!cluster) {
-          return void logger.error(`[LENS-PROXY]: Could not find cluster for upgrade request`);
+          return void logger.error(`[LENS-PROXY]: Could not find cluster for upgrade request from url=${req.url}`);
         }
 
         const reqHandler = isInternal ? shellApiRequest : kubeApiRequest;

src/renderer/api/websocket-api.ts

@@ -37,11 +37,11 @@ interface IMessage {
 }
 
 export enum WebSocketApiState {
-  PENDING = -1,
+  PENDING = "pending",
-  OPEN,
+  OPEN = "open",
-  CONNECTING,
+  CONNECTING = "connecting",
-  RECONNECTING,
+  RECONNECTING = "reconnecting",
-  CLOSED,
+  CLOSED = "closed",
 }
 
 export class WebSocketApi {

src/renderer/components/dock/terminal-window.tsx

@@ -53,7 +53,7 @@ export class TerminalWindow extends React.Component<Props> {
   }
 
   activate(tabId: TabId) {
-    if (this.terminal) this.terminal.detach(); // detach previous
+    this.terminal?.detach(); // detach previous
     this.terminal = TerminalStore.getInstance().getTerminal(tabId);
     this.terminal.attachTo(this.elem);
   }

src/renderer/components/dock/terminal.ts

@@ -26,16 +26,15 @@ import { FitAddon } from "xterm-addon-fit";
 import { dockStore, TabId } from "./dock.store";
 import type { TerminalApi } from "../../api/terminal-api";
 import { ThemeStore } from "../../theme.store";
-import { boundMethod } from "../../utils";
+import { boundMethod, disposer } from "../../utils";
 import { isMac } from "../../../common/vars";
 import { camelCase } from "lodash";
 import { UserStore } from "../../../common/user-store";
 import { clipboard } from "electron";
+import logger from "../../../common/logger";
 
 export class Terminal {
-  static spawningPool: HTMLElement;
+  public static readonly spawningPool = (() => {
-
-  static init() {
     // terminal element must be in DOM before attaching via xterm.open(elem)
     // https://xtermjs.org/docs/api/terminal/classes/terminal/#open
     const pool = document.createElement("div");
@@ -43,8 +42,9 @@ export class Terminal {
     pool.className = "terminal-init";
     pool.style.cssText = "position: absolute; top: 0; left: 0; height: 0; visibility: hidden; overflow: hidden";
     document.body.appendChild(pool);
-    Terminal.spawningPool = pool;
+
-  }
+    return pool;
+  })();
 
   static async preloadFonts() {
     const fontPath = require("../fonts/roboto-mono-nerd.ttf").default; // eslint-disable-line @typescript-eslint/no-var-requires
@@ -54,13 +54,22 @@ export class Terminal {
     document.fonts.add(fontFace);
   }
 
-  public xterm: XTerm;
+  private xterm: XTerm | null = new XTerm({
-  public fitAddon: FitAddon;
+    cursorBlink: true,
-  public scrollPos = 0;
+    cursorStyle: "bar",
-  public disposers: Function[] = [];
+    fontSize: 13,
+    fontFamily: "RobotoMono",
+  });
+  private readonly fitAddon = new FitAddon();
+  private scrollPos = 0;
+  private disposer = disposer();
 
   @boundMethod
   protected setTheme(colors: Record<string, string>) {
+    if (!this.xterm) {
+      return;
+    }
+
     // Replacing keys stored in styles to format accepted by terminal
     // E.g. terminalBrightBlack -> brightBlack
     const colorPrefix = "terminal";
@@ -73,17 +82,13 @@ export class Terminal {
   }
 
   get elem() {
-    return this.xterm.element;
+    return this.xterm?.element;
   }
 
   get viewport() {
     return this.xterm.element.querySelector(".xterm-viewport");
   }
 
-  constructor(public tabId: TabId, protected api: TerminalApi) {
-    this.init();
-  }
-
   get isActive() {
     const { isOpen, selectedTabId } = dockStore;
 
@@ -96,22 +101,15 @@ export class Terminal {
   }
 
   detach() {
-    Terminal.spawningPool.appendChild(this.elem);
+    const { elem } = this;
+
+    if (elem) {
+      Terminal.spawningPool.appendChild(elem);
+    }
   }
 
-  async init() {
+  constructor(public tabId: TabId, protected api: TerminalApi) {
-    if (this.xterm) {
-      return;
-    }
-    this.xterm = new XTerm({
-      cursorBlink: true,
-      cursorStyle: "bar",
-      fontSize: 13,
-      fontFamily: "RobotoMono",
-    });
-
     // enable terminal addons
-    this.fitAddon = new FitAddon();
     this.xterm.loadAddon(this.fitAddon);
 
     this.xterm.open(Terminal.spawningPool);
@@ -128,7 +126,7 @@ export class Terminal {
     this.api.onData.addListener(this.onApiData);
     window.addEventListener("resize", this.onResize);
 
-    this.disposers.push(
+    this.disposer.push(
       reaction(() => ThemeStore.getInstance().activeTheme.colors, this.setTheme, {
         fireImmediately: true,
       }),
@@ -142,16 +140,18 @@ export class Terminal {
   }
 
   destroy() {
-    if (!this.xterm) return;
+    if (this.xterm) {
-    this.disposers.forEach(dispose => dispose());
+      this.disposer();
-    this.disposers = [];
+      this.xterm.dispose();
-    this.xterm.dispose();
+      this.xterm = null;
-    this.xterm = null;
+    }
   }
 
   fit = () => {
     // Since this function is debounced we need to read this value as late as possible
-    if (!this.isActive) return;
+    if (!this.isActive || !this.xterm) {
+      return;
+    }
 
     try {
       this.fitAddon.fit();
@@ -159,9 +159,8 @@ export class Terminal {
 
       this.api.sendTerminalSize(cols, rows);
     } catch (error) {
-      console.error(error);
+      // see https://github.com/lensapp/lens/issues/1891
-
+      logger.error(`[TERMINAL]: failed to resize terminal to fit`, error);
-      return; // see https://github.com/lensapp/lens/issues/1891
     }
   };
 
@@ -204,19 +203,21 @@ export class Terminal {
   };
 
   onContextMenu = () => {
-    const { terminalCopyOnSelect } = UserStore.getInstance();
+    if (
-    const textFromClipboard = clipboard.readText();
+      // don't paste if user hasn't turned on the feature
+      UserStore.getInstance().terminalCopyOnSelect
 
-    if (terminalCopyOnSelect) {
+      // don't paste if the clipboard doesn't have text
-      this.xterm.paste(textFromClipboard);
+      && clipboard.availableFormats().includes("text/plain")
+    ) {
+      this.xterm.paste(clipboard.readText());
     }
   };
 
   onSelectionChange = () => {
-    const { terminalCopyOnSelect } = UserStore.getInstance();
     const selection = this.xterm.getSelection().trim();
 
-    if (terminalCopyOnSelect && selection !== "") {
+    if (UserStore.getInstance().terminalCopyOnSelect && selection) {
       clipboard.writeText(selection);
     }
   };
@@ -251,5 +252,3 @@ export class Terminal {
     return true;
   };
 }
-
-Terminal.init();