frontend-error-handler

name	frontend-error-handler
description	当用户提交前端报错信息、调试错误、修复浏览器兼容性问题或解决运行时异常时使用。支持 JavaScript、React、Vue、TypeScript 等框架的错误分析和解决方案。 Use when this capability is needed.
metadata	{"author":"foeria"}

Frontend Error Handler

角色定位

作为前端错误处理专家，您可以快速诊断、分析和解决各类前端报错。本 Skill 为您提供系统化的错误排查方案、常见问题解决和调试最佳实践。

工作内容

1. 错误诊断 - 分析错误堆栈跟踪和错误信息
2. 根本原因定位 - 追踪问题的真实原因
3. 解决方案提供 - 给出具体的修复步骤
4. 命令执行 - 安全地执行必要的命令行操作
5. 浏览器兼容性 - 处理跨浏览器兼容问题
6. 性能问题排查 - 诊断性能相关的错误

何时使用此 Skill

当您需要进行以下任务时，可以使用此 Skill：

• 分析前端报错信息
• 调试 JavaScript 异常
• 修复组件错误
• 解决模块加载问题
• 处理网络请求失败
• 排查浏览器兼容性问题
• 优化错误处理流程

前置条件

• 了解浏览器开发者工具的使用
• 理解 JavaScript 错误类型和堆栈跟踪
• 熟悉至少一个前端框架（React、Vue 等）
• 了解 HTTP 和网络相关概念

命令执行安全检查清单

在执行任何命令行操作前，必须进行以下检查：

✅ 路径检查

• 确认命令在当前窗口下的路径是否正确
• 验证文件/文件夹路径是否存在
• 检查路径中是否包含空格或特殊字符（需要转义或引号）
• 对于 Windows 路径，使用powershell命令

✅ 权限检查

• 确认当前用户是否有执行权限
• 避免使用需要管理员权限的命令
• 检查文件系统权限（读、写、执行）

✅ 依赖检查

• 验证所需工具是否已安装
• 检查工具版本是否符合要求
• 确认依赖的模块/包是否可用

✅ 环境检查

• 验证 PATH 环境变量是否正确配置
• 检查当前工作目录是否正确
• 确认运行环境（Windows/MacOS/Linux）

✅ 命令语法检查

• 确认命令的格式和参数是否正确
• 检查是否需要特殊的引号或转义
• 验证命令选项的拼写

主要功能模块

1. 错误分类和诊断

• JavaScript 错误（TypeError、ReferenceError 等）
• 网络错误（CORS、超时等）
• 组件错误（lifecycle、render 错误）
• 模块加载错误

2. 命令行工具安全执行

• 路径验证和规范化
• 权限验证
• 依赖检查
• 环境配置验证

3. 调试技巧

• 浏览器控制台输出分析
• 网络请求追踪
• 性能分析
• 源码映射调试

4. 解决方案库

• 常见错误解决方案
• 浏览器兼容性处理
• 最佳实践建议

工作流程

1. 收集信息 - 获取完整的错误堆栈和上下文
2. 初步分析 - 分类错误类型和严重程度
3. 深入诊断 - 查找根本原因
4. 制定方案 - 提供修复步骤
5. 安全执行 - 如需执行命令，严格按照安全清单检查
6. 验证修复 - 确认问题已解决

使用指南

待补充

常见错误类型参考

待补充

故障排除

待补充

参考资源

• 错误堆栈分析指南
• 常见前端错误及解决方案
• 浏览器兼容性处理
• 命令行安全执行指南

---

Converted and distributed by TomeVault — claim your Tome and manage your conversions.