fix: vite dev server race condition

Handle the ERR_ABORTED error emitted by chromium when it tries to load
the UI before the vite dev server is fully initialized.

Signed-off-by: Kristóf Marussy <kristof@marussy.com>

2 files changed, 141 insertions, 67 deletions

diff --git a/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.spec.ts b/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.spec.ts
index f7bad0a..c9aeaab 100644
--- a/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.spec.ts
+++ b/packages/main/src/infrastructure/electron/impl/__tests__/lockWebContentsToFile.spec.ts
@@ -30,80 +30,144 @@ import lockWebContentsToFile from '../lockWebContentsToFile';
 
 type WillNavigateHandler = (event: Event, url: string) => void;
 
-let willNavigate: WillNavigateHandler | undefined;
-
-let windowOpenHandler:
-  | ((details: HandlerDetails) => { action: 'allow' | 'deny' })
-  | undefined;
-
-const urlToLoad =
-  'file:///opt/sophie/resources/app.asar/packages/renderer/dist/index.html';
-
-const fakeResources = fake<Resources>({
-  getRendererURL(path: string) {
-    return new URL(
-      path,
-      'file:///opt/sophie/resources/app.asar/packages/renderer/dist/',
-    ).toString();
-  },
-});
+const filePrefix =
+  'file:///opt/sophie/resources/app.asar/packages/renderer/dist/';
 
-const fakeWebContents = fake<WebContents>({
-  setWindowOpenHandler(handler) {
-    windowOpenHandler = handler;
-  },
-  on(event, listener) {
-    if (event === 'will-navigate') {
-      willNavigate = listener as WillNavigateHandler;
-    }
-    return this as WebContents;
-  },
-  loadURL: jest.fn<WebContents['loadURL']>(),
-});
+function createFakeResources(prefix: string): Resources {
+  return fake<Resources>({
+    getRendererURL(path: string) {
+      return new URL(path, prefix).toString();
+    },
+  });
+}
 
-const event: Event = {
-  preventDefault: jest.fn(),
-};
+function createAbortedError(): Error {
+  const error = new Error('Aborted error');
+  Object.assign(error, {
+    errno: -3,
+    code: 'ERR_ABORTED',
+  });
+  return error;
+}
 
-beforeEach(async () => {
-  windowOpenHandler = undefined;
-  willNavigate = undefined;
-  mocked(fakeWebContents.loadURL).mockResolvedValueOnce();
-  await lockWebContentsToFile(fakeResources, 'index.html', fakeWebContents);
-});
+describe('when loadURL does not throw', () => {
+  let willNavigate: WillNavigateHandler | undefined;
 
-it('should load the specified file', () => {
-  expect(fakeWebContents.loadURL).toHaveBeenCalledWith(urlToLoad);
-});
+  let windowOpenHandler:
+    | ((details: HandlerDetails) => { action: 'allow' | 'deny' })
+    | undefined;
 
-it('should set up will navigate and window open listeners', () => {
-  expect(willNavigate).toBeDefined();
-  expect(windowOpenHandler).toBeDefined();
-});
+  const urlToLoad = `${filePrefix}index.html`;
+
+  const fakeResources = createFakeResources(filePrefix);
 
-it('should prevent opening a window', () => {
-  const { action } = windowOpenHandler!({
-    url: 'https://example.com',
-    frameName: 'newWindow',
-    features: '',
-    disposition: 'default',
-    referrer: {
-      url: urlToLoad,
-      policy: 'default',
+  const fakeWebContents = fake<WebContents>({
+    setWindowOpenHandler(handler) {
+      windowOpenHandler = handler;
     },
+    on(event, listener) {
+      if (event === 'will-navigate') {
+        willNavigate = listener as WillNavigateHandler;
+      }
+      return this as WebContents;
+    },
+    loadURL: jest.fn<WebContents['loadURL']>(),
+  });
+
+  const event: Event = {
+    preventDefault: jest.fn(),
+  };
+
+  beforeEach(async () => {
+    windowOpenHandler = undefined;
+    willNavigate = undefined;
+    mocked(fakeWebContents.loadURL).mockResolvedValueOnce();
+    await lockWebContentsToFile(fakeResources, 'index.html', fakeWebContents);
   });
-  expect(action).toBe('deny');
-});
 
-it('should allow navigation to the loaded URL', () => {
-  willNavigate!(event, urlToLoad);
-  expect(event.preventDefault).not.toHaveBeenCalled();
+  it('should load the specified file', () => {
+    expect(fakeWebContents.loadURL).toHaveBeenCalledWith(urlToLoad);
+  });
+
+  it('should set up will navigate and window open listeners', () => {
+    expect(willNavigate).toBeDefined();
+    expect(windowOpenHandler).toBeDefined();
+  });
+
+  it('should prevent opening a window', () => {
+    const { action } = windowOpenHandler!({
+      url: 'https://example.com',
+      frameName: 'newWindow',
+      features: '',
+      disposition: 'default',
+      referrer: {
+        url: urlToLoad,
+        policy: 'default',
+      },
+    });
+    expect(action).toBe('deny');
+  });
+
+  it('should allow navigation to the loaded URL', () => {
+    willNavigate!(event, urlToLoad);
+    expect(event.preventDefault).not.toHaveBeenCalled();
+  });
+
+  it('should not allow navigation to another URL', () => {
+    willNavigate!(
+      event,
+      'file:///opt/sophie/resources/app.asar/packages/renderer/not-allowed.html',
+    );
+    expect(event.preventDefault).toHaveBeenCalled();
+  });
 });
 
-it('should not allow navigation to another URL', () => {
-  willNavigate!(
-    event,
-    'file:///opt/sophie/resources/app.asar/packages/renderer/not-allowed.html',
-  );
-  expect(event.preventDefault).toHaveBeenCalled();
+describe('when loadURL throws', () => {
+  const fakeWebContents = fake<WebContents>({
+    setWindowOpenHandler: jest.fn<WebContents['setWindowOpenHandler']>(),
+    on: jest.fn<() => WebContents>(),
+    loadURL: jest.fn<WebContents['loadURL']>(),
+  });
+
+  describe('when the URL points at a file', () => {
+    const fakeResources = createFakeResources('http://localhost:3000');
+
+    it('should swallow ERR_ABORTED errors', async () => {
+      const error = createAbortedError();
+      mocked(fakeWebContents.loadURL).mockRejectedValueOnce(error);
+      await expect(
+        lockWebContentsToFile(fakeResources, 'index.html', fakeWebContents),
+      ).resolves.not.toThrow();
+    });
+
+    it('should pass through other errors', async () => {
+      mocked(fakeWebContents.loadURL).mockRejectedValueOnce(
+        new Error('other error'),
+      );
+      await expect(
+        lockWebContentsToFile(fakeResources, 'index.html', fakeWebContents),
+      ).rejects.toBeInstanceOf(Error);
+    });
+  });
+
+  describe('when the URL points at a local server', () => {
+    const fakeResources = createFakeResources(filePrefix);
+
+    it('should pass through ERR_ABORTED errors', async () => {
+      const error = createAbortedError();
+      mocked(fakeWebContents.loadURL).mockRejectedValueOnce(error);
+      await expect(
+        lockWebContentsToFile(fakeResources, 'index.html', fakeWebContents),
+      ).rejects.toBeInstanceOf(Error);
+    });
+
+    it('should pass through other errors', async () => {
+      mocked(fakeWebContents.loadURL).mockRejectedValueOnce(
+        new Error('other error'),
+      );
+      await expect(
+        lockWebContentsToFile(fakeResources, 'index.html', fakeWebContents),
+      ).rejects.toBeInstanceOf(Error);
+    });
+  });
 });
diff --git a/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts b/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
index 8d557c4..da40a56 100644
--- a/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
+++ b/packages/main/src/infrastructure/electron/impl/lockWebContentsToFile.ts
@@ -21,6 +21,7 @@
 import type { WebContents } from 'electron';
 
 import getLogger from '../../../utils/getLogger';
+import isErrno from '../../../utils/isErrno';
 import type Resources from '../../resources/Resources';
 
 const log = getLogger('lockWebContentsToFile');
@@ -33,8 +34,9 @@ const log = getLogger('lockWebContentsToFile');
  * @param resources The resource handle associated with the paths and URL of the application.
  * @param filePath The path to the file in the render package to load.
  * @param webContents The webContents to lock.
+ * @returns A promise that resolves when the webpage is loaded.
  */
-export default function lockWebContentsToFile(
+export default async function lockWebContentsToFile(
   resources: Resources,
   filePath: string,
   webContents: WebContents,
@@ -55,5 +57,13 @@ export default function lockWebContentsToFile(
     }
   });
 
-  return webContents.loadURL(pageURL);
+  try {
+    await webContents.loadURL(pageURL);
+  } catch (error) {
+    // Chromium will throw `ERR_ABORTED` when the vite dev server is still initializing,
+    // but will load the page nevertheless.
+    if (!isErrno(error, 'ERR_ABORTED') || !pageURL.startsWith('http:')) {
+      throw error;
+    }
+  }
 }