React生产环境出现“undefined”不是有效JSON错误排查求助

一、生产环境独现错误的原因 #

1. LocalStorage脏数据：开发环境中你可能之前登录过，LocalStorage里存的是有效的accessToken；但生产环境中，可能某次错误操作（比如代码bug导致存了undefined而非有效JSON），使得accessToken对应的值是字符串"undefined"，直接传给JSON.parse()就会触发语法错误——因为"undefined"不是合法的JSON格式。
2. 环境初始状态差异：生产环境是全新用户环境，首次访问时如果没有正确处理accessToken不存在的情况，或者之前遗留了脏数据，就会触发错误；而开发环境要么有有效数据，要么你手动清理过LocalStorage，所以没暴露问题。

二、调试排查步骤 #

1. 检查生产环境LocalStorage：打开生产环境页面，按F12打开开发者工具，切换到Application标签，找到Local Storage，查看accessToken的具体值。如果值是"undefined"或其他无效JSON，直接定位问题。
2. 模拟生产环境初始状态：在开发环境中，手动清除LocalStorage（右键Local Storage选择Clear），刷新页面看是否能复现错误。如果能复现，说明代码本身存在未处理边界情况的问题。
3. 添加临时调试日志：修改useToken.js的getToken函数，添加日志输出：

function getToken() {
    const tokenString = localStorage.getItem('accessToken');
    console.log('LocalStorage accessToken值:', tokenString); // 新增日志
    const userToken = JSON.parse(tokenString);
    // ... 其余代码
}

部署到生产环境后，打开控制台查看日志，确认tokenString的具体内容。

三、修复方案 #

修改useToken.js的getToken函数，增加边界判断和错误捕获，避免解析无效值：

function getToken() {
    const tokenString = localStorage.getItem('accessToken');
    // 先判断是否为空或无效字符串
    if (!tokenString || tokenString === "undefined") {
        return null;
    }
    try {
        const userToken = JSON.parse(tokenString);
        console.log("Found userToken");
        return userToken;
    } catch (err) {
        // 解析失败时清除脏数据，防止后续重复报错
        localStorage.removeItem('accessToken');
        return null;
    }
}

这样处理后，无论是accessToken不存在、存了"undefined"字符串，还是其他无效JSON，都能安全返回null，同时清除脏数据避免后续问题。

内容的提问来源于stack exchange，提问作者trinity