📄 ai-sdk/docs/ai-sdk-ui/error-handling
File: error-handling.md | Updated: 11/15/2025
Source: https://ai-sdk.dev/docs/ai-sdk-ui/error-handling
Menu
v5 (Latest)
AI SDK 5.x
Model Context Protocol (MCP) Tools
Copy markdown
============================================================================================================
The AI SDK shows warnings when something might not work as expected. These warnings help you fix problems before they cause errors.
When Warnings Appear
Warnings are shown in the browser console when:
- Unsupported settings: You use a setting that the AI model doesn't support
- Unsupported tools: You use a tool that the AI model can't use
- Other issues: The AI model reports other problems
Warning Messages
All warnings start with "AI SDK Warning:" so you can easily find them. For example:
AI SDK Warning: The "temperature" setting is not supported by this modelAI SDK Warning: The tool "calculator" is not supported by this model
Turning Off Warnings
By default, warnings are shown in the console. You can control this behavior:
Turn Off All Warnings
Set a global variable to turn off warnings completely:
globalThis.AI_SDK_LOG_WARNINGS = false;
Custom Warning Handler
You can also provide your own function to handle warnings:
globalThis.AI_SDK_LOG_WARNINGS = warnings => { // Handle warnings your own way warnings.forEach(warning => { // Your custom logic here console.log('Custom warning:', warning); });};
Custom warning functions are experimental and can change in patch releases without notice.
Error Helper Object
Each AI SDK UI hook also returns an error object that you can use to render the error in your UI. You can use the error object to show an error message, disable the submit button, or show a retry button.
We recommend showing a generic error message to the user, such as "Something went wrong." This is a good practice to avoid leaking information from the server.
'use client';
import { useChat } from '@ai-sdk/react';import { useState } from 'react';
export default function Chat() { const [input, setInput] = useState(''); const { messages, sendMessage, error, regenerate } = useChat();
const handleSubmit = (e: React.FormEvent) => { e.preventDefault(); sendMessage({ text: input }); setInput(''); };
return ( <div> {messages.map(m => ( <div key={m.id}> {m.role}:{' '} {m.parts .filter(part => part.type === 'text') .map(part => part.text) .join('')} </div> ))}
{error && ( <> <div>An error occurred.</div> <button type="button" onClick={() => regenerate()}> Retry </button> </> )}
<form onSubmit={handleSubmit}> <input value={input} onChange={e => setInput(e.target.value)} disabled={error != null} /> </form> </div> );}
Alternative: replace last message
Alternatively you can write a custom submit handler that replaces the last message when an error is present.
'use client';
import { useChat } from '@ai-sdk/react';import { useState } from 'react';
export default function Chat() { const [input, setInput] = useState(''); const { sendMessage, error, messages, setMessages } = useChat();
function customSubmit(event: React.FormEvent<HTMLFormElement>) { event.preventDefault();
if (error != null) { setMessages(messages.slice(0, -1)); // remove last message }
sendMessage({ text: input }); setInput(''); }
return ( <div> {messages.map(m => ( <div key={m.id}> {m.role}:{' '} {m.parts .filter(part => part.type === 'text') .map(part => part.text) .join('')} </div> ))}
{error && <div>An error occurred.</div>}
<form onSubmit={customSubmit}> <input value={input} onChange={e => setInput(e.target.value)} /> </form> </div> );}
Error Handling Callback
Errors can be processed by passing an onError
callback function as an option to the useChat
or useCompletion
hooks. The callback function receives an error object as an argument.
import { useChat } from '@ai-sdk/react';
export default function Page() { const { /* ... */ } = useChat({ // handle error: onError: error => { console.error(error); }, });}
Injecting Errors for Testing
You might want to create errors for testing. You can easily do so by throwing an error in your route handler:
export async function POST(req: Request) { throw new Error('This is a test error');}
On this page
Alternative: replace last message
Deploy and Scale AI Apps with Vercel.
Vercel delivers the infrastructure and developer experience you need to ship reliable AI-powered applications at scale.
Trusted by industry leaders:
- OpenAI
- Photoroom
