如何验证Vercel AI中useCompletion的onFinish函数正常运行？

针对你遇到的completion能正常渲染但onFinish里的日志不输出的问题，可以按以下步骤排查验证：

一、先确认onFinish本身是否可正常执行 #

1. 替换日志为更直观的提示 #

把console.log换成弹窗或页面可见元素，避免因控制台未打开、日志被过滤等情况误判：

onFinish: (input: string, completion: string) => {
  alert(`onFinish已触发！输入：${input}，结果：${completion}`);
  // 或者直接在页面插入可见提示
  document.body.insertAdjacentHTML('beforeend', '<p style="color:red; font-weight:bold;">onFinish执行成功</p>');
}

2. 给回调加错误捕获 #

有可能是console.log内部报错（比如变量类型异常）导致回调中断，包裹try-catch排查：

onFinish: (input: string, completion: string) => {
  try {
    console.log(`input: ${input}, completion: ${completion}`);
    console.log("onFinish回调执行完成");
  } catch (e) {
    console.error("onFinish执行出错：", e);
  }
}

3. 手动调用onFinish测试 #

直接在组件里加测试按钮，手动触发回调，验证其本身逻辑是否正常：

// 在组件JSX中添加测试按钮
<button onClick={() => {
  const testInput = "测试输入内容";
  const testCompletion = "测试生成结果";
  // 直接调用onFinish函数
  const testOnFinish = (input: string, completion: string) => {
    console.log(`测试onFinish：input=${input}, completion=${completion}`);
  };
  testOnFinish(testInput, testCompletion);
}}>测试onFinish回调</button>

如果手动调用能正常输出日志，说明onFinish本身没问题，问题出在useCompletion hook的触发时机上。

二、排查useCompletion的触发逻辑 #

1. 检查请求的完成状态 #

打开浏览器开发者工具（F12）的Network标签，查看/api/generate2请求：

• 确认请求是否完全完成（状态码200，无中断、无报错）
• 如果是流式返回，检查最后一个响应chunk是否正常返回，hook是否正确识别了流结束的信号
• 验证响应格式是否符合useCompletion的预期，是否存在导致hook认为请求未完成的情况

2. 查看useCompletion的源码实现 #

找到useCompletion hook的定义代码，确认它触发onFinish的条件：

• 是否仅在请求无错误、完全结束时才调用？
• 是否在流式响应的所有chunk处理完毕后才触发？
• 是否有错误捕获逻辑，导致请求出错时跳过onFinish？
  比如部分流式返回的hook，会先渲染已接收的内容，但如果请求中途报错，就不会触发onFinish，但已渲染的内容会保留。

内容的提问来源于stack exchange，提问作者aerin