feat (ai/ui): improve error handling in useAssistant (#2112)

Co-authored-by: Samuel <samuelint@gmail.com>

Author: lgrammel

.changeset/wicked-trainers-confess.md

@@ -0,0 +1,7 @@
+---
+'@ai-sdk/svelte': patch
+'@ai-sdk/react': patch
+'ai': patch
+---
+
+feat (ai/ui): improve error handling in useAssistant

packages/core/svelte/use-assistant.ts

@@ -115,7 +115,7 @@ export function useAssistant({
     input.set('');
 
     try {
-      const result = await fetch(api, {
+      const response = await fetch(api, {
         method: 'POST',
         credentials,
         signal: abortController.signal,
@@ -131,13 +131,19 @@ export function useAssistant({
         }),
       });
 
-      if (result.body == null) {
+      if (!response.ok) {
+        throw new Error(
+          (await response.text()) ?? 'Failed to fetch the assistant response.',
+        );
+      }
+
+      if (response.body == null) {
         throw new Error('The response body is empty.');
       }
 
       // Read the streamed response data
       for await (const { type, value } of readDataStream(
-        result.body.getReader(),
+        response.body.getReader(),
       )) {
         switch (type) {
           case 'assistant_message': {

packages/react/src/use-assistant.ts

@@ -82,7 +82,7 @@ Abort the current request immediately, keep the generated tokens if any.
   /**
    * The error thrown during the assistant message processing, if any.
    */
-  error: undefined | unknown;
+  error: undefined | Error;
 };
 
 export function useAssistant({
@@ -140,7 +140,7 @@ export function useAssistant({
     try {
       abortControllerRef.current = abortController;
 
-      const result = await fetch(api, {
+      const response = await fetch(api, {
         method: 'POST',
         credentials,
         signal: abortController.signal,
@@ -156,12 +156,18 @@ export function useAssistant({
         }),
       });
 
-      if (result.body == null) {
+      if (!response.ok) {
+        throw new Error(
+          (await response.text()) ?? 'Failed to fetch the assistant response.',
+        );
+      }
+
+      if (response.body == null) {
         throw new Error('The response body is empty.');
       }
 
       for await (const { type, value } of readDataStream(
-        result.body.getReader(),
+        response.body.getReader(),
       )) {
         switch (type) {
           case 'assistant_message': {

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

@@ -2,6 +2,7 @@ import { formatStreamPart } from '@ai-sdk/ui-utils';
 import {
   mockFetchDataStream,
   mockFetchDataStreamWithGenerator,
+  mockFetchError,
 } from '@ai-sdk/ui-utils/test';
 import '@testing-library/jest-dom/vitest';
 import { cleanup, findByText, render, screen } from '@testing-library/react';
@@ -10,13 +11,14 @@ import { useAssistant } from './use-assistant';
 
 describe('stream data stream', () => {
   const TestComponent = () => {
-    const { status, messages, append } = useAssistant({
+    const { status, messages, error, append } = useAssistant({
       api: '/api/assistant',
     });
 
     return (
       <div>
         <div data-testid="status">{status}</div>
+        {error && <div data-testid="error">{error.toString()}</div>}
         {messages.map((m, idx) => (
           <div data-testid={`message-${idx}`} key={idx}>
             {m.role === 'user' ? 'User: ' : 'AI: '}
@@ -83,6 +85,17 @@ describe('stream data stream', () => {
     );
   });
 
+  it('should show error response', async () => {
+    mockFetchError({ statusCode: 500, errorMessage: 'Internal Error' });
+
+    await userEvent.click(screen.getByTestId('do-append'));
+
+    await screen.findByTestId('error');
+    expect(screen.getByTestId('error')).toHaveTextContent(
+      'Error: Internal Error',
+    );
+  });
+
   describe('loading state', () => {
     it('should show loading state', async () => {
       let finishGeneration: ((value?: unknown) => void) | undefined;

packages/svelte/src/use-assistant.ts

@@ -112,7 +112,7 @@ export function useAssistant({
     input.set('');
 
     try {
-      const result = await fetch(api, {
+      const response = await fetch(api, {
         method: 'POST',
         credentials,
         signal: abortController.signal,
@@ -128,13 +128,19 @@ export function useAssistant({
         }),
       });
 
-      if (result.body == null) {
+      if (!response.ok) {
+        throw new Error(
+          (await response.text()) ?? 'Failed to fetch the assistant response.',
+        );
+      }
+
+      if (response.body == null) {
         throw new Error('The response body is empty.');
       }
 
       // Read the streamed response data
       for await (const { type, value } of readDataStream(
-        result.body.getReader(),
+        response.body.getReader(),
       )) {
         switch (type) {
           case 'assistant_message': {

packages/ui-utils/src/call-chat-api.ts

@@ -56,7 +56,7 @@ export async function callChatApi({
   if (!response.ok) {
     restoreMessagesOnFailure();
     throw new Error(
-      (await response.text()) || 'Failed to fetch the chat response.',
+      (await response.text()) ?? 'Failed to fetch the chat response.',
     );
   }