feat(error-dialog): implement processing error dialog with traceback and context display

Author: PierreRaybaut

src/App.tsx

@@ -86,7 +86,12 @@ import {
 } from "./utils/consoleLog";
 import { DialogBridge } from "./components/DialogBridge";
 import { t } from "./i18n/translate";
-import { useConfirm, useMessage, usePrompt } from "./components/ConfirmDialog";
+import {
+  useConfirm,
+  useMessage,
+  useProcessingError,
+  usePrompt,
+} from "./components/ConfirmDialog";
 import { EdgeSlowLoadHint } from "./components/EdgeSlowLoadHint";
 import { useProgress } from "./components/ProgressDialog";
 import {
@@ -333,6 +338,7 @@ export default function App() {
   const workspace = useWorkspace();
   const confirm = useConfirm();
   const notify = useMessage();
+  const showProcessingError = useProcessingError();
   const prompt = usePrompt();
   const runWithProgress = useProgress();
   // Whether the metadata clipboard holds a payload "Paste metadata" can
@@ -1553,11 +1559,22 @@ export default function App() {
         } else {
           await refresh(lastId);
         }
+      } catch (err) {
+        // A computation raising in Sigima/Pyodide (e.g. gamma correction on
+        // an image with negative values) is a *processing* problem, not a
+        // crash: surface the full traceback in a copy-pasteable modal
+        // (mirroring DataLab desktop) so the user understands their
+        // request could not be honoured. The traceback is also logged to
+        // the browser console by the runtime.
+        await showProcessingError({
+          context: t("Computing: {feature}", { feature: feature.label }),
+          traceback: err instanceof Error ? err.message : String(err),
+        });
       } finally {
         setBusy(false);
       }
     },
-    [runtime, refresh, refreshPanelKind],
+    [runtime, refresh, refreshPanelKind, showProcessingError],
   );
 
   const refreshPluginActions = useCallback(async () => {
@@ -1586,12 +1603,26 @@ export default function App() {
           );
         }
       } catch (err) {
-        console.error("[plugins] action failed", err);
+        await showProcessingError({
+          context: t("Plugin action: {action}", {
+            action:
+              pluginActions.find((a) => a.action_id === actionId)?.title ??
+              actionId,
+          }),
+          traceback: err instanceof Error ? err.message : String(err),
+        });
       } finally {
         setBusy(false);
       }
     },
-    [runtime, refresh, refreshPanelKind, treeKind],
+    [
+      runtime,
+      refresh,
+      refreshPanelKind,
+      treeKind,
+      pluginActions,
+      showProcessingError,
+    ],
   );
 
   const handleReloadPlugins = useCallback(async () => {
@@ -1804,16 +1835,27 @@ export default function App() {
           }
         }
       } catch (err) {
-        const message = err instanceof Error ? err.message : String(err);
-        await notify({
-          kind: "error",
-          message: `Analysis failed: ${message}`,
+        const catalog =
+          treeKind === "image" ? imageAnalysisEntries : analysisEntries;
+        const label = catalog.find((e) => e.id === funcId)?.label ?? funcId;
+        await showProcessingError({
+          context: t("Computing: {feature}", { feature: label }),
+          traceback: err instanceof Error ? err.message : String(err),
         });
       } finally {
         setBusy(false);
       }
     },
-    [runtime, refreshResults, treeKind, notify, currentId],
+    [
+      runtime,
+      refreshResults,
+      treeKind,
+      notify,
+      showProcessingError,
+      currentId,
+      analysisEntries,
+      imageAnalysisEntries,
+    ],
   );
 
   const handleFreeMemory = useCallback(async () => {

src/components/ConfirmDialog.tsx

@@ -143,6 +143,96 @@ export function MessageDialog(props: MessageDialogProps) {
   );
 }
 
+// ---------------------------------------------------------------------
+// Processing error (rich, copy-pasteable traceback + tip)
+// ---------------------------------------------------------------------
+
+export interface ProcessingErrorOptions {
+  /** Context line, e.g. ``"Computing: Gamma correction"``. */
+  context: string;
+  /** Full Python traceback, shown verbatim and copy-pasteable. */
+  traceback: string;
+  /** Optional override of the default computation tip. */
+  tip?: string;
+  /** Optional dialog heading; defaults to ``"Error"``. */
+  title?: string;
+}
+
+interface PendingProcessingError extends ProcessingErrorOptions {
+  resolve: () => void;
+}
+
+interface ProcessingErrorDialogProps {
+  options: ProcessingErrorOptions;
+  onClose: () => void;
+}
+
+/** Pure presentational error dialog mirroring DataLab desktop's
+ *  ``WarningErrorMessageBox``: a context line, the full traceback in a
+ *  selectable / copyable block, and a tip explaining that computation
+ *  errors are usually caused by the data or parameters. */
+export function ProcessingErrorDialog(props: ProcessingErrorDialogProps) {
+  const { options, onClose } = props;
+  const { context, traceback, tip, title } = options;
+  const [copied, setCopied] = useState(false);
+  useEffect(() => {
+    const handler = (e: KeyboardEvent) => {
+      if (e.key === "Escape" || e.key === "Enter") onClose();
+    };
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [onClose]);
+  const handleCopy = async () => {
+    try {
+      await navigator.clipboard.writeText(traceback);
+      setCopied(true);
+      window.setTimeout(() => setCopied(false), 1500);
+    } catch {
+      // ignore clipboard failures (permission denied, etc.)
+    }
+  };
+  const tipText =
+    tip ??
+    t(
+      "DataLab relies on various libraries to perform the computation. During the computation, errors may occur because of the data (e.g. division by zero, unexpected data type, etc.) or because of the libraries (e.g. memory error, etc.). If you encounter an error, before reporting it, please ensure that the computation is correct, by checking the data and the parameters.",
+    );
+  return (
+    <div className="overlay" role="dialog" aria-modal="true" onClick={onClose}>
+      <div
+        className="card processing-error-card"
+        onClick={(e) => e.stopPropagation()}
+      >
+        <h2>{title || t("Error")}</h2>
+        <div className="processing-error-context">
+          <p>{t("An error has occurred during the following context:")}</p>
+          <p>
+            <strong>{context}</strong>
+          </p>
+        </div>
+        <div className="processing-error-traceback">
+          <div className="processing-error-traceback-head">
+            <span>
+              {t("The following traceback may help to understand the problem:")}
+            </span>
+            <button type="button" onClick={handleCopy}>
+              {copied ? t("Copied") : t("Copy")}
+            </button>
+          </div>
+          <pre>{traceback}</pre>
+        </div>
+        <div className="processing-error-tip">
+          <p>{tipText}</p>
+        </div>
+        <div className="actions">
+          <button onClick={onClose} autoFocus>
+            {t("OK")}
+          </button>
+        </div>
+      </div>
+    </div>
+  );
+}
+
 // ---------------------------------------------------------------------
 // Prompt (single-line text input)
 // ---------------------------------------------------------------------
@@ -225,18 +315,21 @@ export function PromptDialog(props: PromptDialogProps) {
 type ConfirmFn = (options: ConfirmOptions) => Promise<boolean>;
 type MessageFn = (options: MessageOptions) => Promise<void>;
 type PromptFn = (options: PromptOptions) => Promise<string | null>;
+type ProcessingErrorFn = (options: ProcessingErrorOptions) => Promise<void>;
 
 interface DialogContextValue {
   confirm: ConfirmFn;
   message: MessageFn;
   prompt: PromptFn;
+  processingError: ProcessingErrorFn;
 }
 
 const DialogContext = createContext<DialogContextValue | null>(null);
 
 type AnyPending =
   | ({ _kind: "confirm" } & PendingConfirm)
   | ({ _kind: "message" } & PendingMessage)
+  | ({ _kind: "processingError" } & PendingProcessingError)
   | ({ _kind: "prompt" } & PendingPrompt);
 
 /**
@@ -261,15 +354,23 @@ export function DialogProvider(props: { children: ReactNode }) {
       setQueue((q) => [...q, { _kind: "message", ...options, resolve }]);
     });
   }, []);
+  const processingError = useCallback<ProcessingErrorFn>((options) => {
+    return new Promise<void>((resolve) => {
+      setQueue((q) => [
+        ...q,
+        { _kind: "processingError", ...options, resolve },
+      ]);
+    });
+  }, []);
   const prompt = useCallback<PromptFn>((options) => {
     return new Promise<string | null>((resolve) => {
       setQueue((q) => [...q, { _kind: "prompt", ...options, resolve }]);
     });
   }, []);
 
   const value = useMemo<DialogContextValue>(
-    () => ({ confirm, message, prompt }),
-    [confirm, message, prompt],
+    () => ({ confirm, message, prompt, processingError }),
+    [confirm, message, prompt, processingError],
   );
 
   return (
@@ -293,6 +394,15 @@ export function DialogProvider(props: { children: ReactNode }) {
           }}
         />
       )}
+      {current?._kind === "processingError" && (
+        <ProcessingErrorDialog
+          options={current}
+          onClose={() => {
+            current.resolve();
+            popQueue();
+          }}
+        />
+      )}
       {current?._kind === "prompt" && (
         <PromptDialog
           options={current}
@@ -322,6 +432,10 @@ export function useMessage(): MessageFn {
   return useDialogs().message;
 }
 
+export function useProcessingError(): ProcessingErrorFn {
+  return useDialogs().processingError;
+}
+
 export function usePrompt(): PromptFn {
   return useDialogs().prompt;
 }

src/locales/fr.json

@@ -89,6 +89,7 @@
   "Allan variance": "Variance d'Allan",
   "Allan variance…": "Variance d'Allan…",
   "Already open — click to focus tab (last seen {when})": "Déjà ouvert — cliquez pour activer l'onglet (vu {when})",
+  "An error has occurred during the following context:": "Une erreur s'est produite dans le contexte suivant :",
   "Analysis": "Analyse",
   "and": "et",
   "API key": "Clé API",
@@ -201,6 +202,7 @@
   "Completion: {count}": "Complétion : {count}",
   "Computation engine (Sigima)": "Moteur de calcul (Sigima)",
   "Computation engine running in your browser (Python/WebAssembly)": "Moteur de calcul exécuté dans votre navigateur (Python/WebAssembly)",
+  "Computing: {feature}": "Calcul : {feature}",
   "Configure base URL and model in Settings before sending a message.": "Configurez l'URL de base et le modèle dans les paramètres avant d'envoyer un message.",
   "Confirm": "Confirmer",
   "Confirm rename of the edited item": "Confirmer le renommage de l'élément édité",
@@ -221,6 +223,7 @@
   "Convert to polar coordinates": "Convertir en coordonnées polaires",
   "Convert to polar coordinates…": "Convertir en coordonnées polaires…",
   "Convolution": "Convolution",
+  "Copied": "Copié",
   "Copied!": "Copié !",
   "Copy": "Copier",
   "Copy as TSV": "Copier au format TSV",
@@ -254,6 +257,7 @@
   "Data preview": "Aperçu des données",
   "Data storage": "Stockage des données",
   "DataLab project website": "Site web du projet DataLab",
+  "DataLab relies on various libraries to perform the computation. During the computation, errors may occur because of the data (e.g. division by zero, unexpected data type, etc.) or because of the libraries (e.g. memory error, etc.). If you encounter an error, before reporting it, please ensure that the computation is correct, by checking the data and the parameters.": "DataLab s'appuie sur diverses bibliothèques pour effectuer le calcul. Pendant le calcul, des erreurs peuvent survenir à cause des données (par exemple, division par zéro, type de données inattendu, etc.) ou à cause des bibliothèques (par exemple, erreur de mémoire, etc.). Si vous rencontrez une erreur, avant de la signaler, veuillez vous assurer que le calcul est correct, en vérifiant les données et les paramètres.",
   "DataLab-Web is about to execute the following Python plugin. Plugins run with full access to the in-browser Python runtime (Pyodide). Only proceed if you trust the source.": "DataLab-Web est sur le point d'exécuter l'extension Python suivante. Les extensions s'exécutent avec un accès complet à l'environnement Python du navigateur (Pyodide). Ne continuez que si vous faites confiance à la source.",
   "DataLab-Web is currently in beta — click for details": "DataLab-Web est actuellement en version bêta — cliquez pour plus de détails",
   "DataLab-Web is under active development and some features may still be incomplete or behave unexpectedly. If you run into an issue, please report it on the": "DataLab-Web est en développement actif et certaines fonctionnalités peuvent encore être incomplètes ou se comporter de manière inattendue. Si vous rencontrez un problème, veuillez le signaler sur le",
@@ -669,6 +673,7 @@
   "Plot results": "Tracer les résultats",
   "Plot results failed: {message}": "Échec du tracé des résultats : {message}",
   "Plot results obtained from previous analyses.": "Tracer les résultats obtenus lors des analyses précédentes.",
+  "Plugin action: {action}": "Action du plugin : {action}",
   "Plugin error": "Erreur d'extension",
   "Plugins": "Extensions",
   "point": "point",
@@ -894,6 +899,7 @@
   "That's the end of the tour. The demo objects we created will be cleared as soon as you close this dialog.": "C'est la fin de la visite. Les objets de démonstration que nous avons créés seront supprimés dès que vous fermerez cette boîte de dialogue.",
   "The": "Le",
   "The assistant wants to run the following mutating tool. Review the arguments and approve or reject.": "L'assistant souhaite exécuter l'outil suivant modifiant les données. Examinez les arguments et approuvez ou rejetez.",
+  "The following traceback may help to understand the problem:": "La trace d'appels suivante peut aider à comprendre le problème :",
   "The full user guide opens in a side drawer, and you can replay this tour any time from Help → Welcome.": "Le guide utilisateur complet s'ouvre dans un panneau latéral, et vous pouvez rejouer cette visite à tout moment depuis Aide → Bienvenue.",
   "The mock provider replays a scripted set of responses — used by tests and demos, never reaches out to the network.": "Le fournisseur fictif rejoue un ensemble de réponses scriptées — utilisé par les tests et les démonstrations, ne contacte jamais le réseau.",
   "Thinking…": "Réflexion…",

src/styles.css

@@ -2268,6 +2268,56 @@ input {
   font-size: 12px;
 }
 
+/* Processing error dialog (desktop WarningErrorMessageBox parity) */
+.processing-error-card {
+  width: 760px;
+  max-width: 92vw;
+}
+
+.processing-error-context p,
+.processing-error-tip p {
+  margin: 4px 0;
+  font-size: 12px;
+}
+
+.processing-error-traceback {
+  margin: 12px 0;
+}
+
+.processing-error-traceback-head {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 8px;
+  margin-bottom: 6px;
+  font-size: 12px;
+}
+
+.processing-error-traceback pre {
+  margin: 0;
+  max-height: 260px;
+  overflow: auto;
+  padding: 10px 12px;
+  background: var(--bg);
+  border: 1px solid var(--border);
+  border-radius: 4px;
+  font-family: "Cascadia Code", Consolas, "Courier New", monospace;
+  font-size: 12px;
+  line-height: 1.45;
+  white-space: pre;
+  user-select: text;
+  color: #f48771;
+}
+
+.processing-error-tip {
+  display: flex;
+  gap: 8px;
+  padding: 8px 10px;
+  background: rgba(127, 127, 127, 0.1);
+  border-left: 3px solid var(--accent);
+  border-radius: 4px;
+}
+
 /* Progress dialog */
 .progress-dialog {
   min-width: 420px;