🚓 fix error filtering

apps/demo-react/src/ConnectionStatusTray.tsx

@@ -1,26 +1,18 @@
 import { useState, useEffect } from 'react';
-import { ThebeEventData, ThebeEventType, EventSubject } from 'thebe-core';
+import { ThebeEventData } from 'thebe-core';
 import { useThebeServer } from 'thebe-react';
 
 export function ConnectionStatusTray() {
-  const { connecting, events } = useThebeServer();
-  const [subscribed, setSubscribed] = useState<boolean>(false);
+  const { connecting, subscribe, unsubAll } = useThebeServer();
   const [status, setStatus] = useState<ThebeEventData | null>(null);
 
   useEffect(() => {
-    if (!events || subscribed) return;
-    events?.on('status' as ThebeEventType, (event: any, data: ThebeEventData) => {
-      // report status events reelated to the server or session connection only
-      if (
-        [EventSubject.server, EventSubject.session, EventSubject.kernel].includes(
-          data.subject as EventSubject,
-        )
-      ) {
-        setStatus(data);
-      }
+    if (!subscribe) return;
+    subscribe((data: ThebeEventData) => {
+      setStatus(data);
     });
-    setSubscribed(true);
-  }, [events, subscribed]);
+    return unsubAll;
+  }, [subscribe, unsubAll]);
 
   return (
     <div className="mono not-prose max-w-[80%] m-auto min-h-[3em] border-[1px] border-blue-500 relative pb-1">

apps/demo-react/src/NotebookErrorTray.tsx

@@ -22,7 +22,9 @@ export function NotebookErrorTray() {
 
   return (
     <div className="mono not-prose max-w-[80%] m-auto min-h-[3em] border-[1px] border-red-500 relative text-red-500 mt-2">
-      <div className="absolute px-1 py-[1px] text-xs text-white bg-red-500">connection error</div>
+      <div className="absolute px-1 py-[1px] text-xs text-white bg-red-500">
+        notebook/cell error
+      </div>
       <details className="flex justify-center text-center mono" open>
         <summary>
           last status: {`[${errorEvent.subject}] ${errorEvent.status} ${errorEvent.id}`}

packages/react/src/ThebeServerProvider.tsx

@@ -61,12 +61,18 @@ export function ThebeServerProvider({
     [core, options],
   );
 
-  // register an error handler immedately on the config changing, thiis is done as a
+  // register an error handler immedately on the config changing, this is done as a
   // side effect so tht we can un-register on unmount
   useEffect(() => {
     if (!core || !thebeConfig) return;
     const handler = (evt: string, data: ThebeEventData) => {
-      setError(`${data.status} - ${data.message}`);
+      const subjects = [
+        core.EventSubject.server,
+        core.EventSubject.session,
+        core.EventSubject.kernel,
+      ];
+      if (data.subject && subjects.includes(data.subject) && data.id === server?.id)
+        setError(`${data.status} - ${data.message}`);
     };
     thebeConfig.events.on(core.ThebeEventType.error, handler);
     return () => thebeConfig.events.off(core.ThebeEventType.error, handler);