fix: handle potential error when retrieving modified content during report#4469
fix: handle potential error when retrieving modified content during report#4469
Conversation
Walkthrough本次 PR 对多个组件进行了调整：在 live-preview.decoration 文件中增加了 try-catch 错误处理；在 WelcomeMsg、ExpandableFileList 中对组件渲染和关键属性进行了更新；在 Terminal 组件中移除了 stripAnsi，改用 computeAnsiLogString 实现 ANSI 日志转换，并提供 HTML 渲染；同时新增了 computeAnsiLogString 与 filterEraseMultipleLine 工具文件以处理日志输出；Less 文件中的样式也做了微调；此外，package.json 与 frame-decoder 文件分别更新了依赖和导入。 Changes
Sequence Diagram(s)sequenceDiagram
participant U as 用户
participant T as TerminalToolComponent
participant C as computeAnsiLogString
participant F as filterEraseMultipleLine
participant A as ansiUp库
U->>T: 触发命令输出
T->>C: 调用 computeAnsiLogString(输出文本)
C->>F: 如启用，调用 filterEraseMultipleLine(日志数组)
F-->>C: 返回处理后的日志数组
C->>A: 将每行日志转换为 HTML
A-->>C: 返回 HTML 转换结果
C-->>T: 返回最终 HTML 文本
T->>T: 使用 dangerouslySetInnerHTML 渲染输出
Possibly related PRs
Suggested reviewers
Warning There were issues while running some tools. Please review the errors and either fix the tool’s configuration or disable the tool if it’s a critical failure. 🔧 ESLint
yarn install v1.22.22 📜 Recent review detailsConfiguration used: CodeRabbit UI ⛔ Files ignored due to path filters (1)
📒 Files selected for processing (10)
🧰 Additional context used🪛 Biome (1.9.4)packages/ai-native/src/browser/mcp/tools/components/Terminal.tsx[error] 76-76: Avoid passing content using the dangerouslySetInnerHTML prop. Setting content using code can expose users to cross-site scripting (XSS) attacks (lint/security/noDangerouslySetInnerHtml) ⏰ Context from checks skipped due to timeout of 90000ms (7)
🔇 Additional comments (14)
✨ Finishing Touches
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. 🪧 TipsChatThere are 3 ways to chat with CodeRabbit:
Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments. CodeRabbit Commands (Invoked using PR comments)
Other keywords and placeholders
CodeRabbit Configuration File (
|
![coderabbitai[bot]](https://avatars.githubusercontent.com/in/347564?s=60&v=4){kind=small}
There was a problem hiding this comment.
Caution
Inline review comments failed to post. This is likely due to GitHub's limits when posting large numbers of comments. If you are seeing this consistently it is likely a permissions issue. Please check "Moderation" -> "Code review limits" under your organization settings.
Actionable comments posted: 1
🧹 Nitpick comments (9)
packages/components/src/markdown-react/parse.tsx (4)
62-67: 改进代码格式提高可读性将
React.cloneElement调用重新格式化为多行形式，提高了代码的可读性。这是一个纯粹的代码样式优化，不影响功能。
89-94: 改进表格标题行代码格式同样是将
React.cloneElement调用重新格式化为多行形式，使代码结构更加清晰。这种一致的格式化有助于提高整个代码库的可维护性。
108-113: 改进表格内容行代码格式继续保持一致的代码格式化风格，将表格内容行的
React.cloneElement调用也重构为多行形式。
197-199: 改进 htmlUnescape 函数格式将
replace方法调用重新格式化为多行形式，与前面的格式化风格保持一致，提高整体代码可读性。packages/ai-native/src/browser/mcp/tools/components/Terminal.tsx (1)
10-10: 建议：确保引入的替代函数提供兼容功能从
stripAnsi切换到computeAnsiLogString代表了从简单移除 ANSI 转义序列到将其转换为 HTML 的变化。请确保这种改变不会对现有功能产生负面影响，尤其是在处理特殊字符或复杂 ANSI 序列时。packages/ai-native/src/browser/mcp/tools/components/filterEraseMultipleLine.ts (4)
19-71: 建议添加错误处理机制该函数处理复杂的 ANSI 转义序列，但没有明确的错误处理机制。如果输入数据格式异常或包含意外的转义序列，可能会导致未定义的行为。
建议添加适当的错误检查和异常处理，确保函数在各种输入情况下都能稳定工作。
export default function filterEraseMultipleLine(logs: string[]) { + // 防御性编程：检查输入 + if (!Array.isArray(logs)) { + return []; + } // 上移 cursor + 清空整行 const eraseLastLine = cursorUp(1) + eraseLine;
28-68: 性能优化建议当处理大量日志时，频繁的字符串操作（如
indexOf、lastIndexOf、slice和split）可能会影响性能。对于长日志或大量日志条目，建议考虑以下优化：
- 使用正则表达式预编译和缓存
- 考虑使用更高效的字符串匹配算法
- 对于大型日志，考虑分批处理或懒加载策略
28-39: 考虑副作用和数组操作函数中使用
acc.pop()直接修改累加器数组。虽然在reduce操作中这是常见的，但在某些情况下可能产生意外的副作用，特别是如果处理嵌套的擦除序列。建议考虑使用更加函数式的方法或明确记录这种行为，以确保代码的可预测性。
1-71: 建议添加单元测试考虑到此功能的复杂性和处理终端转义序列的特殊性，强烈建议添加全面的单元测试。测试应该涵盖各种场景，如：
- 单行清除
- 多行清除
- 光标移动和覆盖
- 边界情况处理
这将有助于验证实现的正确性并防止未来的回归问题。
如果需要，我可以帮助生成适合此功能的单元测试样例。
🛑 Comments failed to post (1)
packages/ai-native/src/browser/mcp/tools/components/Terminal.tsx (1)
75-76:
⚠️ Potential issue安全风险：使用 dangerouslySetInnerHTML 可能导致 XSS 攻击
将 ANSI 日志直接转换为 HTML 并使用
dangerouslySetInnerHTML渲染可能会带来安全风险。确保computeAnsiLogString函数对内容进行了充分的安全处理和转义，以防止潜在的 XSS 攻击。建议考虑以下解决方案：
- 确保
computeAnsiLogString函数中实现了严格的内容净化- 考虑使用专门的终端渲染库（如 xterm.js）来安全地渲染 ANSI 输出
🧰 Tools
🪛 Biome (1.9.4)
[error] 76-76: Avoid passing content using the dangerouslySetInnerHTML prop.
Setting content using code can expose users to cross-site scripting (XSS) attacks
(lint/security/noDangerouslySetInnerHtml)
Codecov ReportAll modified and coverable lines are covered by tests ✅
Additional details and impacted files@@ Coverage Diff @@
## main #4469 +/- ##
=======================================
Coverage 53.24% 53.24%
=======================================
Files 1663 1663
Lines 102608 102608
Branches 22196 22196
=======================================
Hits 54631 54631
Misses 39918 39918
Partials 8059 8059
Flags with carried forward coverage won't be shown. Click here to find out more. ☔ View full report in Codecov by Sentry. 🚀 New features to boost your workflow:
|
2 participants
…preview
Types
Background or solution
Summary by CodeRabbit