fix (ai/react): useObject error handling (#2877)

Author: lgrammel

.changeset/strong-nails-fold.md

@@ -0,0 +1,5 @@
+---
+'@ai-sdk/react': patch
+---
+
+fix (ai/react): useObject error handling

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

@@ -4,7 +4,7 @@ import { experimental_useObject as useObject } from 'ai/react';
 import { notificationSchema } from '../api/use-object/schema';
 
 export default function Page() {
-  const { submit, isLoading, object, stop } = useObject({
+  const { submit, isLoading, object, stop, error } = useObject({
     api: '/api/use-object',
     schema: notificationSchema,
   });
@@ -21,6 +21,12 @@ export default function Page() {
         Generate notifications
       </button>
 
+      {error && (
+        <div className="mt-4 text-red-500">
+          An error occurred. {error.message}
+        </div>
+      )}
+
       {isLoading && (
         <div className="mt-4 text-gray-500">
           <div>Loading...</div>

packages/react/src/use-object.ts

@@ -87,7 +87,7 @@ export type Experimental_UseObjectHelpers<RESULT, INPUT> = {
   /**
    * The error object of the API request if any.
    */
-  error: undefined | unknown;
+  error: Error | undefined;
 
   /**
    * Flag that indicates whether an API request is in progress.
@@ -123,7 +123,7 @@ function useObject<RESULT, INPUT = any>({
     { fallbackData: initialValue },
   );
 
-  const [error, setError] = useState<undefined | unknown>(undefined);
+  const [error, setError] = useState<undefined | Error>(undefined);
   const [isLoading, setIsLoading] = useState(false);
 
   // Abort controller to cancel the current API call.
@@ -212,7 +212,8 @@ function useObject<RESULT, INPUT = any>({
         onError(error);
       }
 
-      setError(error);
+      setIsLoading(false);
+      setError(error instanceof Error ? error : new Error(String(error)));
     }
   };
 

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

@@ -173,6 +173,7 @@ describe('text stream', () => {
           await screen.findByTestId('error');
           expect(screen.getByTestId('error')).toHaveTextContent('Not found');
           expect(onErrorResult).toBeInstanceOf(Error);
+          expect(screen.getByTestId('loading')).toHaveTextContent('false');
         },
       ),
     );