feat: Handle service load failures

Adds a "failed" state for services where the BrowserView and WebContents
should be left around to keep history and allow people to navigate back.

Access to the browser history otherwise doesn't seem possible
(see https://github.com/electron/electron/issues/26727
and https://github.com/electron/electron/issues/7186),
so destroying BrowserView and managing our own history is not possible.

Also keep https://github.com/electron/electron/issues/24113 in mind.

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

8 files changed, 121 insertions, 67 deletions

diff --git a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
index e5fdf11..d90ff19 100644
--- a/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
+++ b/packages/main/src/infrastructure/electron/impl/ElectronServiceView.ts
@@ -22,12 +22,15 @@ import type { BrowserViewBounds } from '@sophie/shared';
 import { BrowserView } from 'electron';
 
 import type Service from '../../../stores/Service';
+import { getLogger } from '../../../utils/log';
 import type Resources from '../../resources/Resources';
 import type { ServiceView } from '../types';
 
 import ElectronPartition from './ElectronPartition';
 import type ElectronViewFactory from './ElectronViewFactory';
 
+const log = getLogger('ElectronServiceView');
+
 export default class ElectronServiceView implements ServiceView {
   readonly id: string;
 
@@ -72,20 +75,39 @@ export default class ElectronServiceView implements ServiceView {
       }
     });
 
+    webContents.on(
+      'did-fail-load',
+      (_event, errorCode, errorDesc, url, isMainFrame) => {
+        if (isMainFrame) {
+          setLocation(url);
+          service.setFailed(errorCode, errorDesc);
+          log.warn(
+            'Failed to load',
+            url,
+            'in service',
+            this.id,
+            errorCode,
+            errorDesc,
+          );
+        }
+      },
+    );
+
     webContents.on('page-title-updated', (_event, title) => {
       service.setTitle(title);
     });
 
     webContents.on('did-start-loading', () => {
-      service.startedLoading();
+      service.startLoading();
     });
 
     webContents.on('did-stop-loading', () => {
-      service.finishedLoading();
+      service.finishLoading();
     });
 
-    webContents.on('render-process-gone', () => {
-      service.crashed();
+    webContents.on('render-process-gone', (_event, details) => {
+      const { reason, exitCode } = details;
+      service.setCrashed(reason, exitCode);
     });
   }
 
@@ -93,8 +115,10 @@ export default class ElectronServiceView implements ServiceView {
     return this.browserView.webContents.id;
   }
 
-  loadURL(url: string): Promise<void> {
-    return this.browserView.webContents.loadURL(url);
+  loadURL(url: string): void {
+    this.browserView.webContents.loadURL(url).catch((error) => {
+      log.warn('Error while loading', url, 'in service', this.id, error);
+    });
   }
 
   goBack(): void {
diff --git a/packages/main/src/infrastructure/electron/types.ts b/packages/main/src/infrastructure/electron/types.ts
index 63974ce..7b04a6b 100644
--- a/packages/main/src/infrastructure/electron/types.ts
+++ b/packages/main/src/infrastructure/electron/types.ts
@@ -55,7 +55,7 @@ export interface ServiceView {
 
   readonly partitionId: string;
 
-  loadURL(url: string): Promise<void>;
+  loadURL(url: string): void;
 
   goBack(): void;
 
diff --git a/packages/main/src/reactions/loadServices.ts b/packages/main/src/reactions/loadServices.ts
index 533ef95..4ef6131 100644
--- a/packages/main/src/reactions/loadServices.ts
+++ b/packages/main/src/reactions/loadServices.ts
@@ -78,36 +78,29 @@ export default function loadServices(
 
       const viewsToDispose = new Map(servicesToViews);
       servicesById.forEach((service, serviceId) => {
-        if (service.shouldBeLoaded) {
-          let view = servicesToViews.get(serviceId);
-          const {
-            settings: {
-              profile: { id: profileId },
-            },
-          } = service;
-          if (view === undefined || view.partitionId !== profileId) {
-            log.debug('Creating view for service', serviceId);
-            const partition = profilesToPartitions.get(profileId);
-            if (partition === undefined) {
-              throw new Error(`Missing Partition ${profileId}`);
-            }
-            view = viewFactory.createServiceView(service, partition);
-            view.setBounds(store.browserViewBounds);
-            servicesToViews.set(serviceId, view);
-            service.setServiceView(view);
-            const { urlToLoad } = service;
-            view.loadURL(urlToLoad).catch((error) => {
-              log.warn(
-                'Cannot URL',
-                urlToLoad,
-                'for service',
-                serviceId,
-                error,
-              );
-            });
-          } else {
-            viewsToDispose.delete(serviceId);
+        if (!service.shouldBeLoaded) {
+          return;
+        }
+        let view = servicesToViews.get(serviceId);
+        const {
+          settings: {
+            profile: { id: profileId },
+          },
+        } = service;
+        if (view === undefined || view.partitionId !== profileId) {
+          log.debug('Creating view for service', serviceId);
+          const partition = profilesToPartitions.get(profileId);
+          if (partition === undefined) {
+            throw new Error(`Missing Partition ${profileId}`);
           }
+          view = viewFactory.createServiceView(service, partition);
+          view.setBounds(store.browserViewBounds);
+          servicesToViews.set(serviceId, view);
+          service.setServiceView(view);
+          const { urlToLoad } = service;
+          view.loadURL(urlToLoad);
+        } else {
+          viewsToDispose.delete(serviceId);
         }
       });
 
diff --git a/packages/main/src/stores/MainStore.ts b/packages/main/src/stores/MainStore.ts
index 21d7a63..dedc740 100644
--- a/packages/main/src/stores/MainStore.ts
+++ b/packages/main/src/stores/MainStore.ts
@@ -56,7 +56,7 @@ const MainStore = types
     },
     get visibleService(): Service | undefined {
       const { selectedService } = this.settings;
-      return selectedService !== undefined && selectedService.shouldBeLoaded
+      return selectedService !== undefined && selectedService.shouldBeVisible
         ? selectedService
         : undefined;
     },
diff --git a/packages/main/src/stores/Service.ts b/packages/main/src/stores/Service.ts
index cbd8662..d98e52e 100644
--- a/packages/main/src/stores/Service.ts
+++ b/packages/main/src/stores/Service.ts
@@ -40,7 +40,10 @@ const Service = defineServiceModel(ServiceSettings)
       return self.currentUrl ?? self.settings.url;
     },
     get shouldBeLoaded(): boolean {
-      return self.state !== 'crashed';
+      return !self.crashed;
+    },
+    get shouldBeVisible(): boolean {
+      return this.shouldBeLoaded && !self.failed;
     },
   }))
   .volatile(
@@ -67,17 +70,20 @@ const Service = defineServiceModel(ServiceSettings)
     setTitle(title: string): void {
       self.title = title;
     },
-    startedLoading(): void {
-      self.state = 'loading';
+    startLoading(): void {
+      self.state = { type: 'loading' };
     },
-    finishedLoading(): void {
-      if (self.state === 'loading') {
+    finishLoading(): void {
+      if (self.loading) {
         // Do not overwrite crashed state if the service haven't been reloaded yet.
-        self.state = 'loaded';
+        self.state = { type: 'loaded' };
       }
     },
-    crashed(): void {
-      self.state = 'crashed';
+    setFailed(errorCode: number, errorDesc: string): void {
+      self.state = { type: 'failed', errorCode, errorDesc };
+    },
+    setCrashed(reason: string, exitCode: number): void {
+      self.state = { type: 'crashed', reason, exitCode };
     },
     setUnreadCount({ direct, indirect }: UnreadCount): void {
       if (direct !== undefined) {
@@ -98,7 +104,7 @@ const Service = defineServiceModel(ServiceSettings)
     },
     reload(ignoreCache = false): void {
       if (self.serviceView === undefined) {
-        this.startedLoading();
+        self.state = { type: 'initializing' };
       } else {
         self.serviceView?.reload(ignoreCache);
       }
@@ -109,12 +115,9 @@ const Service = defineServiceModel(ServiceSettings)
     go(url: string): void {
       if (self.serviceView === undefined) {
         self.currentUrl = url;
-        this.startedLoading();
+        self.state = { type: 'initializing' };
       } else {
-        self.serviceView?.loadURL(url).catch((error) => {
-          log.warn('Error while loading', url, error);
-          this.crashed();
-        });
+        self.serviceView?.loadURL(url);
       }
     },
     goHome(): void {
diff --git a/packages/renderer/src/components/locationBar/NavigationButtons.tsx b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
index e71d3d8..5c5c959 100644
--- a/packages/renderer/src/components/locationBar/NavigationButtons.tsx
+++ b/packages/renderer/src/components/locationBar/NavigationButtons.tsx
@@ -59,7 +59,7 @@ function NavigationButtons({
       >
         {direction === 'ltr' ? <IconArrowForward /> : <IconArrowBack />}
       </IconButton>
-      {service?.state === 'loading' ? (
+      {service?.loading ?? false ? (
         <IconButton aria-label="Stop" onClick={() => service?.stop()}>
           <IconStop />
         </IconButton>
diff --git a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
index d2f0745..57b17e9 100644
--- a/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
+++ b/packages/renderer/src/components/sidebar/ToggleLocationBarButton.tsx
@@ -56,7 +56,7 @@ function ToggleLocationBarButton(): JSX.Element {
       onClick={() => settings.toggleLocationBar()}
     >
       <ToggleLocationBarIcon
-        loading={selectedService?.state === 'loading'}
+        loading={selectedService?.loading ?? false}
         show={showLocationBar}
       />
     </IconButton>
diff --git a/packages/shared/src/stores/ServiceBase.ts b/packages/shared/src/stores/ServiceBase.ts
index cde403b..4a17bc5 100644
--- a/packages/shared/src/stores/ServiceBase.ts
+++ b/packages/shared/src/stores/ServiceBase.ts
@@ -23,20 +23,54 @@ import { IAnyModelType, Instance, types } from 'mobx-state-tree';
 import ServiceSettingsBase from './ServiceSettingsBase';
 
 export function defineServiceModel<TS extends IAnyModelType>(settings: TS) {
-  return types.model('Service', {
-    id: types.identifier,
-    settings,
-    currentUrl: types.maybe(types.string),
-    canGoBack: false,
-    canGoForward: false,
-    title: types.maybe(types.string),
-    state: types.optional(
-      types.enumeration('ServiceState', ['loading', 'loaded', 'crashed']),
-      'loading',
-    ),
-    directMessageCount: 0,
-    indirectMessageCount: 0,
-  });
+  return types
+    .model('Service', {
+      id: types.identifier,
+      settings,
+      currentUrl: types.maybe(types.string),
+      canGoBack: false,
+      canGoForward: false,
+      title: types.maybe(types.string),
+      state: types.optional(
+        types.union(
+          types.model({
+            type: types.literal('initializing'),
+          }),
+          types.model({
+            type: types.literal('loading'),
+          }),
+          types.model({
+            type: types.literal('loaded'),
+          }),
+          types.model({
+            type: types.literal('failed'),
+            errorCode: types.integer,
+            errorDesc: types.string,
+          }),
+          types.model({
+            type: types.literal('crashed'),
+            reason: types.string,
+            exitCode: types.integer,
+          }),
+        ),
+        { type: 'initializing' },
+      ),
+      directMessageCount: 0,
+      indirectMessageCount: 0,
+    })
+    .views((self) => ({
+      get loading(): boolean {
+        return (
+          self.state.type === 'initializing' || self.state.type === 'loading'
+        );
+      },
+      get failed(): boolean {
+        return self.state.type === 'failed';
+      },
+      get crashed(): boolean {
+        return self.state.type === 'crashed';
+      },
+    }));
 }
 
 const ServiceBase = /* @__PURE__ */ (() =>