fix: loading cluster frame + error in loading terminal default font (which was causing network exception error and hidden cluster-view)

fix: proxying websockets (e.g. terminal)

Signed-off-by: Roman <ixrock@gmail.com>

src/main/index.ts

@@ -10,7 +10,7 @@ import * as Mobx from "mobx";
 import * as LensExtensionsCommonApi from "../extensions/common-api";
 import * as LensExtensionsMainApi from "../extensions/main-api";
 import { app, autoUpdater, dialog, powerMonitor } from "electron";
-import { appName, isIntegrationTesting, isMac, isWindows, productName, isDevelopment } from "../common/vars";
+import { appName, isIntegrationTesting, isMac, isWindows, productName } from "../common/vars";
 import { LensProxy } from "./lens-proxy";
 import { WindowManager } from "./window-manager";
 import { ClusterManager } from "./cluster-manager";
@@ -43,16 +43,23 @@ import { initTray } from "./tray/tray";
 import { ShellSession } from "./shell-session/shell-session";
 import { getDi } from "./getDi";
 import extensionLoaderInjectable from "../extensions/extension-loader/extension-loader.injectable";
-import lensProtocolRouterMainInjectable from "./protocol-handler/lens-protocol-router-main/lens-protocol-router-main.injectable";
-import extensionDiscoveryInjectable from "../extensions/extension-discovery/extension-discovery.injectable";
-import directoryForExesInjectable from "../common/app-paths/directory-for-exes/directory-for-exes.injectable";
-import initIpcMainHandlersInjectable from "./initializers/init-ipc-main-handlers/init-ipc-main-handlers.injectable";
+import lensProtocolRouterMainInjectable
+  from "./protocol-handler/lens-protocol-router-main/lens-protocol-router-main.injectable";
+import extensionDiscoveryInjectable
+  from "../extensions/extension-discovery/extension-discovery.injectable";
+import directoryForExesInjectable
+  from "../common/app-paths/directory-for-exes/directory-for-exes.injectable";
+import initIpcMainHandlersInjectable
+  from "./initializers/init-ipc-main-handlers/init-ipc-main-handlers.injectable";
 import electronMenuItemsInjectable from "./menu/electron-menu-items.injectable";
-import directoryForKubeConfigsInjectable from "../common/app-paths/directory-for-kube-configs/directory-for-kube-configs.injectable";
-import kubeconfigSyncManagerInjectable from "./catalog-sources/kubeconfig-sync-manager/kubeconfig-sync-manager.injectable";
+import directoryForKubeConfigsInjectable
+  from "../common/app-paths/directory-for-kube-configs/directory-for-kube-configs.injectable";
+import kubeconfigSyncManagerInjectable
+  from "./catalog-sources/kubeconfig-sync-manager/kubeconfig-sync-manager.injectable";
 import clusterStoreInjectable from "../common/cluster-store/cluster-store.injectable";
 import routerInjectable from "./router/router.injectable";
-import shellApiRequestInjectable from "./proxy-functions/shell-api-request/shell-api-request.injectable";
+import shellApiRequestInjectable
+  from "./proxy-functions/shell-api-request/shell-api-request.injectable";
 import userStoreInjectable from "../common/user-store/user-store.injectable";
 import trayMenuItemsInjectable from "./tray/tray-menu-items.injectable";
 import { createDevServer } from "../../webpack.dev-server";
@@ -170,6 +177,7 @@ di.runSetups().then(() => {
       kubeApiRequest,
       shellApiRequest,
     });
+    const devServer = createDevServer(lensProxy.port);
 
     ClusterManager.createInstance().init();
 
@@ -177,7 +185,10 @@ di.runSetups().then(() => {
 
     try {
       logger.info("🔌 Starting LensProxy");
-      await lensProxy.listen();
+      await Promise.all([
+        lensProxy.listen(),
+        devServer?.start(),
+      ]);
     } catch (error) {
       dialog.showErrorBox("Lens Error", `Could not start proxy: ${error?.message || "unknown error"}`);
 
@@ -228,10 +239,8 @@ di.runSetups().then(() => {
 
     logger.info("🖥️  Starting WindowManager");
     const windowManager = WindowManager.createInstance();
-
-    if (isDevelopment) {
-      const devServer = createDevServer(lensProxy.port);
-      await devServer.start(); // waiting dev-server to start
+    if (devServer) {
+      // override main content view url to local webpack-dev-server to support HMR / live-reload
       windowManager.mainContentUrl = `http://localhost:${devServer.options.port}`;
     }
 

src/renderer/bootstrap.tsx

@@ -136,7 +136,14 @@ export async function bootstrap(di: DependencyInjectionContainer) {
     App = (await import("./frames/cluster-frame/cluster-frame")).ClusterFrame;
   }
 
-  await initializeApp(rootElem);
+  try {
+    await initializeApp(rootElem);
+  } catch (error) {
+    console.error(`[BOOTSTRAP]: view initialization error: ${error}`, {
+      origin: location.href,
+      isTopFrameView: process.isMainFrame,
+    });
+  }
 
   render(
     <DiContextProvider value={{ di }}>

src/renderer/components/dock/terminal/terminal.ts

@@ -17,6 +17,7 @@ import { UserStore } from "../../../../common/user-store";
 import { clipboard } from "electron";
 import logger from "../../../../common/logger";
 import type { TerminalConfig } from "../../../../common/user-store/preferences-helpers";
+import RobotoMonoFontUrl from "../../fonts/roboto-mono-nerd.ttf";
 
 export class Terminal {
   private terminalConfig: TerminalConfig = UserStore.getInstance().terminalConfig;
@@ -26,11 +27,14 @@ export class Terminal {
   }
 
   static async preloadFonts() {
-    const fontPath = require("../../fonts/roboto-mono-nerd.ttf").default; // eslint-disable-line @typescript-eslint/no-var-requires
-    const fontFace = new FontFace(defaultTerminalFontFamily, `url(${fontPath})`);
+    try {
+      const fontFace = new FontFace(defaultTerminalFontFamily, `url(${RobotoMonoFontUrl})`);
 
-    await fontFace.load();
-    document.fonts.add(fontFace);
+      await fontFace.load();
+      document.fonts.add(fontFace);
+    } catch (error) {
+      logger.error(`[TERMINAL]: preloading default font failed`, error);
+    }
   }
 
   private xterm: XTerm | null = new XTerm({

webpack.dev-server.ts

@@ -6,9 +6,11 @@
 import Webpack from "webpack";
 import WebpackDevServer from "webpack-dev-server";
 import { webpackLensRenderer } from "./webpack.renderer";
-import { buildDir, webpackDevServerPort } from "./src/common/vars";
+import { buildDir, isDevelopment, webpackDevServerPort } from "./src/common/vars";
 import logger from "./src/common/logger";
-import { getClusterIdFromHost } from "./src/common/utils";
+
+export interface DevServer extends WebpackDevServer {
+}
 
 /**
  * Creates `webpack-dev-server`
@@ -16,11 +18,18 @@ import { getClusterIdFromHost } from "./src/common/utils";
  * @url https://webpack.js.org/configuration/dev-server/
  * @url https://github.com/chimurai/http-proxy-middleware
  */
-export function createDevServer(lensProxyPort: number): WebpackDevServer {
+export function createDevServer(lensProxyPort: number): DevServer | undefined {
+  if (!isDevelopment) {
+    return undefined;
+  }
+
   const config = webpackLensRenderer();
   const compiler = Webpack(config);
 
   const server = new WebpackDevServer({
+    headers: {
+      "Access-Control-Allow-Origin": "*",
+    },
     allowedHosts: "all",
     host: "localhost",
     port: webpackDevServerPort,
@@ -29,17 +38,13 @@ export function createDevServer(lensProxyPort: number): WebpackDevServer {
     proxy: {
       '*': {
         router(req) {
-          logger.info(`[WEBPACK-DEV-SERVER]: proxy path ${req.path}`, req.headers);
-
-          const clusterId = getClusterIdFromHost(req.headers.host);
-          if (clusterId) {
-            return `http://${clusterId}.localhost:${lensProxyPort}`;
-          }
+          logger.silly(`[WEBPACK-DEV-SERVER]: proxy path ${req.path}`, req.headers);
 
           return `http://localhost:${lensProxyPort}`;
         },
         secure: false, // allow http connections
-        logLevel: "debug",
+        ws: true, // proxy websockets, e.g. terminal
+        logLevel: "error",
       }
     },
     client: {