-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
4 changed files
with
90 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,90 @@ | ||
--- | ||
title: 'JSON.stringify(error)는 {}이다?' | ||
date: '2024-05-22' | ||
slug: '2024-05-22' | ||
type: 'road' | ||
--- | ||
|
||
## 문제 상황 | ||
|
||
에러 상황에서 발생한 로그를 문자열로 변환해서 확인해야 하는 일이 발생했다. 😵 | ||
|
||
처음에는 단순히 문자열로 바꾸면 된다고 생각해서 `JSON.stringify()`를 활용했다. | ||
|
||
```js | ||
try { | ||
throw new Error('에러가 발생했습니다..!') | ||
} catch (err) { | ||
console.error(JSON.stringify(err)) | ||
} | ||
``` | ||
|
||
<br /> | ||
|
||
제대로 에러에 대한 정보를 얻을 수 있을 것 같았는데 막상 확인해보니 `{}`가 출력되었다. | ||
|
||
<Image | ||
src="https://raw.githubusercontent.com/jgjgill/blog/main/roads/images/stringify-error-console.png" | ||
alt="JSON.stringify() Error 콘솔" | ||
/> | ||
|
||
## 해결 과정 | ||
|
||
제대로 동작하게 만들어주는 코드부터 살펴보면 다음과 같다. | ||
|
||
```ts | ||
JSON.stringify(err, Object.getOwnPropertyNames(err)) | ||
``` | ||
|
||
### Error 객체는 열거 가능한 속성이 존재하지 않는다. | ||
|
||
왜 이런 현상이 발생한 것일까? | ||
|
||
`JSON.stringify()`를 사용할 때 객체의 경우 **열거 가능한 속성만 직렬화가 가능**하다. | ||
|
||
<br /> | ||
|
||
하지만 `Error` 객체의 모든 속성은 `enumerable`값이 `false`로 열거 가능한 속성이 존재하지 않는다. | ||
|
||
`Object.getOwnPropertyDescriptors()`를 통해 객체의 모든 속성 설명자를 확인할 수 있다. | ||
|
||
```js | ||
Object.getOwnPropertyDescriptors(new Error({ test: 'jgjg' })) | ||
``` | ||
|
||
<Image | ||
src="https://raw.githubusercontent.com/jgjgill/blog/main/roads/images/get-own-property-descriptors-example.png" | ||
alt="getOwnPropertyDescriptors 예제" | ||
/> | ||
|
||
<br /> | ||
|
||
그래서 `Error`의 속성들을 열거 가능하도록 바꾸는 것이 필요하다. | ||
|
||
<br /> | ||
|
||
`Object.getOwnPropertyNames()`는 열거할 수 없는 속성을 포함한 모든 속성을 배열로 반환한다. | ||
|
||
해당 값을 `JSON.stringify()`의 두 번째 매개변수에 넣어 변환에 포함시키자. | ||
|
||
```js | ||
try { | ||
throw new Error('에러가 발생했습니다..!') | ||
} catch (err) { | ||
console.error(JSON.stringify(err, Object.getOwnPropertyNames(err))) | ||
} | ||
``` | ||
|
||
<br /> | ||
|
||
이렇게 수정하면 정상적으로 에러가 출력이 된다. 🧐 | ||
|
||
<Image | ||
src="https://raw.githubusercontent.com/jgjgill/blog/main/roads/images/stringify-success.png" | ||
alt="JSON.stringify() 정상 출력" | ||
/> | ||
|
||
### 참고 문서 | ||
|
||
- [Is it not possible to stringify an Error using JSON.stringify?](https://stackoverflow.com/questions/18391212/is-it-not-possible-to-stringify-an-error-using-json-stringify) | ||
- [Stringify and Parse Errors in JavaScript](https://zirkelc.dev/posts/stringify-and-parse-errors-in-javascript) |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.