前端独立组件排障指南

如何快速排障

如果您在使用前端组件的过程中遇到问题，您可以参考如下流程快速排查

问题分类

组件加载失败 → 检查配置参数，运行官方Demo

交互无响应 → 检查浏览器控制台

显示错误 → 检查浏览器NetworkAPI 响应信息

数据不刷新 → 检查WebSocket连接

排查步骤

Step 1: 检查前端组件初始化配置

确认组件初始化配置是否正确：

常见配置错误：

Step 2: 运行官方 Demo 验证环境

目的：确认问题是否由环境或组件本身引起

验证结果：

✅ Demo 运行正常 → 问题可能在你的代码或配置中，继续 Step 2

❌ Demo 也报错 → 可能是：

后端服务问题（检查后端是否正常运行）

配置错误（appId/appKey/baseUrl 错误）

网络问题（网络无法访问服务端）

浏览器兼容性问题（尝试更换浏览器）

Step 3: 检查您的前端代码

若确认组件配置信息无误，且官方demo运行正常，则建议您可以对比参考官方demo，检查和分析您项目中的前端代码。

Step 4: 浏览器控制台检查

若检查配置无误，且官方demo也无法运行，则建议打开浏览器控制台，检查是否有对应的报错日志。

打开浏览器开发者工具：

Windows/Linux: F12

macOS: Cmd + Option + I

检查以下标签页：

Console 标签 - JavaScript 错误

Network 标签 - 网络请求

API 请求检查：
检查项目：

状态码：是否为 200/202（绿色）

请求参数：bindingUuid 等必填参数是否存在

请求头：Authorization Token 是否正确

响应内容：数据格式是否符合预期

响应时间：是否超时（>30秒）

常见网络问题：

❌ 400 Bad Request → 参数错误，检查请求参数
❌ 401 Unauthorized → 认证失败，检查 Token
❌ 404 Not Found → API 路径错误或后端未运行
❌ 500 Internal Server Error → 后端服务异常
❌ CORS Error → 跨域问题，需要后端配置

排障信息收集清单

如果您通过以上步骤问题还没得到解决，您可以收集排障信息后，在官方支持的企业微信群随时联系我们。提交问题前，请准备以下信息：

基础环境信息

前端组件版本号（如v1.0.0）

浏览器类型和版本（如 Chrome 121.0.6167.85）

操作系统（Windows 11 / macOS 14.2 / Ubuntu 22.04）

问题发生时间和频率（偶发/必现）

问题详细信息

浏览器控制台截图（Console 和 Network 标签页）

完整错误信息

问题复现步骤（问题复现操作流程）

组件配置代码（脱敏后的配置参数）

设备相关信息（如问题涉及设备操作）

设备序列号（SN）

设备类型（机场型号/无人机型号）

固件版本号

常见问题 FAQ

点击查看更多常见问题FAQ

如何快速排障#

问题分类#

排查步骤#

Step 1: 检查前端组件初始化配置#

Step 2: 运行官方 Demo 验证环境#

Step 3: 检查您的前端代码#

Step 4: 浏览器控制台检查#

排障信息收集清单#

基础环境信息#

问题详细信息#

设备相关信息（如问题涉及设备操作）#

常见问题 FAQ#