frontend/editor: rename EditorLoadError and do not lazily load it (assuming network problem!)

Author: haraldschilly

src/packages/frontend/file-editors-error.tsx

@@ -8,7 +8,7 @@ import { ReactElement } from "react";
 
 import { Icon, Paragraph } from "@cocalc/frontend/components";
 
-interface EditorLoadErrorComponentProps {
+interface EditorLoadErrorProps {
   path: string;
   error: Error;
 }
@@ -17,9 +17,7 @@ interface EditorLoadErrorComponentProps {
  * Error component shown when editor fails to load.
  * Displays error message with a button to refresh the page.
  */
-export function EditorLoadErrorComponent(
-  props: EditorLoadErrorComponentProps,
-): ReactElement {
+export function EditorLoadError(props: EditorLoadErrorProps): ReactElement {
   const { path, error } = props;
 
   const handleRefresh = () => {

src/packages/frontend/file-editors.ts

@@ -18,7 +18,7 @@ import {
 import { React } from "@cocalc/frontend/app-framework";
 
 import { alert_message } from "./alerts";
-import { EditorLoadErrorComponent } from "./file-editors-error";
+import { EditorLoadError } from "./file-editors-error";
 
 declare let DEBUG: boolean;
 
@@ -144,7 +144,9 @@ function logFallback(
   is_public: boolean,
 ): void {
   console.warn(
-    `Editor fallback triggered: No editor found for ext '${ext ?? "unknown"}' on path '${path}' (is_public: ${is_public}), using unknown editor catchall`,
+    `Editor fallback triggered: No editor found for ext '${
+      ext ?? "unknown"
+    }' on path '${path}' (is_public: ${is_public}), using unknown editor catchall`,
   );
 }
 
@@ -267,8 +269,7 @@ export async function generateAsync(
           timeout: 10,
         });
         // Return error component with refresh button
-        return () =>
-          React.createElement(EditorLoadErrorComponent, { path, error });
+        return () => React.createElement(EditorLoadError, { path, error });
       }
     }
     return () =>

src/packages/frontend/frame-editors/frame-tree/register.ts

@@ -89,17 +89,21 @@ if (DEBUG) {
  * Wraps an async data loader with timeout protection and retry logic.
  *
  * Strategy:
- * - If 10 second timeout occurs → retry immediately
+ * - If 15 second timeout occurs → retry immediately
  * - If asyncLoader() fails immediately due to network error → wait 5 seconds → retry
  * - Maximum 3 attempts total
  *
  * This ensures that temporary network hiccups don't silently cause fallback to wrong editor.
  * NOTE: The caller must wrap this with reuseInFlight to prevent duplicate simultaneous loads.
+ *
+ * TEST: refresh CoCalc page, but do not open a complex editor like Jupyter.
+ * Open Chrome debug panel → Network → Network: "Offline"
+ * Then click on the ipynb file and watch the console for the retries and the error popping up.
  */
 function withTimeoutAndRetry<T>(
   asyncLoaderFn: () => Promise<T>,
   ext: string | string[],
-  timeoutMs: number = 10000,
+  timeoutMs: number = 15_000, // wait up to 15 seconds to load all assets
   maxRetries: number = 3,
 ): () => Promise<T> {
   const extStr = Array.isArray(ext) ? ext.join(",") : ext;
@@ -116,11 +120,6 @@ function withTimeoutAndRetry<T>(
           );
         }
 
-        // TEST: Uncomment below to simulate network error for ipynb files
-        // if (extStr === "ipynb") {
-        //   throw new Error("Simulated network error for testing");
-        // }
-
         const result = await Promise.race([
           asyncLoaderFn(),
           new Promise<T>((_, reject) =>

src/packages/frontend/project_actions.ts

@@ -110,6 +110,7 @@ import { reuseInFlight } from "@cocalc/util/reuse-in-flight";
 import { MARKERS } from "@cocalc/util/sagews";
 import { client_db } from "@cocalc/util/schema";
 import { get_editor } from "./editors/react-wrapper";
+import { EditorLoadError } from "./file-editors-error";
 
 const { defaults, required } = misc;
 
@@ -783,13 +784,10 @@ export class ProjectActions extends Actions<ProjectStoreState> {
             } catch (err) {
               // Error already reported to user by alert_message in file-editors.ts
               // Show error component in the editor area
-              const { EditorLoadErrorComponent } = await import(
-                "./file-editors-error"
-              );
               if (this.open_files == null) return;
               const error = err as Error;
               info.Editor = () =>
-                require("react").createElement(EditorLoadErrorComponent, {
+                require("react").createElement(EditorLoadError, {
                   path,
                   error,
                 });
@@ -1571,8 +1569,9 @@ export class ProjectActions extends Actions<ProjectStoreState> {
     const computeServerAssociations =
       webapp_client.project_client.computeServers(this.project_id);
     const sidePath = chatFile(path);
-    const currentId =
-      await computeServerAssociations.getServerIdForPath(sidePath);
+    const currentId = await computeServerAssociations.getServerIdForPath(
+      sidePath,
+    );
     if (currentId != null) {
       // already set
       return;
@@ -2356,8 +2355,8 @@ export class ProjectActions extends Actions<ProjectStoreState> {
             dest_compute_server_id: opts.dest_compute_server_id,
           }
         : opts.src_compute_server_id
-          ? { compute_server_id: opts.src_compute_server_id }
-          : undefined),
+        ? { compute_server_id: opts.src_compute_server_id }
+        : undefined),
     });
 
     if (opts.only_contents) {