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

2022-08-30 18:03:13

一. 錯誤物件的型別

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 errorn    at <anonymous>:1:13",
//   "message": "This is an error"
// }"

以上為個人經驗，希望能給大家一個參考，也希望大家多多支援it145.com。