frontend Troubleshooting
JSON 解析失败常见原因与修复
JSON.parse 报 Unexpected token、SyntaxError 时，按行列号定位问题字符，检查是否有 trailing comma、单引号、// 注释、BOM 头或非 UTF-8 编码，用 jq、python -m json.tool 或 node 复现校验，标准 JSON 不支持注释与尾随逗号。
JSON 不允许 trailing comma、单引号、注释和 BOM。用 JSON.parse 报错时先看行号列号，再用校验工具定位语法错误。
Scenario
这篇文章解决什么问题
适用于“JSON 解析失败常见原因与修复”对应的线上或本地排障场景。不要只根据最终报错下结论，应先把问题拆成入口、链路、目标服务和资源限制几层，再用命令逐层证实。JSON 不允许 trailing comma、单引号、注释和 BOM。用 JSON.parse 报错时先看行号列号，再用校验工具定位语法错误。
Symptoms
典型现象
- JSON.parse 报 Unexpected token、SyntaxError 时，按行列号定位问题字符，检查是否有 trailing comma、单引号、// 注释、BOM 头或非 UTF-8 编码，用 jq、python -m json.tool 或 node 复现校验，标准 JSON 不支持注释与尾随逗号。
- 相关日志、命令或页面中反复出现 json、parse、syntax 等关键词。
- 同一服务在不同机器、不同入口或不同时间段表现不一致，需要通过证据链缩小范围。
Before Debugging
排查前先确认
- 先区分浏览器运行时、构建期、SSR/水合、依赖安装和网络 API 问题。
- 保留浏览器控制台、Network 失败请求、构建日志和 lockfile 状态。
- 确认本地、CI、预览环境和生产环境的 Node 版本与环境变量是否一致。
Root Causes
常见根因分层
运行环境差异
Node 版本、包管理器、lockfile、CI 内存、浏览器 API 与 SSR 环境差异都会导致“本地好、线上坏”。
- 固定 Node/pnpm 版本
- CI 使用 frozen lockfile
- 构建后 preview 复现
客户端和服务端首屏不一致
时间、随机数、localStorage、window、viewport 条件渲染会引发 hydration mismatch 或闪烁。
- SSR 阶段输出确定内容
- 浏览器专属逻辑放 mounted/ClientOnly
- 避免首屏按 viewport 分支
浏览器安全策略和跨域
CORS、Cookie SameSite、HTTPS、混合内容和缓存策略会让接口在 Postman 可用但浏览器失败。
- 看预检 OPTIONS
- 确认凭证模式与 Allow-Origin
- 从 Network 读取真实响应
Diagnosis Path
分步诊断流程
1. 固定现场，避免追着变化状态跑
先记录故障时间、影响入口、完整错误和最近一次变更。JSON 解析失败常见原因与修复 这类问题经常在重启、重试或缓存刷新后短暂消失，没有现场信息会很难复盘。
- 截图或保存完整错误文本
- 记录请求域名/IP/端口/namespace/服务名
- 标出最近发布、配置、证书、镜像或依赖变更
node -e "JSON.parse(require('fs').readFileSync('data.json','utf8'))"
python3 -m json.tool data.json > /dev/null2. 在故障发生的同一位置复现
很多误判来自测试位置不同：本机通不代表服务器通，容器内通不代表宿主机通，集群外通也不代表 Pod 内通。复现命令要尽量贴近真实流量路径。
- 从报错服务所在机器执行测试
- 必要时加 Host、SNI、namespace 或代理参数
- 把成功路径和失败路径的输出并排比较
python3 -m json.tool data.json > /dev/null
cat data.json | python3 -m json.tool
head -c 10 data.json | xxd | head3. 读取服务端证据，而不是只看客户端提示
客户端报错通常是结果摘要。真正能区分根因的是服务端日志、内核日志、事件、进程状态或数据库状态。
- 确认错误信息和行列号，JSON.parse 通常会给出大致位置。
- 检查 trailing comma（最后一个属性后多了逗号）。
- 确认字符串用双引号，不是单引号。
cat data.json | python3 -m json.tool
head -c 10 data.json | xxd | head
jq . data.json4. 做最小修复并立即回归验证
每次只改一个变量，修复后用同一条复现命令回测，并观察日志是否停止增长。这样可以避免多个临时改动互相掩盖。
- 确认字符串用双引号，不是单引号。
- 检查文件是否有 BOM 头或非 UTF-8 编码。
- 确认没有注释（JSON 不支持 // 和 /* */）。
head -c 10 data.json | xxd | head
jq . data.jsonCommands
排查命令与使用意图
命令 1
用于补充“JSON 解析失败常见原因与修复”的排查证据链。node 的输出需要结合上下文其他命令交叉验证，不要单独依赖某一条结果下结论。
node -e "JSON.parse(require('fs').readFileSync('data.json','utf8'))"命令 2
用于补充“JSON 解析失败常见原因与修复”的排查证据链。python3 的输出需要结合上下文其他命令交叉验证，不要单独依赖某一条结果下结论。
python3 -m json.tool data.json > /dev/null命令 3
用于读取日志或配置文件内容。重点看时间戳附近的 ERROR、FATAL、refused、timeout 等关键词。
cat data.json | python3 -m json.tool命令 4
用于读取日志或配置文件内容。重点看时间戳附近的 ERROR、FATAL、refused、timeout 等关键词。
head -c 10 data.json | xxd | head命令 5
用于补充“JSON 解析失败常见原因与修复”的排查证据链。jq 的输出需要结合上下文其他命令交叉验证，不要单独依赖某一条结果下结论。
jq . data.jsonRisk Notes
容易踩坑的地方
- 不要为了修 CORS 把所有来源、所有 Header 和 Credential 同时放开，这将产生严重的安全漏洞。
- 不要随手删除 lockfile 解决 install 问题，这会导致依赖版本不可控。
- 不要在未确认浏览器兼容性的情况下使用最新的 JavaScript API 或 CSS 特性。
Verification
修复后怎么确认
- 原始故障现象已经消失，且使用同一入口重新测试 JSON 解析失败常见原因与修复 能稳定成功。
- 服务端日志不再出现同类错误，监控中的错误率、重启次数、连接数或延迟回到正常区间。
- 如果做过临时绕过，已经记录恢复计划，例如还原宽松策略、补监控、补限制或提交正式配置。
Prevention
后续预防
- 把 Node/pnpm 版本、registry 和 CI 内存配置写入项目文档，确保环境一致。
- 新增 SSR 页面时检查 hydration warning，避免水合不匹配导致页面闪烁或交互异常。
- 接口跨域策略按域名白名单维护，不使用长期通配，降低安全风险。
- 在 CI 中使用 frozen lockfile 确保依赖版本可复现，避免本地和 CI 依赖不一致。
常见问题
JSON 为什么不支持注释？
JSON 规范设计上不支持注释。需要注释可用 JSONC（VS Code）或 JSON5，但标准 JSON 解析器会报错。
Unexpected token 报错怎么定位？
报错位置通常在错误字符处或下一个 token 处。检查该位置是否有单引号、trailing comma、未转义字符或控制字符。
Long-tail SEO
你可能正在搜索这些报错
下面这些错误原文、场景词和中英文搜索词，都是排查同类问题时常见的入口。
- JSON parse error
- JSON 解析失败 原因
- JSON trailing comma error
- JSON Unexpected token
- JSON.parse 报错 排查
- JSON 单引号 双引号
- JSON BOM 头 解析失败
- JSON 注释 不允许
Need More Help
这个问题还没完全解决？
把你的报错、环境和已经尝试过的步骤发给我，后续会优先补充到排障手册。