fix: handle loadURL() failures correctly (#1093)

scripts/build/build.mts

@@ -63,6 +63,11 @@ await Promise.all([
         outfile: "dist/js/preload.js",
         footer: { js: "//# sourceURL=VCDPreload" }
     }),
+    createContext({
+        ...NodeCommonOpts,
+        entryPoints: ["src/preload/splash.ts"],
+        outfile: "dist/js/splashPreload.js"
+    }),
     createContext({
         ...CommonOpts,
         globalName: "Vesktop",

src/main/mainWindow.ts

@@ -16,6 +16,7 @@ import {
     session,
     Tray
 } from "electron";
+import { EventEmitter } from "events";
 import { rm } from "fs/promises";
 import { join } from "path";
 import { IpcCommands, IpcEvents } from "shared/IpcEvents";
@@ -39,7 +40,7 @@ import {
 import { darwinURL } from "./index";
 import { sendRendererCommand } from "./ipcCommands";
 import { Settings, State, VencordSettings } from "./settings";
-import { createSplashWindow } from "./splash";
+import { createSplashWindow, updateSplashMessage } from "./splash";
 import { makeLinksOpenExternally } from "./utils/makeLinksOpenExternally";
 import { applyDeckKeyboardFix, askToApplySteamLayout, isDeckGameMode } from "./utils/steamOS";
 import { downloadVencordFiles, ensureVencordFiles } from "./utils/vencordLoader";
@@ -477,17 +478,33 @@ function createMainWindow() {
     win.webContents.setUserAgent(BrowserUserAgent);
 
     // if the open-url event is fired (in index.ts) while starting up, darwinURL will be set. If not fall back to checking the process args (which Windows and Linux use for URI calling.)
+    // win.webContents.session.clearCache().then(() => {
     loadUrl(darwinURL || process.argv.find(arg => arg.startsWith("discord://")));
+    // });
 
     return win;
 }
 
 const runVencordMain = once(() => require(join(VENCORD_FILES_DIR, "vencordDesktopMain.js")));
 
+const loadEvents = new EventEmitter();
+
 export function loadUrl(uri: string | undefined) {
     const branch = Settings.store.discordBranch;
     const subdomain = branch === "canary" || branch === "ptb" ? `${branch}.` : "";
-    mainWin.loadURL(`https://${subdomain}discord.com/${uri ? new URL(uri).pathname.slice(1) || "app" : "app"}`);
+
+    // we do not rely on 'did-finish-load' because it fires even if loadURL fails which triggers early detruction of the splash
+    mainWin
+        .loadURL(`https://${subdomain}discord.com/${uri ? new URL(uri).pathname.slice(1) || "app" : "app"}`)
+        .then(() => loadEvents.emit("app-loaded"))
+        .catch(error => retryUrl(error.url, error.code));
+}
+
+const retryDelay = 1000;
+function retryUrl(url: string, description: string) {
+    console.log(`retrying in ${retryDelay}ms`);
+    updateSplashMessage(`Failed to load Discord: ${description}`);
+    setTimeout(() => loadUrl(url), retryDelay);
 }
 
 export async function createWindows() {
@@ -506,7 +523,7 @@ export async function createWindows() {
 
     mainWin = createMainWindow();
 
-    mainWin.webContents.on("did-finish-load", () => {
+    loadEvents.on("app-loaded", () => {
         splash?.destroy();
 
         if (!startMinimized) {
@@ -529,6 +546,8 @@ export async function createWindows() {
     });
 
     mainWin.webContents.on("did-navigate", (_, url: string, responseCode: number) => {
+        updateSplashMessage(""); // clear the splash message
+
         // check url to ensure app doesn't loop
         if (responseCode >= 300 && new URL(url).pathname !== `/app`) {
             loadUrl(undefined);

src/main/splash.ts

@@ -11,11 +11,16 @@ import { ICON_PATH, VIEW_DIR } from "shared/paths";
 
 import { Settings } from "./settings";
 
+let splash: BrowserWindow | undefined;
+
 export function createSplashWindow(startMinimized = false) {
-    const splash = new BrowserWindow({
+    splash = new BrowserWindow({
         ...SplashProps,
         icon: ICON_PATH,
-        show: !startMinimized
+        show: !startMinimized,
+        webPreferences: {
+            preload: join(__dirname, "splashPreload.js")
+        }
     });
 
     splash.loadFile(join(VIEW_DIR, "splash.html"));
@@ -37,3 +42,7 @@ export function createSplashWindow(startMinimized = false) {
 
     return splash;
 }
+
+export function updateSplashMessage(message: string) {
+    if (splash && !splash.isDestroyed()) splash.webContents.send("update-splash-message", message);
+}

src/preload/splash.ts

@@ -0,0 +1,13 @@
+/*
+ * Vesktop, a desktop app aiming to give you a snappier Discord Experience
+ * Copyright (c) 2025 Vendicated and Vesktop contributors
+ * SPDX-License-Identifier: GPL-3.0-or-later
+ */
+
+const { contextBridge, ipcRenderer } = require("electron/renderer");
+
+contextBridge.exposeInMainWorld("VesktopSplashNative", {
+    onUpdateMessage(callback: (message: string) => void) {
+        ipcRenderer.on("update-splash-message", (_, message: string) => callback(message));
+    }
+});

static/views/splash.html

@@ -6,6 +6,7 @@
             background: none;
             user-select: none;
             -webkit-app-region: drag;
+            overflow: hidden;
         }
 
         .wrapper {
@@ -20,6 +21,14 @@
             background: var(--bg);
         }
 
+        .message {
+            top: 70%;
+            word-break: break-word;
+            padding: 0 16px;
+            position: absolute;
+            font-size: 14px
+        }
+
         p {
             text-align: center;
         }
@@ -41,5 +50,15 @@
             role="presentation"
         />
         <p>Loading Vesktop...</p>
+        <p class="message"></p>
     </div>
 </body>
+
+<script>
+    document.addEventListener("DOMContentLoaded", () => {
+        const messageElement = document.querySelector('.message');
+        VesktopSplashNative.onUpdateMessage(message => {
+            messageElement.textContent = message;
+        })
+    });
+</script>