feat (ai/ui): add onError handler to useObject (#2207)

Co-authored-by: Paul Chavez <[email protected]>

Author: lgrammel

.changeset/beige-otters-give.md

@@ -0,0 +1,5 @@
+---
+'@ai-sdk/react': patch
+---
+
+feat (ai/ui): add onError handler to useObject

content/docs/07-reference/ai-sdk-ui/03-use-object.mdx

@@ -74,6 +74,13 @@ export default function Page() {
       description:
         'Optional. A custom fetch function to be used for the API call. Defaults to the global fetch function.',
     },
+    {
+      name: 'onError',
+      type: '(error: Error) => void',
+      optional: true,
+      description:
+        'Optional. Callback function to be called when an error is encountered.',
+    },
   ]}
 />
 

packages/react/src/use-object.ts

@@ -40,6 +40,11 @@ Custom fetch implementation. You can use it as a middleware to intercept request
 or to provide a custom fetch implementation for e.g. testing.
     */
   fetch?: FetchFunction;
+
+  /**
+   * Callback function to be called when an error is encountered.
+   */
+  onError?: (error: Error) => void;
 };
 
 export type Experimental_UseObjectHelpers<RESULT, INPUT> = {
@@ -80,6 +85,7 @@ function useObject<RESULT, INPUT = any>({
   schema, // required, in the future we will use it for validation
   initialValue,
   fetch,
+  onError,
 }: Experimental_UseObjectOptions<RESULT>): Experimental_UseObjectHelpers<
   RESULT,
   INPUT
@@ -167,6 +173,10 @@ function useObject<RESULT, INPUT = any>({
         return;
       }
 
+      if (onError && error instanceof Error) {
+        onError(error);
+      }
+
       setError(error);
     }
   };

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

@@ -9,10 +9,15 @@ import { z } from 'zod';
 import { experimental_useObject } from './use-object';
 
 describe('text stream', () => {
+  let onErrorResult: Error | undefined;
+
   const TestComponent = () => {
     const { object, error, submit, isLoading, stop } = experimental_useObject({
       api: '/api/use-object',
       schema: z.object({ content: z.string() }),
+      onError(error) {
+        onErrorResult = error;
+      },
     });
 
     return (
@@ -35,6 +40,7 @@ describe('text stream', () => {
 
   beforeEach(() => {
     render(<TestComponent />);
+    onErrorResult = undefined;
   });
 
   afterEach(() => {
@@ -68,6 +74,7 @@ describe('text stream', () => {
       it('should not have an error', async () => {
         await screen.findByTestId('error');
         expect(screen.getByTestId('error')).toBeEmptyDOMElement();
+        expect(onErrorResult).toBeUndefined();
       });
     },
   );
@@ -155,6 +162,7 @@ describe('text stream', () => {
 
           await screen.findByTestId('error');
           expect(screen.getByTestId('error')).toHaveTextContent('Not found');
+          expect(onErrorResult).toBeInstanceOf(Error);
         },
       ),
     );