排查JSON解析報錯Uncaught SyntaxError: Unexpected token < in JSON at position 0

首先在埋點系統無法通過souremap看到錯誤信息，只能根據頁面進行綜合判斷，發現頁面代碼也沒有JSON.parse的使用，只有接口返回會用到。

JSON 值可以是：

 

數字（整數或浮點數）

字符串（在雙引號中）

邏輯值（true 或 false）

數組（在中括號中）

對象（在大括號中）

null

 

以<開始的返回值會有Unexpected token <這樣的提示。

<這個符號意味着返回值是HTML而不是JSON。

 

其他解析錯誤類型如下：

JSON.parse(''); // SyntaxError，待解析的字符串不能爲空

JSON.parse('{"x": 1}'); // {x: 1}, 屬性必須用雙引號括起來

JSON.parse('{"x": 1,}'); // SyntaxError,最後一個屬性不能有逗號

JSON.parse('[1,2,]'); // SyntaxError,最後一個屬性不能有逗號

JSON.parse('001'); // SyntaxError, 數字禁止有前導0

JSON.parse('11a'); // SyntaxError,不符合數值格式

JSON.parse('1.'); // SyntaxError，如果有小數點，則小數點後至少有一位數字

JSON.parse('"\n"'); // SyntaxError,控制字符不能被解析

JSON.parse(undefined); // SyntaxError

JSON.parse(NaN); // SyntaxError

JSON.parse(Infinity); // SyntaxError

 

控制檯進行操作演示常見的JSON解析錯誤：

模擬兩種接口返回解析報錯：

1、模擬服務器5xx報錯,然後客戶端請求後進行res.json會報json解析錯誤(其實就是解析了JSON.parse(undefined));

2、服務器返回html或者其他無法解析的json類型,也會出現解析錯誤，另外：res.ok爲true即(response status 200-299)跟返回結果是否可以解析爲json沒有關係

// 處理方法， 先判斷返回的數據是否可以被解析爲json, 可以的話才調用.json() 方法

fetch('http://localhost:9000/yyy', {
  method: 'POST',
})
  .then(async (response) => {
        // 克隆一份返回數據流 因爲只能被解析一次 判斷返回結果是否可以被JSON.parse
        const rpsStr = await response.clone().text();
        try {
          JSON.parse(rpsStr);
          return response.json();
        } catch (e) {
          return response.text();
        }  
 
  })
  .then((result) => {
    console.log('Success:', result);
  })
  .catch((error) => {
         console.error('Error:', error);
  })

// 公共方法

/**
 * 判斷字符串是否可以被JSON.parse 避免解析錯誤
 * @param str
 * @returns {boolean}
 */
export function isJSON(str) {
  if (typeof str === 'string') {
    try {
      JSON.parse(str);
      return true;
    } catch (e) {
      return false;
    }
  }
}