[2.x] fix: Handle network connection loss in the frontend (#4854)

* feat: handle network connection loss in the frontend

Port of the 1.x network-loss handling (#4843) to 2.x:

- Classify network-level request failures (status 0) in requestErrorCatch
  and show a dedicated translated alert (offline-specific when
  navigator.onLine is false; failed cross-origin requests keep their
  existing message). Parallel failures produce a single alert. Aborted
  requests cannot trigger this, as Mithril leaves their promises
  unsettled.
- Listen to the window online/offline events: going offline shows a
  persistent dismissible alert; reconnecting clears connection alerts
  and briefly confirms.
- Defer GET requests that fail while the browser is offline: their
  promises are held open and settled with the result of a retry once
  connectivity is restored, so content that failed to load appears
  automatically without a page reload. Writes keep failing fast.
  Identical deferred requests (e.g. from a polling widget) are keyed by
  method, URL and params, and retried with a single request.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* feat: retry lazy chunk loads that failed while offline

Code-split chunks load via script tags, not XHR, so the offline handling
in Application#request never sees them. A chunk that failed to load
while offline previously rejected (or was silently swallowed by its
caller): the reply/discussion composer would not open, and
DiscussionPage's PostStream import left the page stuck on its loading
skeleton with no retry — even after connectivity returned.

Since every chunk load funnels through ExportRegistry#loadChunk
(webpack's script loader is overridden with it), hold back failures
that occur while the browser reports being offline and retry once the
online event fires. The import() promise stays pending in the meantime,
so every caller — composer bodies, lazy routes, modals, the post
stream — recovers on its own, without changes to call sites.

Failures while the browser is online are reported unchanged.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* style: format Application.tsx with the repo's pinned prettier

* test: silence expected chunk-url warning in ExportRegistry tests

The tests never register chunks, so the registry legitimately warns
before falling back to the URL passed in. Spy it away, as the admin
Application test does for console.group/error.

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

* test: assert the unregistered-chunk warning and URL fallback

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>

---------

Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

Author: gianniguida

framework/core/js/src/common/Application.tsx

@@ -304,6 +304,33 @@ export default class Application {
    */
   private requestErrorAlert: number | null = null;
 
+  /**
+   * The key for the Alert that was shown as a result of an AJAX request
+   * failing at the network level (status 0). Unlike other request error
+   * alerts, only one of these is shown at a time.
+   */
+  protected networkErrorAlert: number | null = null;
+
+  /**
+   * The key for the Alert that is shown while the browser reports being
+   * offline.
+   */
+  protected offlineAlert: number | null = null;
+
+  /**
+   * GET requests that failed because the browser was offline, keyed by
+   * method, URL and params. They are retried, and their original promises
+   * settled, once connectivity is restored. Identical requests (e.g. from a
+   * polling extension) share one entry and are retried only once.
+   */
+  protected deferredRequests: Map<
+    string,
+    {
+      options: FlarumRequestOptions<any>;
+      settlers: { resolve: (value: any) => void; reject: (error: unknown) => void }[];
+    }
+  > = new Map();
+
   initialRoute!: string;
 
   /**
@@ -358,6 +385,8 @@ export default class Application {
 
     this.mount();
 
+    this.registerConnectivityListeners();
+
     this.initialRoute = window.location.href;
 
     caughtInitializationErrors.forEach((handler) => handler());
@@ -667,7 +696,61 @@ export default class Application {
 
     if (this.requestErrorAlert) this.alerts.dismiss(this.requestErrorAlert);
 
-    return m.request(options).catch((e) => this.requestErrorCatch(e, originalOptions.errorHandler));
+    if (this.networkErrorAlert) {
+      this.alerts.dismiss(this.networkErrorAlert);
+      this.networkErrorAlert = null;
+    }
+
+    return m.request(options).catch((e) => {
+      if (this.shouldDeferRequest(e, originalOptions)) {
+        return this.deferRequest(originalOptions);
+      }
+
+      return this.requestErrorCatch(e, originalOptions.errorHandler);
+    });
+  }
+
+  /**
+   * Whether a failed request should be held back and retried once
+   * connectivity is restored, instead of being rejected.
+   *
+   * Only GET requests that failed at the network level while the browser
+   * reported being offline qualify: they are safe to repeat, and the
+   * `online` event provides a reliable signal to retry them.
+   */
+  protected shouldDeferRequest(error: unknown, originalOptions: FlarumRequestOptions<any>): boolean {
+    return (
+      error instanceof RequestError && error.status === 0 && navigator.onLine === false && (originalOptions.method ?? 'GET').toUpperCase() === 'GET'
+    );
+  }
+
+  /**
+   * Hold a request that failed while offline. The returned promise settles
+   * with the result of retrying the request once connectivity is restored.
+   */
+  protected deferRequest<ResponseType>(originalOptions: FlarumRequestOptions<ResponseType>): Promise<ResponseType> {
+    // Make sure the offline alert is showing, in case the page was loaded
+    // while already offline and no `offline` event was ever fired.
+    this.connectionLost();
+
+    return new Promise((resolve, reject) => {
+      const key = this.deferredRequestKey(originalOptions);
+      const deferred = this.deferredRequests.get(key);
+
+      if (deferred) {
+        deferred.settlers.push({ resolve, reject });
+      } else {
+        this.deferredRequests.set(key, { options: originalOptions, settlers: [{ resolve, reject }] });
+      }
+    });
+  }
+
+  /**
+   * The identity of a request for deferral purposes: requests with the same
+   * key are considered identical and are retried only once.
+   */
+  protected deferredRequestKey(options: FlarumRequestOptions<any>): string {
+    return [options.method ?? 'GET', options.url, JSON.stringify(options.params ?? null)].join(' ');
   }
 
   /**
@@ -682,6 +765,20 @@ export default class Application {
 
     let content;
     switch (error.status) {
+      // Status 0 means the request failed at the network level: the client is
+      // offline, DNS resolution failed, the origin was unreachable, or the
+      // response was blocked by CORS. Aborted requests never get here, as
+      // Mithril leaves their promises unsettled.
+      case 0:
+        if (navigator.onLine === false) {
+          content = app.translator.trans('core.lib.error.offline_message');
+        } else if (this.requestWasCrossOrigin(error)) {
+          content = app.translator.trans('core.lib.error.generic_cross_origin_message');
+        } else {
+          content = app.translator.trans('core.lib.error.network_message');
+        }
+        break;
+
       case 422:
         content = formattedErrors
           .map((detail) => [detail, <br />])
@@ -780,13 +877,89 @@ export default class Application {
       if (e.status === 500 && isDebug) {
         app.modal.show(RequestErrorModal, { error: e, formattedError: formattedErrors });
       } else if (e.alert) {
-        this.requestErrorAlert = this.alerts.show(e.alert, e.alert.content);
+        if (e.status === 0) {
+          // A connection problem produces a single alert, even if several
+          // parallel requests fail at once.
+          if (!this.connectionAlertActive()) {
+            this.networkErrorAlert = this.alerts.show(e.alert, e.alert.content);
+          }
+        } else {
+          this.requestErrorAlert = this.alerts.show(e.alert, e.alert.content);
+        }
       }
     } else {
       throw e;
     }
   }
 
+  /**
+   * Whether an alert about a connection problem (a network-level request
+   * failure or the browser being offline) is currently being shown.
+   */
+  protected connectionAlertActive(): boolean {
+    const activeAlerts = this.alerts.getActiveAlerts();
+
+    return (
+      (this.networkErrorAlert !== null && this.networkErrorAlert in activeAlerts) || (this.offlineAlert !== null && this.offlineAlert in activeAlerts)
+    );
+  }
+
+  /**
+   * Register listeners to proactively notify the user when the browser goes
+   * offline and when connectivity is restored.
+   */
+  protected registerConnectivityListeners(): void {
+    window.addEventListener('offline', () => this.connectionLost());
+    window.addEventListener('online', () => this.connectionRestored());
+  }
+
+  /**
+   * Show a persistent (but dismissible) alert while the browser reports being
+   * offline.
+   */
+  protected connectionLost(): void {
+    if (this.offlineAlert !== null && this.offlineAlert in this.alerts.getActiveAlerts()) return;
+
+    // The offline alert supersedes any alert shown for a failed request.
+    if (this.networkErrorAlert !== null) {
+      this.alerts.dismiss(this.networkErrorAlert);
+      this.networkErrorAlert = null;
+    }
+
+    this.offlineAlert = this.alerts.show({ type: 'error', dismissible: true }, app.translator.trans('core.lib.error.offline_message'));
+  }
+
+  /**
+   * Dismiss any connection problem alerts, retry requests that were deferred
+   * while offline, and briefly confirm to the user that connectivity has
+   * been restored.
+   */
+  protected connectionRestored(): void {
+    if (this.networkErrorAlert !== null) {
+      this.alerts.dismiss(this.networkErrorAlert);
+      this.networkErrorAlert = null;
+    }
+
+    const deferred = Array.from(this.deferredRequests.values());
+    this.deferredRequests = new Map();
+
+    deferred.forEach(({ options, settlers }) => {
+      this.request(options).then(
+        (response) => settlers.forEach(({ resolve }) => resolve(response)),
+        (error) => settlers.forEach(({ reject }) => reject(error))
+      );
+    });
+
+    if (this.offlineAlert === null) return;
+
+    this.alerts.dismiss(this.offlineAlert);
+    this.offlineAlert = null;
+
+    const confirmationAlert = this.alerts.show({ type: 'success' }, app.translator.trans('core.lib.connection_restored_message'));
+
+    setTimeout(() => this.alerts.dismiss(confirmationAlert), 10000);
+  }
+
   private showDebug(error: RequestError, formattedError: string[]) {
     if (this.requestErrorAlert !== null) this.alerts.dismiss(this.requestErrorAlert);
 

framework/core/js/src/common/ExportRegistry.ts

@@ -172,17 +172,40 @@ export default class ExportRegistry implements IExportRegistry, IChunkRegistry {
     // @ts-ignore
     app.alerts.showLoading();
 
-    return await original(
-      this.chunkUrl(chunkId) || url,
-      (...args: any) => {
-        // @ts-ignore
-        app.alerts.clearLoading();
-
-        return done(...args);
-      },
-      key,
-      chunkId
-    );
+    const chunkUrl = this.chunkUrl(chunkId) || url;
+
+    const load = (): Promise<void> =>
+      original(
+        chunkUrl,
+        (...args: any) => {
+          const event: Event | undefined = args[0];
+
+          // A chunk that failed to load because the browser is offline is
+          // retried once connectivity is restored. Its import() promise stays
+          // pending in the meantime, so every caller awaiting the chunk
+          // recovers on its own — mirroring how `Application#request` defers
+          // GET requests that fail while offline.
+          if (event?.type === 'error' && navigator.onLine === false) {
+            const retry = () => {
+              window.removeEventListener('online', retry);
+              load();
+            };
+
+            window.addEventListener('online', retry);
+
+            return;
+          }
+
+          // @ts-ignore
+          app.alerts.clearLoading();
+
+          return done(...args);
+        },
+        key,
+        chunkId
+      );
+
+    return await load();
   }
 
   chunkUrl(chunkId: number | string): string | null {