用中構(gòu)建 Stack Trace 錯(cuò)誤展示組件：ai-elements StackTrace 組件實(shí)戰(zhàn)指南)
后端前端CRM人工智能AI Agent【免費(fèi)下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項(xiàng)目地址https://gitcode.com/gh_mirrors/crm48/crm點(diǎn)擊查看免費(fèi)下載本篇文章聚焦 Comp AI CRM 倉庫中.agents/skills/ai-elements技能集提供的StackTrace組件講解如何將 JavaScript/Node.js 錯(cuò)誤堆棧格式化為帶有語法高亮、可折疊幀、可點(diǎn)擊文件路徑的 React 展示組件并完整演示其在 AI SDK 工具調(diào)用場(chǎng)景下的接入方式。讀完本文你將掌握該組件的安裝、前后端集成、全部 Props 契約以及通過showInternalFrames、defaultOpen等參數(shù)定制錯(cuò)誤展示體驗(yàn)的實(shí)戰(zhàn)方法。組件概覽為 AI 生成代碼的錯(cuò)誤可視化而生StackTrace組件是 ai-elements 組件庫中專門用于錯(cuò)誤展示的組件它的核心能力是接收一段原始的 JavaScript/Node.js 錯(cuò)誤堆棧字符串將其解析并渲染為結(jié)構(gòu)化的可視化界面。它通常與Sandbox、CodeBlock等組件配合使用——當(dāng) AI 生成代碼執(zhí)行失敗時(shí)把Error.stack呈現(xiàn)給用戶幫助開發(fā)者快速定位問題。從倉庫的技能文檔描述來看StackTrace具備以下關(guān)鍵能力見 .agents/skills/ai-elements/references/stack-trace.md解析標(biāo)準(zhǔn) JavaScript/Node.js 堆棧跟蹤格式以紅色高亮錯(cuò)誤類型error type淡化內(nèi)部幀node_modules、node:路徑可折疊內(nèi)容并帶有平滑動(dòng)畫一鍵復(fù)制完整堆棧到剪貼板可點(diǎn)擊的文件路徑并攜帶行號(hào)/列號(hào)。在 ai-elements 的組件體系中StackTrace是錯(cuò)誤展示的標(biāo)準(zhǔn)件。倉庫中的 Sandbox 組件文檔 明確說明其設(shè)計(jì)意圖是與CodeBlock配合展示代碼、與StackTrace配合展示錯(cuò)誤這印證了它在 AI 沙箱執(zhí)行、代碼生成工具等場(chǎng)景中的典型定位。安裝StackTrace是 ai-elements 組件庫的一部分通過 ai-elements CLI 一鍵安裝。ai-elements 是基于 shadcn/ui 構(gòu)建的組件庫與自定義 registry安裝命令會(huì)把組件源碼直接集成到你的項(xiàng)目代碼中默認(rèn)路徑為/components/ai-elements/而非封裝為不可見的庫依賴——這意味著你可以像閱讀自己的代碼一樣查看它的實(shí)現(xiàn)細(xì)節(jié)。在項(xiàng)目根目錄package.json所在目錄執(zhí)行npx ai-elementslatest add stack-trace根據(jù) .agents/skills/ai-elements/SKILL.md 的說明如果你的項(xiàng)目使用 pnpm 或 bun 作為包管理器請(qǐng)使用對(duì)應(yīng)的 runner# pnpm pnpm dlx ai-elementslatest add stack-trace # bun bunx --bun ai-elementslatest add stack-trace安裝前提條件Node.js 18 或更高版本已安裝 AI SDK 的 Next.js 項(xiàng)目已安裝 shadcn/ui若未安裝CLI 會(huì)自動(dòng)安裝項(xiàng)目中tsconfig.json配置了/*路徑別名如/*: [./*]否則會(huì)出現(xiàn) module not found 導(dǎo)入錯(cuò)誤。安裝完成后組件會(huì)出現(xiàn)在/components/ai-elements/stack-trace路徑下Tailwind CSS 樣式已自動(dòng)集成無需額外配置即可使用。與 AI SDK 集成完整的前后端示例StackTrace組件的典型應(yīng)用場(chǎng)景是AI 通過工具調(diào)用執(zhí)行代碼當(dāng)代碼執(zhí)行失敗時(shí)把捕獲的Error.stack返回給前端由StackTrace組件格式化展示。下面展示 stack-trace.md 文檔中的完整接入流程。前端通過 useChat 渲染工具錯(cuò)誤在app/page.tsx中使用 AI SDK 的useChathook 獲取消息流從message.parts中篩選tool-invocation類型的部分當(dāng)工具名為runCode且結(jié)果中包含error時(shí)渲染StackTraceuse client; import { useChat } from ai-sdk/react; import { StackTrace, StackTraceHeader, StackTraceError, StackTraceErrorType, StackTraceErrorMessage, StackTraceActions, StackTraceCopyButton, StackTraceExpandButton, StackTraceContent, StackTraceFrames, } from /components/ai-elements/stack-trace; export default function Page() { const { messages } useChat({ api: /api/run-code, }); return ( div classNamemax-w-4xl mx-auto p-6 {messages.map((message) { const toolInvocations message.parts?.filter( (part) part.type tool-invocation ); return toolInvocations?.map((tool) { if (tool.toolName runCode tool.result?.error) { return ( StackTrace key{tool.toolCallId} trace{tool.result.error} defaultOpen StackTraceHeader StackTraceError StackTraceErrorType / StackTraceErrorMessage / /StackTraceError StackTraceActions StackTraceCopyButton / StackTraceExpandButton / /StackTraceActions /StackTraceHeader StackTraceContent StackTraceFrames / /StackTraceContent /StackTrace ); } return null; }); })} /div ); }這段代碼展示了StackTrace的復(fù)合組件compound component設(shè)計(jì)外層StackTrace接收原始堆棧字符串內(nèi)部由Header → ErrorErrorType ErrorMessage→ ActionsCopyButton ExpandButton→ Content → Frames逐層組合。這種結(jié)構(gòu)與 ai-elements 其他組件如Message、Tool、Sandbox保持一致既保證了布局靈活性也便于按需增刪子元素。后端工具執(zhí)行并返回堆棧在api/run-code/route.ts中使用 Vercel AI SDK 定義runCode工具通過eval執(zhí)行代碼捕獲異常后返回error.stackimport { streamText, tool } from ai; import { z } from zod; export async function POST(req: Request) { const { messages } await req.json(); const result streamText({ model: openai/gpt-4o, messages, tools: { runCode: tool({ description: Execute JavaScript code and return any errors, parameters: z.object({ code: z.string(), }), execute: async ({ code }) { try { // Execute code in sandbox eval(code); return { success: true }; } catch (error) { return { error: (error as Error).stack }; } }, }), }, }); return result.toDataStreamResponse(); }關(guān)鍵點(diǎn)在于execute函數(shù)中捕獲異常后返回的是(error as Error).stack——這正是StackTrace組件的traceprop 期望的輸入格式。前端通過tool.result?.error拿到這段堆棧字符串并交給組件解析渲染從而形成AI 寫代碼 → 沙箱執(zhí)行 → 失敗堆棧 → 格式化展示的完整閉環(huán)。說明示例中的eval僅為演示組件用法生產(chǎn)環(huán)境應(yīng)將代碼執(zhí)行放入隔離沙箱可參考倉庫中 Sandbox 組件文檔 的設(shè)計(jì)思路它正是為AI 生成代碼 執(zhí)行輸出場(chǎng)景準(zhǔn)備的容器組件。三個(gè)實(shí)戰(zhàn)示例從默認(rèn)展開到隱藏內(nèi)部幀倉庫的scripts/目錄提供了三個(gè)可直接運(yùn)行的示例文件覆蓋了StackTrace最常用的三種展示形態(tài)可作為接入時(shí)的參照模板。示例一默認(rèn)展開 文件路徑點(diǎn)擊回調(diào)scripts/stack-trace.tsx 演示了defaultOpen與onFilePathClick的配合使用。示例中的樣本堆棧是一個(gè)典型的 React 運(yùn)行時(shí)錯(cuò)誤TypeError: Cannot read properties of undefined (reading map) at UserList (/app/components/UserList.tsx:15:23) at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18) ...實(shí)現(xiàn)要點(diǎn)onFilePathClick回調(diào)接收(path: string, line: number, col: number)三個(gè)參數(shù)可用于在 IDE 中打開對(duì)應(yīng)文件示例中通過console.log打印定位信息onCopy回調(diào)在復(fù)制成功后觸發(fā)可用于埋點(diǎn)或 Toast 提示const handleCopy () { console.log(Stack trace copied); };組件包裹結(jié)構(gòu)為StackTrace(defaultOpen, onFilePathClick, trace) → Header → Error → Actions → Content → Frames與上文的工具調(diào)用示例完全一致。示例二默認(rèn)折疊scripts/stack-trace-collapsed.tsx 演示了折疊態(tài)通過defaultOpen{false}讓組件默認(rèn)收起用戶點(diǎn)擊 Header 區(qū)域后再展開幀列表。這在錯(cuò)誤信息較長、不想搶占頁面主視覺時(shí)非常有用——Header 中仍然會(huì)顯示錯(cuò)誤類型與錯(cuò)誤消息用戶可以根據(jù)摘要決定是否展開完整堆棧。示例三隱藏內(nèi)部幀scripts/stack-trace-no-internal.tsx 演示了StackTraceFrames的showInternalFrames{false}用法StackTraceContent StackTraceFrames showInternalFrames{false} / /StackTraceContent當(dāng)設(shè)置為false時(shí)來自node_modules與node:路徑的內(nèi)部幀會(huì)被過濾掉只保留業(yè)務(wù)代碼幀如/app/src/App.tsx:42:5幫助開發(fā)者快速聚焦到真正的問題代碼避免被 React 運(yùn)行時(shí)內(nèi)部調(diào)用棧淹沒。組件 Props 完整參考StackTrace采用復(fù)合組件結(jié)構(gòu)每個(gè)子組件都有獨(dú)立的 Props 契約。以下為 stack-trace.md 文檔中完整的 Props 表格StackTrace /根組件Prop類型默認(rèn)值說明tracestring-待解析和展示的原始堆棧字符串openboolean-受控展開狀態(tài)defaultOpenbooleanfalse內(nèi)容是否默認(rèn)展開onOpenChange(open: boolean) void-展開狀態(tài)變化時(shí)的回調(diào)onFilePathClick(path: string, line?: number, column?: number) void-點(diǎn)擊文件路徑時(shí)的回調(diào)接收文件路徑、行號(hào)和列號(hào)childrenReact.ReactNode-子元素StackTraceHeader、StackTraceContent 等classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯礁?divStackTraceHeader /Prop類型默認(rèn)值說明childrenReact.ReactNode-頭部內(nèi)容通常為 StackTraceError 與 StackTraceActionsclassNamestring-附加 CSS 類名...propsReact.ComponentPropstypeof CollapsibleTrigger-其余屬性透?jìng)鞯?CollapsibleTriggerStackTraceError /Prop類型默認(rèn)值說明childrenReact.ReactNode-錯(cuò)誤內(nèi)容通常為 StackTraceErrorType 與 StackTraceErrorMessageclassNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?divStackTraceErrorType /Prop類型默認(rèn)值說明childrenReact.ReactNode-自定義內(nèi)容默認(rèn)顯示解析出的錯(cuò)誤類型如TypeErrorclassNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLSpanElement-其余屬性透?jìng)鞯?span 元素StackTraceErrorMessage /Prop類型默認(rèn)值說明childrenReact.ReactNode-自定義內(nèi)容默認(rèn)顯示解析出的錯(cuò)誤消息classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLSpanElement-其余屬性透?jìng)鞯?span 元素StackTraceActions /Prop類型默認(rèn)值說明childrenReact.ReactNode-操作按鈕通常為 StackTraceCopyButton 與 StackTraceExpandButtonclassNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?divStackTraceCopyButton /Prop類型默認(rèn)值說明onCopy() void-復(fù)制成功后觸發(fā)的回調(diào)onError(error: Error) void-復(fù)制失敗時(shí)觸發(fā)的回調(diào)timeoutnumber2000復(fù)制成功狀態(tài)的展示時(shí)長毫秒childrenReact.ReactNode-按鈕自定義內(nèi)容默認(rèn)為復(fù)制/勾選圖標(biāo)classNamestring-附加 CSS 類名...propsReact.ComponentPropstypeof Button-其余屬性透?jìng)鞯降讓?shadcn/ui Button 組件StackTraceExpandButton /Prop類型默認(rèn)值說明classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?divStackTraceContent /Prop類型默認(rèn)值說明maxHeightnumber400內(nèi)容區(qū)域最大高度px超出后啟用滾動(dòng)childrenReact.ReactNode-展示內(nèi)容通常為 StackTraceFramesclassNamestring-附加 CSS 類名...propsReact.ComponentPropstypeof CollapsibleContent-其余屬性透?jìng)鞯?CollapsibleContentStackTraceFrames /Prop類型默認(rèn)值說明showInternalFramesbooleantrue是否顯示內(nèi)部幀node_modules、node:路徑classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?div設(shè)計(jì)要點(diǎn)與擴(kuò)展建議從 Props 契約可以提煉出幾個(gè)值得關(guān)注的設(shè)計(jì)特征完全可控的展開狀態(tài)open/defaultOpen/onOpenChange三件套同時(shí)支持受控與非受控兩種用法默認(rèn)折疊defaultOpenfalse符合錯(cuò)誤摘要優(yōu)先的交互直覺而在工具執(zhí)行失敗的場(chǎng)景如示例一則常配合defaultOpen直接展開讓用戶第一時(shí)間看到錯(cuò)誤詳情?；?Radix Collapsible 的可訪問性StackTraceHeader透?jìng)鰿ollapsibleTrigger屬性、StackTraceContent透?jìng)鰿ollapsibleContent屬性這意味著折疊交互天然繼承 Radix 的鍵盤導(dǎo)航與屏幕閱讀器支持無需額外實(shí)現(xiàn)。組件代碼即源碼由于 ai-elements 采用代碼復(fù)制進(jìn)項(xiàng)目的分發(fā)模式安裝后的components/ai-elements/stack-trace.tsx是可以直接打開閱讀和修改的。如果想調(diào)整內(nèi)部幀的判定規(guī)則例如額外過濾webpack幀、更換復(fù)制成功圖標(biāo)或改變紅色高亮的樣式直接修改該文件即可這正是 shadcn 生態(tài)以源碼為組件理念的體現(xiàn)參見 SKILL.md 中關(guān)于組件作為代碼庫一部分、可打開查看或自定義修改的說明。與錯(cuò)誤生態(tài)的銜接trace輸入的是標(biāo)準(zhǔn) Node.jsError.stack字符串因此不僅適用于 AI 工具調(diào)用場(chǎng)景任何前端捕獲的異常堆棧如 React 錯(cuò)誤邊界、異步請(qǐng)求錯(cuò)誤都可以直接傳入復(fù)用讓全站錯(cuò)誤展示風(fēng)格統(tǒng)一。小結(jié)StackTrace是 ai-elements 面向AI 生成代碼場(chǎng)景的標(biāo)準(zhǔn)錯(cuò)誤展示組件與Sandbox代碼與輸出容器、CodeBlock語法高亮代碼塊形成完整配套。通過本文的安裝命令、前后端完整示例、三個(gè)示例腳本以及全部 Props 契約你可以快速在 AI 應(yīng)用中落地一個(gè)具備語法高亮、幀折疊、一鍵復(fù)制、路徑跳轉(zhuǎn)能力的錯(cuò)誤堆棧展示模塊并依據(jù)項(xiàng)目需要自由定制其行為與樣式。更詳細(xì)的組件清單與安裝指引可繼續(xù)查閱 .agents/skills/ai-elements/SKILL.md 及其references/目錄下的各組件文檔。贊分享后端前端CRM人工智能AI Agent【免費(fèi)下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項(xiàng)目地址https://gitcode.com/gh_mirrors/crm48/crm點(diǎn)擊查看免費(fèi)下載相關(guān)推薦在 ZCode 的 ai-elements 技能中構(gòu)建 StackTrace 錯(cuò)誤堆棧展示組件基于 AI SDK 的完整集成指南在 ZCode 的 ai elements 技能中構(gòu)建 StackTrace 錯(cuò)誤堆棧展示組件基于 AI SDK 的完整集成指南 導(dǎo)讀 本文圍繞 ZCodeZCode 集成 AI Elements Agent 組件在 React 應(yīng)用中構(gòu)建可組合的 AI Agent 配置展示界面ZCode 集成 AI Elements Agent 組件在 React 應(yīng)用中構(gòu)建可組合的 AI Agent 配置展示界面 導(dǎo)讀 本指南以 ZCode 倉庫Beekeeper Studio 完全指南基于 Electron 與 Vue.js 的開源跨平臺(tái) SQL 編輯器與數(shù)據(jù)庫管理工具Beekeeper Studio 完全指南基于 Electron 與 Vue.js 的開源跨平臺(tái) SQL 編輯器與數(shù)據(jù)庫管理工具 Beekeeper Stud后端前端CRM人工智能AI Agent上一篇掌握WinUI 3與C/WinRT構(gòu)建現(xiàn)代化硬盤監(jiān)測(cè)工具DiskInfo的實(shí)戰(zhàn)指南下一篇Rhino.Inside? Revit顛覆BIM參數(shù)化設(shè)計(jì)的終極解決方案創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考 在 AI 應(yīng)用中構(gòu)建 Stack Trace 錯(cuò)誤展示組件：ai-elements StackTrace 組件實(shí)戰(zhàn)指南
后端前端CRM人工智能AI Agent【免費(fèi)下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項(xiàng)目地址https://gitcode.com/gh_mirrors/crm48/crm點(diǎn)擊查看免費(fèi)下載本篇文章聚焦 Comp AI CRM 倉庫中.agents/skills/ai-elements技能集提供的StackTrace組件講解如何將 JavaScript/Node.js 錯(cuò)誤堆棧格式化為帶有語法高亮、可折疊幀、可點(diǎn)擊文件路徑的 React 展示組件并完整演示其在 AI SDK 工具調(diào)用場(chǎng)景下的接入方式。讀完本文你將掌握該組件的安裝、前后端集成、全部 Props 契約以及通過showInternalFrames、defaultOpen等參數(shù)定制錯(cuò)誤展示體驗(yàn)的實(shí)戰(zhàn)方法。組件概覽為 AI 生成代碼的錯(cuò)誤可視化而生StackTrace組件是 ai-elements 組件庫中專門用于錯(cuò)誤展示的組件它的核心能力是接收一段原始的 JavaScript/Node.js 錯(cuò)誤堆棧字符串將其解析并渲染為結(jié)構(gòu)化的可視化界面。它通常與Sandbox、CodeBlock等組件配合使用——當(dāng) AI 生成代碼執(zhí)行失敗時(shí)把Error.stack呈現(xiàn)給用戶幫助開發(fā)者快速定位問題。從倉庫的技能文檔描述來看StackTrace具備以下關(guān)鍵能力見 .agents/skills/ai-elements/references/stack-trace.md解析標(biāo)準(zhǔn) JavaScript/Node.js 堆棧跟蹤格式以紅色高亮錯(cuò)誤類型error type淡化內(nèi)部幀node_modules、node:路徑可折疊內(nèi)容并帶有平滑動(dòng)畫一鍵復(fù)制完整堆棧到剪貼板可點(diǎn)擊的文件路徑并攜帶行號(hào)/列號(hào)。在 ai-elements 的組件體系中StackTrace是錯(cuò)誤展示的標(biāo)準(zhǔn)件。倉庫中的 Sandbox 組件文檔 明確說明其設(shè)計(jì)意圖是與CodeBlock配合展示代碼、與StackTrace配合展示錯(cuò)誤這印證了它在 AI 沙箱執(zhí)行、代碼生成工具等場(chǎng)景中的典型定位。安裝StackTrace是 ai-elements 組件庫的一部分通過 ai-elements CLI 一鍵安裝。ai-elements 是基于 shadcn/ui 構(gòu)建的組件庫與自定義 registry安裝命令會(huì)把組件源碼直接集成到你的項(xiàng)目代碼中默認(rèn)路徑為/components/ai-elements/而非封裝為不可見的庫依賴——這意味著你可以像閱讀自己的代碼一樣查看它的實(shí)現(xiàn)細(xì)節(jié)。在項(xiàng)目根目錄package.json所在目錄執(zhí)行npx ai-elementslatest add stack-trace根據(jù) .agents/skills/ai-elements/SKILL.md 的說明如果你的項(xiàng)目使用 pnpm 或 bun 作為包管理器請(qǐng)使用對(duì)應(yīng)的 runner# pnpm pnpm dlx ai-elementslatest add stack-trace # bun bunx --bun ai-elementslatest add stack-trace安裝前提條件Node.js 18 或更高版本已安裝 AI SDK 的 Next.js 項(xiàng)目已安裝 shadcn/ui若未安裝CLI 會(huì)自動(dòng)安裝項(xiàng)目中tsconfig.json配置了/*路徑別名如/*: [./*]否則會(huì)出現(xiàn) module not found 導(dǎo)入錯(cuò)誤。安裝完成后組件會(huì)出現(xiàn)在/components/ai-elements/stack-trace路徑下Tailwind CSS 樣式已自動(dòng)集成無需額外配置即可使用。與 AI SDK 集成完整的前后端示例StackTrace組件的典型應(yīng)用場(chǎng)景是AI 通過工具調(diào)用執(zhí)行代碼當(dāng)代碼執(zhí)行失敗時(shí)把捕獲的Error.stack返回給前端由StackTrace組件格式化展示。下面展示 stack-trace.md 文檔中的完整接入流程。前端通過 useChat 渲染工具錯(cuò)誤在app/page.tsx中使用 AI SDK 的useChathook 獲取消息流從message.parts中篩選tool-invocation類型的部分當(dāng)工具名為runCode且結(jié)果中包含error時(shí)渲染StackTraceuse client; import { useChat } from ai-sdk/react; import { StackTrace, StackTraceHeader, StackTraceError, StackTraceErrorType, StackTraceErrorMessage, StackTraceActions, StackTraceCopyButton, StackTraceExpandButton, StackTraceContent, StackTraceFrames, } from /components/ai-elements/stack-trace; export default function Page() { const { messages } useChat({ api: /api/run-code, }); return ( div classNamemax-w-4xl mx-auto p-6 {messages.map((message) { const toolInvocations message.parts?.filter( (part) part.type tool-invocation ); return toolInvocations?.map((tool) { if (tool.toolName runCode tool.result?.error) { return ( StackTrace key{tool.toolCallId} trace{tool.result.error} defaultOpen StackTraceHeader StackTraceError StackTraceErrorType / StackTraceErrorMessage / /StackTraceError StackTraceActions StackTraceCopyButton / StackTraceExpandButton / /StackTraceActions /StackTraceHeader StackTraceContent StackTraceFrames / /StackTraceContent /StackTrace ); } return null; }); })} /div ); }這段代碼展示了StackTrace的復(fù)合組件compound component設(shè)計(jì)外層StackTrace接收原始堆棧字符串內(nèi)部由Header → ErrorErrorType ErrorMessage→ ActionsCopyButton ExpandButton→ Content → Frames逐層組合。這種結(jié)構(gòu)與 ai-elements 其他組件如Message、Tool、Sandbox保持一致既保證了布局靈活性也便于按需增刪子元素。后端工具執(zhí)行并返回堆棧在api/run-code/route.ts中使用 Vercel AI SDK 定義runCode工具通過eval執(zhí)行代碼捕獲異常后返回error.stackimport { streamText, tool } from ai; import { z } from zod; export async function POST(req: Request) { const { messages } await req.json(); const result streamText({ model: openai/gpt-4o, messages, tools: { runCode: tool({ description: Execute JavaScript code and return any errors, parameters: z.object({ code: z.string(), }), execute: async ({ code }) { try { // Execute code in sandbox eval(code); return { success: true }; } catch (error) { return { error: (error as Error).stack }; } }, }), }, }); return result.toDataStreamResponse(); }關(guān)鍵點(diǎn)在于execute函數(shù)中捕獲異常后返回的是(error as Error).stack——這正是StackTrace組件的traceprop 期望的輸入格式。前端通過tool.result?.error拿到這段堆棧字符串并交給組件解析渲染從而形成AI 寫代碼 → 沙箱執(zhí)行 → 失敗堆棧 → 格式化展示的完整閉環(huán)。說明示例中的eval僅為演示組件用法生產(chǎn)環(huán)境應(yīng)將代碼執(zhí)行放入隔離沙箱可參考倉庫中 Sandbox 組件文檔 的設(shè)計(jì)思路它正是為AI 生成代碼 執(zhí)行輸出場(chǎng)景準(zhǔn)備的容器組件。三個(gè)實(shí)戰(zhàn)示例從默認(rèn)展開到隱藏內(nèi)部幀倉庫的scripts/目錄提供了三個(gè)可直接運(yùn)行的示例文件覆蓋了StackTrace最常用的三種展示形態(tài)可作為接入時(shí)的參照模板。示例一默認(rèn)展開 文件路徑點(diǎn)擊回調(diào)scripts/stack-trace.tsx 演示了defaultOpen與onFilePathClick的配合使用。示例中的樣本堆棧是一個(gè)典型的 React 運(yùn)行時(shí)錯(cuò)誤TypeError: Cannot read properties of undefined (reading map) at UserList (/app/components/UserList.tsx:15:23) at renderWithHooks (node_modules/react-dom/cjs/react-dom.development.js:14985:18) ...實(shí)現(xiàn)要點(diǎn)onFilePathClick回調(diào)接收(path: string, line: number, col: number)三個(gè)參數(shù)可用于在 IDE 中打開對(duì)應(yīng)文件示例中通過console.log打印定位信息onCopy回調(diào)在復(fù)制成功后觸發(fā)可用于埋點(diǎn)或 Toast 提示const handleCopy () { console.log(Stack trace copied); };組件包裹結(jié)構(gòu)為StackTrace(defaultOpen, onFilePathClick, trace) → Header → Error → Actions → Content → Frames與上文的工具調(diào)用示例完全一致。示例二默認(rèn)折疊scripts/stack-trace-collapsed.tsx 演示了折疊態(tài)通過defaultOpen{false}讓組件默認(rèn)收起用戶點(diǎn)擊 Header 區(qū)域后再展開幀列表。這在錯(cuò)誤信息較長、不想搶占頁面主視覺時(shí)非常有用——Header 中仍然會(huì)顯示錯(cuò)誤類型與錯(cuò)誤消息用戶可以根據(jù)摘要決定是否展開完整堆棧。示例三隱藏內(nèi)部幀scripts/stack-trace-no-internal.tsx 演示了StackTraceFrames的showInternalFrames{false}用法StackTraceContent StackTraceFrames showInternalFrames{false} / /StackTraceContent當(dāng)設(shè)置為false時(shí)來自node_modules與node:路徑的內(nèi)部幀會(huì)被過濾掉只保留業(yè)務(wù)代碼幀如/app/src/App.tsx:42:5幫助開發(fā)者快速聚焦到真正的問題代碼避免被 React 運(yùn)行時(shí)內(nèi)部調(diào)用棧淹沒。組件 Props 完整參考StackTrace采用復(fù)合組件結(jié)構(gòu)每個(gè)子組件都有獨(dú)立的 Props 契約。以下為 stack-trace.md 文檔中完整的 Props 表格StackTrace /根組件Prop類型默認(rèn)值說明tracestring-待解析和展示的原始堆棧字符串openboolean-受控展開狀態(tài)defaultOpenbooleanfalse內(nèi)容是否默認(rèn)展開onOpenChange(open: boolean) void-展開狀態(tài)變化時(shí)的回調(diào)onFilePathClick(path: string, line?: number, column?: number) void-點(diǎn)擊文件路徑時(shí)的回調(diào)接收文件路徑、行號(hào)和列號(hào)childrenReact.ReactNode-子元素StackTraceHeader、StackTraceContent 等classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯礁?divStackTraceHeader /Prop類型默認(rèn)值說明childrenReact.ReactNode-頭部內(nèi)容通常為 StackTraceError 與 StackTraceActionsclassNamestring-附加 CSS 類名...propsReact.ComponentPropstypeof CollapsibleTrigger-其余屬性透?jìng)鞯?CollapsibleTriggerStackTraceError /Prop類型默認(rèn)值說明childrenReact.ReactNode-錯(cuò)誤內(nèi)容通常為 StackTraceErrorType 與 StackTraceErrorMessageclassNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?divStackTraceErrorType /Prop類型默認(rèn)值說明childrenReact.ReactNode-自定義內(nèi)容默認(rèn)顯示解析出的錯(cuò)誤類型如TypeErrorclassNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLSpanElement-其余屬性透?jìng)鞯?span 元素StackTraceErrorMessage /Prop類型默認(rèn)值說明childrenReact.ReactNode-自定義內(nèi)容默認(rèn)顯示解析出的錯(cuò)誤消息classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLSpanElement-其余屬性透?jìng)鞯?span 元素StackTraceActions /Prop類型默認(rèn)值說明childrenReact.ReactNode-操作按鈕通常為 StackTraceCopyButton 與 StackTraceExpandButtonclassNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?divStackTraceCopyButton /Prop類型默認(rèn)值說明onCopy() void-復(fù)制成功后觸發(fā)的回調(diào)onError(error: Error) void-復(fù)制失敗時(shí)觸發(fā)的回調(diào)timeoutnumber2000復(fù)制成功狀態(tài)的展示時(shí)長毫秒childrenReact.ReactNode-按鈕自定義內(nèi)容默認(rèn)為復(fù)制/勾選圖標(biāo)classNamestring-附加 CSS 類名...propsReact.ComponentPropstypeof Button-其余屬性透?jìng)鞯降讓?shadcn/ui Button 組件StackTraceExpandButton /Prop類型默認(rèn)值說明classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?divStackTraceContent /Prop類型默認(rèn)值說明maxHeightnumber400內(nèi)容區(qū)域最大高度px超出后啟用滾動(dòng)childrenReact.ReactNode-展示內(nèi)容通常為 StackTraceFramesclassNamestring-附加 CSS 類名...propsReact.ComponentPropstypeof CollapsibleContent-其余屬性透?jìng)鞯?CollapsibleContentStackTraceFrames /Prop類型默認(rèn)值說明showInternalFramesbooleantrue是否顯示內(nèi)部幀node_modules、node:路徑classNamestring-附加 CSS 類名...propsReact.HTMLAttributesHTMLDivElement-其余屬性透?jìng)鞯饺萜?div設(shè)計(jì)要點(diǎn)與擴(kuò)展建議從 Props 契約可以提煉出幾個(gè)值得關(guān)注的設(shè)計(jì)特征完全可控的展開狀態(tài)open/defaultOpen/onOpenChange三件套同時(shí)支持受控與非受控兩種用法默認(rèn)折疊defaultOpenfalse符合錯(cuò)誤摘要優(yōu)先的交互直覺而在工具執(zhí)行失敗的場(chǎng)景如示例一則常配合defaultOpen直接展開讓用戶第一時(shí)間看到錯(cuò)誤詳情?；?Radix Collapsible 的可訪問性StackTraceHeader透?jìng)鰿ollapsibleTrigger屬性、StackTraceContent透?jìng)鰿ollapsibleContent屬性這意味著折疊交互天然繼承 Radix 的鍵盤導(dǎo)航與屏幕閱讀器支持無需額外實(shí)現(xiàn)。組件代碼即源碼由于 ai-elements 采用代碼復(fù)制進(jìn)項(xiàng)目的分發(fā)模式安裝后的components/ai-elements/stack-trace.tsx是可以直接打開閱讀和修改的。如果想調(diào)整內(nèi)部幀的判定規(guī)則例如額外過濾webpack幀、更換復(fù)制成功圖標(biāo)或改變紅色高亮的樣式直接修改該文件即可這正是 shadcn 生態(tài)以源碼為組件理念的體現(xiàn)參見 SKILL.md 中關(guān)于組件作為代碼庫一部分、可打開查看或自定義修改的說明。與錯(cuò)誤生態(tài)的銜接trace輸入的是標(biāo)準(zhǔn) Node.jsError.stack字符串因此不僅適用于 AI 工具調(diào)用場(chǎng)景任何前端捕獲的異常堆棧如 React 錯(cuò)誤邊界、異步請(qǐng)求錯(cuò)誤都可以直接傳入復(fù)用讓全站錯(cuò)誤展示風(fēng)格統(tǒng)一。小結(jié)StackTrace是 ai-elements 面向AI 生成代碼場(chǎng)景的標(biāo)準(zhǔn)錯(cuò)誤展示組件與Sandbox代碼與輸出容器、CodeBlock語法高亮代碼塊形成完整配套。通過本文的安裝命令、前后端完整示例、三個(gè)示例腳本以及全部 Props 契約你可以快速在 AI 應(yīng)用中落地一個(gè)具備語法高亮、幀折疊、一鍵復(fù)制、路徑跳轉(zhuǎn)能力的錯(cuò)誤堆棧展示模塊并依據(jù)項(xiàng)目需要自由定制其行為與樣式。更詳細(xì)的組件清單與安裝指引可繼續(xù)查閱 .agents/skills/ai-elements/SKILL.md 及其references/目錄下的各組件文檔。贊分享后端前端CRM人工智能AI Agent【免費(fèi)下載鏈接】crmComp AI CRM is an open source, CRM designed for AI agents. Agentic-first CRM.項(xiàng)目地址https://gitcode.com/gh_mirrors/crm48/crm點(diǎn)擊查看免費(fèi)下載相關(guān)推薦在 ZCode 的 ai-elements 技能中構(gòu)建 StackTrace 錯(cuò)誤堆棧展示組件基于 AI SDK 的完整集成指南在 ZCode 的 ai elements 技能中構(gòu)建 StackTrace 錯(cuò)誤堆棧展示組件基于 AI SDK 的完整集成指南 導(dǎo)讀 本文圍繞 ZCodeZCode 集成 AI Elements Agent 組件在 React 應(yīng)用中構(gòu)建可組合的 AI Agent 配置展示界面ZCode 集成 AI Elements Agent 組件在 React 應(yīng)用中構(gòu)建可組合的 AI Agent 配置展示界面 導(dǎo)讀 本指南以 ZCode 倉庫Beekeeper Studio 完全指南基于 Electron 與 Vue.js 的開源跨平臺(tái) SQL 編輯器與數(shù)據(jù)庫管理工具Beekeeper Studio 完全指南基于 Electron 與 Vue.js 的開源跨平臺(tái) SQL 編輯器與數(shù)據(jù)庫管理工具 Beekeeper Stud后端前端CRM人工智能AI Agent上一篇掌握WinUI 3與C/WinRT構(gòu)建現(xiàn)代化硬盤監(jiān)測(cè)工具DiskInfo的實(shí)戰(zhàn)指南下一篇Rhino.Inside? Revit顛覆BIM參數(shù)化設(shè)計(jì)的終極解決方案創(chuàng)作聲明：本文部分內(nèi)容由AI輔助生成（AIGC），僅供參考