TL;DR: LLM могут генерировать некорректный JSON, что приводит к крашу React UI. Использование специализированного <AIBoundary /> позволяет изолировать ошибки, сохранить контекст приложения и предоставить пользователю возможность восстановления.
Введение: Контекст и актуальность
Современные UI, основанные на генеративных моделях (Generative UI), такие как чат-интерфейсы или инструменты для визуализации данных, становятся всё более популярными благодаря библиотекам вроде Vercel AI SDK. Однако LLM (Large Language Models) — это не детерминированные системы. Они могут генерировать некорректный JSON, например, забыть кавычку или вставить Markdown-блоки вместо чистого объекта. Когда такой JSON попадает в React-компонент, он вызывает синхронную ошибку парсинга, что приводит к “Белому экрану смерти” (WSOD).
Проблема усугубляется тем, что стандартные инструменты React, такие как <ErrorBoundary>, не подходят для обработки таких ошибок, так как они могут привести к полному размонтированию дерева компонентов, включая важный контекст (например, историю чата).
Основная часть: Почему стандартные инструменты не работают
Обычно в React для обработки ошибок используется <ErrorBoundary>. Но в случае с Generative UI это неэффективно. Рассмотрим пример:
function ChatMessage({ toolInvocation }) {
return (
<div>
<FinancialChart data={toolInvocation.args} />
</div>
);
}
Если toolInvocation.args содержит некорректный JSON, компонент FinancialChart выбросит ошибку, например, TypeError: undefined is not a function. Если выше по дереву находится <ErrorBoundary>, React размонтирует всё дерево, включая историю чата. Это неприемлемо с точки зрения UX.
Практическое решение: Использование <AIBoundary />
Для решения этой проблемы был разработан <AIBoundary /> — компонент, который создаёт изолированную зону вокруг компонентов, работающих с LLM. Если LLM генерирует некорректный JSON, <AIBoundary /> перехватывает ошибку, сохраняет остальную часть приложения и предоставляет возможность восстановления.
Установка и использование:
- Установите пакет:
npm install @cognicatch/react
- Оберните компонент, работающий с LLM:
import { AIBoundary } from '@cognicatch/react';
import { FinancialChart } from './components/FinancialChart';
export function ChatMessage({ toolInvocation }) {
return (
<AIBoundary
mode="manual"
showRawData={true}
rawPayload={toolInvocation.args}
onRecover={() => triggerRetryInChatStream()}
>
<FinancialChart data={toolInvocation.args} />
</AIBoundary>
);
}
Преимущества <AIBoundary />:
-
Изоляция ошибок: Если компонент выбросит ошибку из-за некорректного JSON, она будет изолирована в пределах
<AIBoundary />. Родительские компоненты (например, окно чата) останутся нетронутыми. -
Контекстуальный fallback: Вместо стандартного сообщения об ошибке пользователь увидит информативное сообщение, адаптированное под конкретный сценарий.
-
Восстановление: Пользователь может увидеть некорректные данные (
rawPayload) и попытаться повторить запрос к LLM черезonRecover.
Расширенные возможности: Режим Auto Mode
<AIBoundary /> поддерживает два режима:
- Manual Mode: Бесплатный режим, который требует ручной настройки. Он изолирует ошибки и предоставляет возможность восстановления.
- Auto Mode: Платный режим, который автоматически обрабатывает ошибки, переводит сообщения на язык пользователя и красиво форматирует некорректный JSON.
Для активации Auto Mode просто установите mode="auto":
<AIBoundary mode="auto" />
Заключение
LLM — это мощный инструмент, но их недетерминированная природа может привести к крашу UI. Использование специализированных boundary, таких как <AIBoundary />, позволяет изолировать ошибки, сохранить контекст приложения и предоставить пользователю возможность восстановления. Это делает ваше приложение более устойчивым и улучшает пользовательский опыт.
Если вы устали от постоянных крашей из-за некорректных LLM-ответов, попробуйте <AIBoundary />. Это open-source решение, которое легко интегрируется в ваш проект и работает из коробки.
Happy (and safe) prompting! 🚀
Попробуй сам: Vercel — Edge Functions и serverless деплой.