JS中的Error對象及使用JSON.stringify()序列化Error問題

Posted on by

一. 錯誤對象的類型

  • Error： 所有錯誤類型的父類型；
  • SyntaxError： 語法錯誤，表示程序的語法使用錯誤；
console.log(" "" ") ;
// Uncaught SyntaxError: missing ) after argument list
  • ReferenceError: 引用錯誤，表示引用的變量不存在；
console.log(a);
// Uncaught ReferenceError: a is not defined
  • TypeError: 類型錯誤，表示使用瞭錯誤的數據類型
let a;
console.log(a.name);
// Uncaught TypeError: Cannot read properties of undefined (reading 'name')
RangeError：范圍錯誤， 數據值不在其所允許的范圍內（函數遞歸調用容易出現此錯誤）

// 保留小數點多少位
(10.24).toFixed(-1)；  // toFixed() digits argument must be between 0 and 100
URIError： URI錯誤，向全局 URI 處理函數（decodeURI、decodeURIComponent）傳遞一個不合法的URI時，URIError 錯誤會被拋出

// 解碼URI地址   錯誤：格式不正確
console.log(decodeURI("%") );   // URIError: URI malformed

以上都是不同錯誤類型的 Error構造函數，能通過new 創建錯誤對象

錯誤處理

捕獲錯誤 try … catch

try {
    // 正常書寫的程序代碼（可能會出錯的代碼）
} catch (err) {
    // err: try中執行語句發生錯誤時，自動創建err錯誤對象，並將錯誤信息保存在對象err中
    // 執行錯誤處理
} finally {
    // 一般用於釋放資源
    // finally 可有可無，因為try ... catch 之後的代碼本來就會執行
}
  • 放在try…catch中的代碼，執行效率會降低；
  • 盡量少的將代碼放入try…catch中；
  • 如果可提前預知錯誤原因，可用 if…else 代替，提前預防錯誤。

拋出錯誤 throw error

通過throw，主動拋出異常錯誤；

throw new Error("錯誤信息");

錯誤對象的屬性：

  • name屬性： 錯誤類型；
  • message屬性： 錯誤相關的描述信息；
  • stack 屬性：函數調用棧記錄信息（錯誤相關信息，錯誤出現的位置）
try{
    console.log(a);    
} catch (err) {
    console.log(err.name);        // ReferenceError
    console.log(err.message);     // a is not defined
}

二.使用JSON.stringfy()去序列化一個 Error

最近在做Node 服務端 測試的時候，遇到 打log JSON.stringify(error)為{}的問題，這樣的情況導致根本無法定位到具體問題。

例如： 

JSON.stringify()： 它能夠方便地把一個對象轉化成字符串；

但是，它也有一個較大的缺點，就是無法直接處理如Error 這類的對象。

const err = new Error('This is an error')
JSON.stringify(err)
// '{}'

在控制臺運行上述代碼後會發現，JSON.stringify() 的結果是一個字符串的 "{}"，裡面沒有任何有效內容。這是否意味著 JSON.stringify() 確實無法處理 Error 呢？下面我們來看看在 MDN 裡這個函數是如何定義的。

MDN 定義

JSON.stringify()將值轉換為相應的JSON格式：

  • 轉換值如果有toJSON()方法，該方法定義什麼值將被序列化。
  • 非數組對象的屬性不能保證以特定的順序出現在序列化後的字符串中。
  • 佈爾值、數字、字符串的包裝對象在序列化過程中會自動轉換成對應的原始值。
  • undefined、任意的函數以及 symbol 值，在序列化過程中會被忽略（出現在非數組對象的屬性值中時）或者被轉換成 null（出現在數組中時）。函數、undefined被單獨轉換時，會返回undefined，如JSON.stringify(function(){}) or JSON.stringify(undefined).
  • 對包含循環引用的對象（對象之間相互引用，形成無限循環）執行此方法，會拋出錯誤。
  • 所有以 symbol 為屬性鍵的屬性都會被完全忽略掉，即便 replacer 參數中強制指定包含瞭它們。
  • Date日期調用瞭toJSON()將其轉換為瞭string字符串（同Date.toISOString()），因此會被當做字符串處理。
  • NaN和Infinity格式的數值及null都會被當做null。
  • 其他類型的對象，包括Map/Set/weakMap/weakSet，僅會序列化可枚舉的屬性。

“僅會序列化可枚舉的屬性”，是什麼意思呢？眾所周知，在 JS 的世界中一切皆對象，對象有著不同的屬性，這些屬性是否可枚舉，我們用 enumerable 來定義.

對象屬性的 enumerable

舉個例子，我們用 obj = { a: 1, b: 2, c: 3 } 來定義一個對象，然後設置它的 c 屬性為“不可枚舉”，看看效果會如何：

首先看處理前的效果：

const obj = {a: 1,b: 2,c: 3};
JSON.stringify(obj)
// '{"a":1,"b":2,"c":3}'

再看處理後的效果：

const obj = { a: 1, b: 2, c: 3 }
 
Object.defineProperty(obj, 'c', {
  value: 3,
  enumerable: false
})
 
JSON.stringify(obj)
 
// => "{"a":1,"b":2}"

可以看到，在對 c 屬性設置為不可枚舉以後，JSON.stringify() 便不再對其進行序列化。

我們把問題再深入一些，有沒有辦法能夠獲取一個對象中包含不可枚舉在內的所有屬性呢？答案是使用 Object.getOwnPropertyNames() 方法。

依然是剛剛被改裝過的 obj 對象，我們來看看它所包含的所有屬性：

Object.getOwnPropertyNames(obj)
 
// => ["a", "b", "c"]

不可枚舉的 c 屬性也被獲取到瞭！

用同樣的方法，我們來看看一個 Error 都包含哪些屬性：

const err = new Error('This is an error')
Object.getOwnPropertyNames(err)
 
// => ["stack", "message"]

可以看到，Error 包含瞭 stack 和 message 兩個屬性，它們均可以使用點運算符 . 從 err 實例裡面拿到。

既然我們已經能夠獲取 Error 實例的不可枚舉屬性及其內容，那麼距離使用 JSON.stringify() 序列化 Error 也已經不遠瞭！

JSON.stringify() 的第二個參數

JSON.stringify() 可以接收三個參數：

語法：

JSON.stringify(value[, replacer [, space]])
  • value
  • 將要序列化成 一個JSON 字符串的值。
  • replacer 可選
  • 如果該參數是一個函數，則在序列化過程中，被序列化的值的每個屬性都會經過該函數的轉換和處理；如果該參數是一個數組，則隻有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中；如果該參數為null或者未提供，則對象所有的屬性都會被序列化。
  • space 可選
  • 指定縮進用的空白字符串，用於美化輸出（pretty-print）；如果參數是個數字，它代表有多少的空格；上限為10。該值若小於1，則意味著沒有空格；如果該參數為字符串(字符串的前十個字母)，該字符串將被作為空格；如果該參數沒有提供（或者為null）將沒有空格。
  • 返回值 節
  • 一個表示給定值的JSON字符串。

我們來看 replacer 的用法： 

 ……如果該參數是一個數組，則隻有包含在這個數組中的屬性名才會被序列化到最終的 JSON 字符串中……

依然使用上文的 obj 為例子：

const obj = { a: 1, b: 2, c: 3 }
 
Object.defineProperty(obj, 'c', {
  value: 3,
  enumerable: false
})
 
JSON.stringify(obj, ['a', 'c'])
 
// => "{"a":1,"c":3}"

可以看到，我們在 replacer 中指定瞭要序列化 a 和 c 屬性，輸出結果也是隻有這兩個屬性的值，且不可枚舉的 c 屬性也被序列化瞭！守得雲開見月明，Error 對象被序列化的方法也就出來瞭：

const err = new Error('This is an error')
 
JSON.stringify(err, Object.getOwnPropertyNames(err), 2)
 
// => 
// "{
//   "stack": "Error: This is an error\n    at <anonymous>:1:13",
//   "message": "This is an error"
// }"

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：