@ssv-lab错误处理
错误返回接口定义
错误返回包含 HTTP 错误和 AI 业务错误，HTTP 错误一定会返回 statusCode + message，业务错误会返回 message + data
message：具体的错误信息statusCode：HTTP 网络错误的状态码-404/500/502cause：代码错误的原因位置data：与错误相关的任何原始数据
typescript
interface AIErrorOptions {
message: string; // 具体的错误信息，包括 HTTP 错误信息 + 内部业务错误信息
statusCode?: number; // 网络错误的状态码 404/500/502
cause?: unknown; // 错误的原始原因
data?: unknown; // 错误的原始数据
}
举几个错误的例子。
请求的接口 404 错误
请求到 AI 接口后业务返回错误
响应拦截器中的业务错误配置
当我们接入 SDK 的时候，需要配置 responseInterceptor，在 responseInterceptor 中我们需要自定义当前业务的错误配置。
例如我们接入了 LKE，当 LKE 内部业务报错的时候，会返回 error 对象，error 对象中包括 message + code，业务错误中一般会返回 code，则我们可以直接使用。如果你接入的 API 的业务错误返回没有 message，需要指定 message = error.msg。
typescript
responseInterceptor(res) {
if (!res) return res;
try {
const messageID = res.message_id;
if (res.type === 'reply') {
let content = res.payload?.content;
return {
...res.payload,
messageID,
isFromSelf: res.payload?.is_from_self,
content,
};
}
if (res.type === 'error') {
return {
messageID,
error: {
...res.error,
message: res.error.message
},
};
}
return res;
} catch (e) {
console.error("LKE 响应处理错误:", e);
}
return res;
}
错误展示
useChat Hook 会返回一个错误对象（如果是小程序或者 Vue2，则直接使用 data 中的 error 对象），您可以使用该对象在 UI 中呈现错误，例如使用该错误对象显示错误消息、禁用提交按钮或显示重试按钮。
全局错误展示
typescript
const { messages, error } = useChat({
api: {
chatEndpoint: 'https://wss.lke.cloud.tencent.com/v1/qbot/chat/sse',
},
mode: 'stream',
streamFormat: 'chunked',
plugins: [new LKEPlugin({ filterSerialNumber: true })],
});
return (
<div>
{/* 全局错误提示 */}
{error && (
<div className="error-banner">
<h2>错误提示: {error.message}</h2>
</div>
)}
{/* 消息列表 */}
<div>
{messages.map((msg) => (
<div key={msg.id}>
<div>{msg.content}</div>
</div>
))}
</div>
</div>
);
消息级别错误展示
使用 useChat 的时候也可以直接使用每个 message 中的 error 对象来进行展示：
typescript
const { messages } = useChat({
api: {
chatEndpoint: 'https://wss.lke.cloud.tencent.com/v1/qbot/chat/sse',
},
mode: 'stream',
streamFormat: 'chunked',
plugins: [new LKEPlugin({ filterSerialNumber: true })],
});
return (
<div>
{messages.map((msg) => (
<div key={msg.id}>
<div>{msg.content}</div>
{/* 单个消息的错误提示 */}
{msg.error && (
<div className="message-error">错误: {msg.error.message}</div>
)}
</div>
))}
</div>
);