[JS] undefined 참조 에러 체크의 중요성

문제 상황

코드의 undefined 참조 에러 체크가 안되어 있어서 예기치 못한 에러가 난 상황이 있었다.

 

비슷한 로직으로 코드를 다시 구성을 해보았다.

import UAParser from 'ua-parser-js';

.
.
.

const isUnsupportedBrowser = (ua) => {
  
  const { name, version } = new UAParser(ua).getBrowser();
  const versionNum = parseInt(version.split('.')[0], 10);
  
  if (name === 'IE') {
   // IE 일경우 처리	...
  } else if (name === 'Samsung Browser') {
   // Samsung Browser 일경우 처리	...
  } else if (name === 'Mobile Safari' || name === 'Safari') {
	...
  }
};

.
.
.

 

원인 분석 및 해결

이 부분에서 생길 수 있는 문제는 바로 version이 없는 경우에 version.split 을 호출 했을때 에러가 날 수 있다.

값이 있을지 장담하지 못하는 부분에는 일일히 체크를 해주어야 한다.

.
.
.

const isUnsupportedBrowser = (ua) => {
  
  const { name, version } = new UAParser(ua).getBrowser();

  // 여기에 일종의 널체크가 들어가야 할것 같습니다. 
  if (!version) return true;

  const versionNum = parseInt(version.split('.')[0], 10);
  
  if (name === 'IE') {
   // IE 일경우 처리	...
  } else if (name === 'Samsung Browser') {
   // Samsung Browser 일경우 처리	...
  } else if (name === 'Mobile Safari' || name === 'Safari') {
	...
  }
};

.
.
.

 

자바스크립트는 런타임 전에 타입에 대한 안정성 체크를 하기 힘들기 때문에 이런 문제를 자주 만나는 것 같다.