Fix for 301 - early registering of catch in promise for KernelExecutor (#309)

* Fix for 301 - early registering of catch in promise for KernelExecutor

* 301 - Added OutputWithErrorHandle example

---------

Co-authored-by: Sergey Kadnikov <skadnikov@seeneco.ru>

Author: sok82

packages/react/src/examples/Output.tsx

@@ -4,18 +4,18 @@
  * MIT License
  */
 
-import { useEffect, useState } from 'react';
-import { createRoot } from 'react-dom/client';
 import { IOutput } from '@jupyterlab/nbformat';
 import { Box, Text } from '@primer/react';
-import { useOutputsStore } from './../components/output/OutputState';
-import { useJupyter } from '../jupyter/JupyterContext';
+import { useEffect, useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { KernelIndicator } from '../components/kernel/Kernelndicator';
+import { Output } from '../components/output/Output';
 import { Jupyter } from '../jupyter/Jupyter';
+import { useJupyter } from '../jupyter/JupyterContext';
 import { Kernel } from '../jupyter/kernel/Kernel';
 import { useKernelsStore } from '../jupyter/kernel/KernelState';
-import { KernelIndicator } from '../components/kernel/Kernelndicator';
 import { newUuid } from '../utils/Utils';
-import { Output } from '../components/output/Output';
+import { useOutputsStore } from './../components/output/OutputState';
 
 const SOURCE_ID_1 = 'output-id-1';
 const OUTPUTS_1: IOutput[] = [
@@ -62,6 +62,7 @@ const OutputWithoutEditor = () => {
     outputStore.getModel(SOURCE_ID_1)?.toJSON(),
     outputStore.getInput(SOURCE_ID_1),
   );
+
   return (
     <>
       <Text as="h1">Output without Code Editor</Text>
@@ -78,11 +79,13 @@ const OutputWithoutEditor = () => {
 const OutputWithEditor = () => {
   const { defaultKernel } = useJupyter();
   const outputStore = useOutputsStore();
+
   console.log(
     'Outputs 2',
     outputStore.getModel(SOURCE_ID_2)?.toJSON(),
     outputStore.getInput(SOURCE_ID_2),
   );
+
   return (
     <>
       <Text as="h1">Output with Code Editor</Text>

packages/react/src/examples/OutputWithErrorHandle.tsx

@@ -0,0 +1,60 @@
+/*
+ * Copyright (c) 2021-2023 Datalayer, Inc.
+ *
+ * MIT License
+ */
+
+import { IOutput } from '@jupyterlab/nbformat';
+import { Button, Text } from '@primer/react';
+import { useState } from 'react';
+import { createRoot } from 'react-dom/client';
+import { Output } from '../components/output/Output';
+import { useOutputsStore } from '../components/output/OutputState';
+import { Jupyter } from '../jupyter/Jupyter';
+import { useJupyter } from '../jupyter/JupyterContext';
+
+const SOURCE_ID = 'output-id-2';
+const SOURCE = 'fail';
+
+
+const OutputWithEditor = () => {
+  const { defaultKernel } = useJupyter();
+  const outputStore = useOutputsStore();
+  const [execTrigger, setExecTrigger] = useState(0);
+
+  console.log(
+    'Outputs',
+    outputStore.getModel(SOURCE_ID)?.toJSON(),
+    outputStore.getInput(SOURCE_ID),
+  );
+
+  const handleExecutionError = (err : any) => {
+    alert('Execution error - ' + err);
+  }
+
+  return (
+    <>
+      <Text as="h1">Output with Error Handling</Text>
+      <Button onClick={() => setExecTrigger(execTrigger => execTrigger+1)}>Execute 'fail' code</Button>
+      <Output
+        autoRun={false}
+        code={SOURCE}
+        id={SOURCE_ID} 
+        kernel={defaultKernel}
+        showEditor={false}
+        executeTrigger={execTrigger}
+        onCodeExecutionError={handleExecutionError}
+      />
+    </>
+  );
+};
+
+const div = document.createElement('div');
+document.body.appendChild(div);
+const root = createRoot(div);
+
+root.render(
+  <Jupyter>
+    <OutputWithEditor />
+  </Jupyter>
+);

packages/react/src/jupyter/kernel/KernelExecutor.ts

@@ -172,16 +172,6 @@ export class KernelExecutor {
     return this._executed.promise.then(() => {
       return;
     })
-    .catch(
-      (err: any) => {
-        if (this._onCodeExecutionError) {
-          this._onCodeExecutionError(err);
-        } 
-        else {
-          throw err;
-        }
-      }
-    );
   }
 
   /**
@@ -191,17 +181,6 @@ export class KernelExecutor {
     return this._executed.promise.then(model => {
       return outputsAsString(model.toJSON());
     })
-    .catch(
-      (err: any) => {
-        if (this._onCodeExecutionError) {
-          this._onCodeExecutionError(err);
-          return "";
-        } 
-        else {
-          throw err;
-        }
-      }
-    );
   }
 
   /**
@@ -305,6 +284,11 @@ export class KernelExecutor {
         case 'error':
           {
             const { ename, evalue, traceback } = content as KernelMessage.IReplyErrorContent;
+            if (this._onCodeExecutionError) {
+              this._executed.promise.catch(
+                (err) => this._onCodeExecutionError && this._onCodeExecutionError(err)
+              )
+            }
             this._executed.reject(`${ename}: ${evalue}\n${(traceback ?? []).join('\n')}`);
           }
           break;

packages/react/webpack.config.js

@@ -39,7 +39,7 @@ const ENTRY =
   // './src/examples/KernelExecutor';
   // './src/examples/Lumino';
   // './src/examples/Matplotlib';
-  './src/examples/Notebook';
+   './src/examples/Notebook';
   // './src/examples/NotebookUrl';
   // './src/examples/NotebookColorMode';
   // './src/examples/NotebookKernelChange';
@@ -54,6 +54,7 @@ const ENTRY =
   // './src/examples/NotebookThemeColorMode';
   // './src/examples/ObservableHQ';
   // './src/examples/Output';
+  // './src/examples/OutputWithErrorHandle';
   // './src/examples/Outputs';
   // './src/examples/Plotly';
   // './src/examples/RunningSessions';