SyntaxError: "undefined' is not valid JSON (JSON.parse 에러)

 

 

너무 무서운 에러를 만났다.

SyntaxError: "undefined' is not valid JSON

 

 

 

문자열을 JSON.parse로 파싱할 때 흔하지는 않지만 그래도 

누군가에게도 발생했던 에러였다.

 

 

특히 refresh 같은 기능을 사용해서 데이터를 받아 올 때 

저렇게...

끊임없이 콘솔을 도배하는....

 

 

아주 무시무시한 현상이기에

얼른 에러를 해결해 보기로 하자!!! 

 

 

 

-

JSON.parse() 에러 해결

 

 

try { ... } catch { ... } 사용 

 

 

보통 많이 사용하는 방법이다. 

JSON.parse() 호출을 try catch문으로 감싸 실패한 경우 발생할 일들을 지정해 놓을 수 있는 방법

try {
	// 에러 발생이 예상되는 코드
} catch (error) {
	// try에서 발생한 예외 코드 or error객체를 인수로 받아 처리 
}

 

 

undefined 확인하기

 

null 값과 '' 빈 문자열은 JSON에서 유효한 값이다. 

하지만 undefined는 유효하지 않은 값이다. 

 

특히 나에게 발생한 에러도 바로 이런 상황이었다.

그래서 swith case를 사용해 case 'string' ... case 'json' 을 구분해 놓았는데도

json으로 가지 못해 값을 화면에 보여주지 못하고 있었다.

 

확인해보니 

받아오는 value 값에 null과 '' 빈 문자열에 대한 처리는 해놓았지만 

undefined가 들어올 때의 상황을 작성해 놓지 않았다.

 

 

기존: value의 null과 '' 빈 문자열만 고려함 

if (value !== '') {

	...

}

 

 

수정: undefined일 때의 상황 추가

let parseValue = (typeof value === 'undefined') ? null : value;

 

기본 문법은 저렇다.

 

오류를 고친 과정의 코드 전문을 공개할 수 없지만

좀 더 복잡한 상황이기에 value 들을 swith case 'json'안에서

typeof를 확인하여 비교해서 처리할 수 있게 if 문으로 작성하였다.

 

 

들어오는 value의 type을 미리 확인해서 (알고 있어서) 좀 더 자세히 처리할 수 있다면  

swith(){
case 'string' :
    ... //코드
    break;
    
case 'json' :
    if (typeof value === 'string' && value) {
    	... //코드
    }
    
    if (typeof value === 'object') {
    	... ///코드 
    }
	break;
}

 

 

 

이 외에도 
JSON.parse() 사용 시 다양한 방법으로 에러를 핸들링할 수 있는 거 같았다.
아직 완벽히 공부가 되지 않고 또 그 예제들은 사용해보지 못해 블로그에 기록하지는 못하지만 



꼭 공부해서 
다시 포스팅하러 돌아오겠다.

 

 

 

 

(틀린 내용 피드백은 언제든지 환영🤓)