Chat Stack Trace

Сворачиваемая ошибка с разобранным Node-style stack и кликабельными frame'ами.

import { ChatStackTrace } from "@/components/ui/chat-stack-trace";

const trace = `TypeError: Cannot read properties of undefined (reading 'theme')
    at applyTheme (app/lib/theme.ts:42:18)
    at Object.useEffect (app/components/ThemedRoot.tsx:24:5)
    at commitHookEffectListMount (node_modules/react-dom/cjs/react-dom.development.js:23150:26)
    at commitPassiveMountEffects (node_modules/react-dom/cjs/react-dom.development.js:24927:13)
    at flushPassiveEffectsImpl (node_modules/react-dom/cjs/react-dom.development.js:27039:15)
    at internal/process/task_queues:96:7`;

export default function Particle() {
  return (
    <div className="w-full max-w-2xl p-4">
      <ChatStackTrace defaultOpen trace={trace} />
    </div>
  );
}

Установка


pnpm dlx shadcn@latest add @oracul/chat-stack-trace

Использование

import { ChatStackTrace } from "@/components/ui/chat-stack-trace";
 
<ChatStackTrace
  defaultOpen
  onFrameClick={(frame) =>
    openInEditor(frame.filePath, frame.lineNumber, frame.columnNumber)
  }
  trace={errorStack}
/>

Парсер

Принимает строку формата ErrorType: message\n at fn (file:line:col)\n at file:line:col. Из неё извлекает:

errorType (например, TypeError)
errorMessage
массив frames с functionName, filePath, lineNumber, columnNumber, isInternal (true для node_modules / node: / internal/)

Если нужен другой формат — можно использовать helper parseChatStackTrace(raw) напрямую и собрать UI вручную через subcomponents.

API

Компонент	Описание
`ChatStackTrace`	Корень. Принимает `trace`, `onFrameClick`, `defaultOpen` / `open`.
`ChatStackTraceError`	Заголовок с типом ошибки и сообщением.
`ChatStackTraceFrames`	Рендер frame-кнопок. `hideInternal` скрывает `node_modules`.
`ChatStackTraceCopyButton`	Копирует raw-трейс.

На этой странице

Установка Использование Парсер API