fix (ai/react): stop() on useObject does not throw error and clear isLoading (#2132)

Author: lgrammel

.changeset/empty-ravens-melt.md

@@ -0,0 +1,6 @@
+---
+'@ai-sdk/react': patch
+'ai': patch
+---
+
+fix (ai/react): stop() on useObject does not throw error and clears isLoading

examples/next-openai/app/use-object/page.tsx

@@ -4,22 +4,36 @@ import { experimental_useObject as useObject } from 'ai/react';
 import { notificationSchema } from '../api/use-object/schema';
 
 export default function Page() {
-  const { setInput, object } = useObject({
+  const { submit, isLoading, object, stop } = useObject({
     api: '/api/use-object',
     schema: notificationSchema,
   });
 
   return (
     <div className="flex flex-col items-center min-h-screen p-4 m-4">
       <button
-        className="px-4 py-2 mt-4 text-white bg-blue-500 rounded-md"
+        className="px-4 py-2 mt-4 text-white bg-blue-500 rounded-md disabled:bg-blue-200"
         onClick={async () => {
-          setInput('Messages during finals week.');
+          submit('Messages during finals week.');
         }}
+        disabled={isLoading}
       >
         Generate notifications
       </button>
 
+      {isLoading && (
+        <div className="mt-4 text-gray-500">
+          <div>Loading...</div>
+          <button
+            type="button"
+            className="px-4 py-2 mt-4 text-blue-500 border border-blue-500 rounded-md"
+            onClick={() => stop()}
+          >
+            STOP
+          </button>
+        </div>
+      )}
+
       <div className="flex flex-col gap-4 mt-4">
         {object?.notifications?.map((notification, index) => (
           <div
@@ -28,7 +42,9 @@ export default function Page() {
           >
             <div className="flex-1 space-y-1">
               <div className="flex items-center justify-between">
-                <p className="font-medium">{notification?.name}</p>
+                <p className="font-medium dark:text-white">
+                  {notification?.name}
+                </p>
                 <p className="text-sm text-gray-500 dark:text-gray-400">
                   {notification?.minutesAgo}
                   {notification?.minutesAgo != null ? ' minutes ago' : ''}

packages/react/src/use-object.ts

@@ -1,3 +1,4 @@
+import { isAbortError } from '@ai-sdk/provider-utils';
 import {
   DeepPartial,
   FetchFunction,
@@ -101,13 +102,19 @@ function useObject<RESULT, INPUT = any>({
   const abortControllerRef = useRef<AbortController | null>(null);
 
   const stop = useCallback(() => {
-    abortControllerRef.current?.abort();
-    abortControllerRef.current = null;
+    try {
+      abortControllerRef.current?.abort();
+    } catch (ignored) {
+    } finally {
+      setIsLoading(false);
+      abortControllerRef.current = null;
+    }
   }, []);
 
   const submit = async (input: INPUT) => {
     try {
       setIsLoading(true);
+      setError(undefined);
 
       const abortController = new AbortController();
       abortControllerRef.current = abortController;
@@ -133,7 +140,7 @@ function useObject<RESULT, INPUT = any>({
       let accumulatedText = '';
       let latestObject: DeepPartial<RESULT> | undefined = undefined;
 
-      response.body.pipeThrough(new TextDecoderStream()).pipeTo(
+      await response.body.pipeThrough(new TextDecoderStream()).pipeTo(
         new WritableStream<string>({
           write(chunk) {
             accumulatedText += chunk;
@@ -155,9 +162,11 @@ function useObject<RESULT, INPUT = any>({
           },
         }),
       );
-
-      setError(undefined);
     } catch (error) {
+      if (isAbortError(error)) {
+        return;
+      }
+
       setError(error);
     }
   };

packages/react/src/use-object.ui.test.tsx

@@ -9,7 +9,7 @@ import { experimental_useObject } from './use-object';
 
 describe('text stream', () => {
   const TestComponent = () => {
-    const { object, error, submit, isLoading } = experimental_useObject({
+    const { object, error, submit, isLoading, stop } = experimental_useObject({
       api: '/api/use-object',
       schema: z.object({ content: z.string() }),
     });
@@ -25,6 +25,9 @@ describe('text stream', () => {
         >
           Generate
         </button>
+        <button data-testid="stop-button" onClick={stop}>
+          Stop
+        </button>
       </div>
     );
   };
@@ -79,7 +82,7 @@ describe('text stream', () => {
       });
 
       server = setupServer(
-        http.post('https://example.com/api/use-object', ({ request }) => {
+        http.post('/api/use-object', ({ request }) => {
           return new HttpResponse(stream.pipeThrough(new TextEncoderStream()), {
             status: 200,
             headers: {
@@ -101,7 +104,7 @@ describe('text stream', () => {
     it('should be true when loading', async () => {
       streamController.enqueue('{"content": ');
 
-      userEvent.click(screen.getByTestId('submit-button'));
+      await userEvent.click(screen.getByTestId('submit-button'));
 
       // wait for element "loading" to have text content "true":
       await waitFor(() => {
@@ -112,9 +115,72 @@ describe('text stream', () => {
       streamController.close();
 
       // wait for element "loading" to have text content "false":
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+    });
+  });
+
+  describe('stop', async () => {
+    let streamController: ReadableStreamDefaultController<string>;
+    let server: SetupServer;
+
+    beforeEach(() => {
+      const stream = new ReadableStream({
+        start(controller) {
+          streamController = controller;
+        },
+      });
+
+      server = setupServer(
+        http.post('/api/use-object', ({ request }) => {
+          return new HttpResponse(stream.pipeThrough(new TextEncoderStream()), {
+            status: 200,
+            headers: {
+              'Content-Type': 'text/event-stream',
+              'Cache-Control': 'no-cache',
+              Connection: 'keep-alive',
+            },
+          });
+        }),
+      );
+
+      server.listen();
+    });
+
+    afterEach(() => {
+      server.close();
+    });
+
+    it('should be true when loading', async () => {
+      streamController.enqueue('{"content": "h');
+
+      userEvent.click(screen.getByTestId('submit-button'));
+
+      // wait for element "loading" and "object" to have text content:
       await waitFor(() => {
         expect(screen.getByTestId('loading')).toHaveTextContent('true');
       });
+      await waitFor(() => {
+        expect(screen.getByTestId('object')).toHaveTextContent(
+          '{"content":"h"}',
+        );
+      });
+
+      // click stop button:
+      await userEvent.click(screen.getByTestId('stop-button'));
+
+      // wait for element "loading" to have text content "false":
+      await waitFor(() => {
+        expect(screen.getByTestId('loading')).toHaveTextContent('false');
+      });
+
+      // this should not be consumed any more:
+      streamController.enqueue('ello, world!"}');
+      streamController.close();
+
+      // should only show start of object:
+      expect(screen.getByTestId('object')).toHaveTextContent('{"content":"h"}');
     });
   });