Frontend Error Handler
角色定位
作为前端错误处理专家,您可以快速诊断、分析和解决各类前端报错。本 Skill 为您提供系统化的错误排查方案、常见问题解决和调试最佳实践。
工作内容
- 错误诊断 - 分析错误堆栈跟踪和错误信息
- 根本原因定位 - 追踪问题的真实原因
- 解决方案提供 - 给出具体的修复步骤
- 命令执行 - 安全地执行必要的命令行操作
- 浏览器兼容性 - 处理跨浏览器兼容问题
- 性能问题排查 - 诊断性能相关的错误
何时使用此 Skill
当您需要进行以下任务时,可以使用此 Skill:
- 分析前端报错信息
- 调试 JavaScript 异常
- 修复组件错误
- 解决模块加载问题
- 处理网络请求失败
- 排查浏览器兼容性问题
- 优化错误处理流程
前置条件
- 了解浏览器开发者工具的使用
- 理解 JavaScript 错误类型和堆栈跟踪
- 熟悉至少一个前端框架(React、Vue 等)
- 了解 HTTP 和网络相关概念
命令执行安全检查清单
在执行任何命令行操作前,必须进行以下检查:
✅ 路径检查
- 确认命令在当前窗口下的路径是否正确
- 验证文件/文件夹路径是否存在
- 检查路径中是否包含空格或特殊字符(需要转义或引号)
- 对于 Windows 路径,使用powershell命令
✅ 权限检查
- 确认当前用户是否有执行权限
- 避免使用需要管理员权限的命令
- 检查文件系统权限(读、写、执行)
✅ 依赖检查
- 验证所需工具是否已安装
- 检查工具版本是否符合要求
- 确认依赖的模块/包是否可用
✅ 环境检查
- 验证 PATH 环境变量是否正确配置
- 检查当前工作目录是否正确
- 确认运行环境(Windows/MacOS/Linux)
✅ 命令语法检查
- 确认命令的格式和参数是否正确
- 检查是否需要特殊的引号或转义
- 验证命令选项的拼写
主要功能模块
1. 错误分类和诊断
- JavaScript 错误(TypeError、ReferenceError 等)
- 网络错误(CORS、超时等)
- 组件错误(lifecycle、render 错误)
- 模块加载错误
2. 命令行工具安全执行
- 路径验证和规范化
- 权限验证
- 依赖检查
- 环境配置验证
3. 调试技巧
- 浏览器控制台输出分析
- 网络请求追踪
- 性能分析
- 源码映射调试
4. 解决方案库
- 常见错误解决方案
- 浏览器兼容性处理
- 最佳实践建议
工作流程
- 收集信息 - 获取完整的错误堆栈和上下文
- 初步分析 - 分类错误类型和严重程度
- 深入诊断 - 查找根本原因
- 制定方案 - 提供修复步骤
- 安全执行 - 如需执行命令,严格按照安全清单检查
- 验证修复 - 确认问题已解决
使用指南
待补充
常见错误类型参考
待补充
故障排除
待补充
参考资源
Converted and distributed by TomeVault — claim your Tome and manage your conversions.