ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

AI SDK useChat 报 “Failed to parse stream string. Invalid code“ 怎么排查

AI SDK useChat 报 “Failed to parse stream string. Invalid code“ 怎么排查 AI SDK useChat 报 Failed to parse stream string. Invalid code 怎么排查【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai在 React 前端用 AI SDK 的useChat或useCompletion做流式对话时如果前端抛出Failed to parse stream string. Invalid code说明客户端在解析后端返回的流时失败了。这个错误出现在使用 AI SDK3.0.20或更新版本的场景中根源是前后端双方协商的流协议不一致。本文按官方排障文档 useChat Failed to Parse Stream 给出判断路径和修复方式。错误背景3.0.20起的流协议切换AI SDK 在版本3.0.20切换到了 stream data protocol数据流协议。useChat和useCompletion默认按数据流协议解析期待的是支持 data parts、tool calls 等结构化内容的 stream parts。如果实际到达前端的是纯文本流解析就会失败抛出上述错误。按排障文档这个错误由以下三种原因引起后端使用了旧版本的 AI SDK输出的流不符合新的数据流协议通过自定义 provider 提供了纯文本流text stream直接使用了 LangChain 的原始流结果raw LangChain stream result。因此排查的第一步不是改前端代码而是确认你的后端实际输出的是哪种流。判断后端输出的是哪种流对照上面三类原因做判断如果你的后端 API 是用旧版本 AI SDK 写的或者是一个非 AI SDK 的自定义后端输出的是逐块纯文本那么前端需要切换到文本流解析方案 A如果你的后端应该走 AI SDK 的数据流协议但版本过旧或实现不完整则应修复/升级后端让其按数据流协议输出方案 B。两种方案对应不同的代码位置不要混用前端只改streamProtocol解决不了后端输出残缺数据流的问题反过来后端输出纯文本时前端保持数据流解析也只会持续报错。方案 A前端切换到文本流解析streamProtocol: text适用于后端确定输出纯文本流的情况自定义 provider、LangChain 原始流等。排障文档给出的解法是把useChat/useCompletion切换到 raw text stream 处理设置streamProtocol参数为textconst { messages, append } useChat({ streamProtocol: text });关于这个参数参考文档中有几点说明streamProtocol的类型是text | data默认值为data设为text后流会被当作文本流处理无论哪种协议useCompletion只通过completion字段暴露文本内容服务端发出的非文本 parts如data-*parts会被忽略按 Stream Protocols 的说明文本流只支持基础文本数据。如果需要流式传输 tool calls 等其他类型数据必须使用数据流。另外注意版本差异当前useChat参考文档 说明useChatAPI 在 AI SDK 5.0 已改为 transport 架构参数结构不再是streamProtocol选项。Stream Protocols 文档中展示的文本流写法是通过 transport 启用import { useChat } from ai-sdk/react; import { TextStreamChatTransport } from ai; const { messages, sendMessage } useChat({ transport: new TextStreamChatTransport({ api: /api/chat }), });请根据你安装的 AI SDK 版本采用对应写法3.0.20时代的streamProtocol选项或 5.0 的TextStreamChatTransport。两种写法的意图相同都是让前端按文本流解析。方案 B让后端按数据流协议输出如果后端本来就应该走数据流协议修复点在后端。数据流协议在useChat和useCompletion前端默认使用后端的做法是把streamText的结果流传给toUIMessageStream并用createUIMessageStreamResponse返回import { convertToModelMessages, createUIMessageStreamResponse, streamText, toUIMessageStream, UIMessage, } from ai; __PROVIDER_IMPORT__; // Allow streaming responses up to 30 seconds export const maxDuration 30; export async function POST(req: Request) { const { messages }: { messages: UIMessage[] } await req.json(); const result streamText({ model: __MODEL__, messages: await convertToModelMessages(messages), }); return createUIMessageStreamResponse({ stream: toUIMessageStream({ stream: result.stream }), }); }以上为 Stream Protocols 文档中的 Next.js 示例其中__PROVIDER_IMPORT__与__MODEL__是文档占位符分别替换为你自己 provider 包的导入语句和所用模型例如各 provider 包导出的模型实例。如果是自研后端非 AI SDK 生成的响应Stream Protocols 文档还要求提供数据流时必须把响应头x-vercel-ai-ui-message-stream设置为v1。反过来如果选择方案 A后端对应的文本流写法是把streamText结果的stream传给toTextStream并用createTextStreamResponse返回return createTextStreamResponse({ stream: toTextStream({ stream: result.stream }), });验证修复是否生效useChat的返回值包含statussubmitted | streaming | ready | error与error字段其中status为error表示请求失败error持有对应的 Error 对象。修改后重新发消息status不应再停留在errormessages应随流逐步更新按 Stream Protocols 文档数据流以data: [DONE]标记结束可在网络响应中确认流是完整结束而非中途断开注意useCompletion只支持text和data两种流的 parts如果你的场景还需要 tool calls 等能力应回到useChat 数据流。限制文本流streamProtocol: text或TextStreamChatTransport只支持基础文本无法承载 tool calls、data parts需要这些能力时必须使用数据流协议排障文档针对的是3.0.20及更新版本在 5.0 中useChat的选项已改为 transport 架构两处文档的写法请对照自己所装版本采用不要混用streamProtocol只解决“前端如何解析”后端输出的流格式本身不合规例如旧版本 AI SDK 生成的残缺数据流仍需按方案 B 在后端修复。【免费下载链接】aiThe AI Toolkit for TypeScript. From the creators of Next.js, the AI SDK is a free open-source library for building AI-powered applications and agents项目地址: https://gitcode.com/GitHub_Trending/ai/ai创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表