`useChat` "An error occurred"

useChat "An error occurred"

useChat를 쓰다가 "An error occurred" 오류를 만날 때가 있어요. 기본적으로 에러가 가려져 있기 때문인데, 해결 방법을 정리해 드릴게요.

출처: 문서

본문

문제 (Issue)

useChat를 사용할 때 "An error occurred" 오류가 발생합니다.

배경 (Background)

streamText의 오류 메시지는 toUIMessageStream을 사용할 때 기본적으로 보안상의 이유(secure-by-default)로 가려집니다. 이는 민감한 정보가 클라이언트로 새어 나가는 것을 방지하기 위함입니다.

해결책 (Solution)

오류 상세 정보를 클라이언트로 전달하거나 오류를 로깅하려면 toUIMessageStream을 호출할 때 onError 함수를 사용하세요.

export function errorHandler(error: unknown) {
  if (error == null) {
    return 'unknown error';
  }

  if (typeof error === 'string') {
    return error;
  }

  if (error instanceof Error) {
    return error.message;
  }

  return JSON.stringify(error);
}

const result = streamText({
  // ...
});

return createUIMessageStreamResponse({
  stream: toUIMessageStream({
    stream: result.stream,
    onError: errorHandler,
  }),
});

createDataStreamResponse를 사용한다면 toDataStreamResponse를 호출할 때 onError 함수를 사용할 수 있습니다.

const response = createDataStreamResponse({
  // ...
  async execute(dataStream) {
    // ...
  },
  onError: errorHandler,
});

더 알아보기 (Learn more)