feat: handle stream errors in ExamplePage

Demonstrates how to use grafana/grafana-experimental#86
to handle errors occurring in a stream.

src/extensions/panelExplainer.tsx

@@ -46,7 +46,10 @@ const ExplainPanelModal = ({ context }: ExplainPanelModalProps) => {
       // Accumulate the stream chunks into a single string.
       .pipe(llms.openai.accumulateContent())
       // Subscribe to the stream and update the state for each returned value.
-      .subscribe(setStreamState);
+      .subscribe({
+        next: setStreamState,
+        error: console.error,
+      });
     return { enabled: true };
   });
   if (state.loading || streamState === '') {

src/pages/ExamplePage.tsx

@@ -13,6 +13,7 @@ export function ExamplePage() {
   const [message, setMessage] = useState('');
   // The latest reply from the LLM.
   const [reply, setReply] = useState('');
+  const [streamError, setStreamError] = useState('');
 
   const [useStream, setUseStream] = useState(false);
 
@@ -70,7 +71,10 @@ export function ExamplePage() {
       // Subscribe to the stream and update the state for each returned value.
       return {
         enabled,
-        stream: stream.subscribe(setReply),
+        stream: stream.subscribe({
+          next: setReply,
+          error: (e) => setStreamError(String(e)),
+        }),
       };
     }
   }, [message]);
@@ -96,6 +100,7 @@ export function ExamplePage() {
           <div>{loading ? <Spinner /> : reply}</div>
           <div>{started ? "Response is started" : "Response is not started"}</div>
           <div>{finished ? "Response is finished" : "Response is not finished"}</div>
+          {streamError && <div>Error: {streamError}</div>}
         </>
       ) : (
         <div>LLM plugin not enabled.</div>