Sentry에서 발생한 Date에러

Sentry에서 에러가 발생했다. Date객체인 date에서 에러가 발생했다. 이는 Date객체라고 하여 Safari와 Chrome의 Date객체를 해석하는 방식이 다르다는 것 때문에 발생한 것이 아닐까 생각했다.

문제점 : 기존의 useBrowser

export default function useBrowser() {
  const [browser, setBrowser] = useState('');
  const mobileDevice = getMobileDivce();

  useDidMount(() => {
    const agent = navigator.userAgent;
    if (agent.includes('Chrome')) setBrowser('chrome');
    if (agent.includes('Safari') || mobileDevice === 'ios') setBrowser('safari');
  });

  return browser;

navigator.agent로 분기처리하여 ‘Chrome’을 가지고 있다면 chrome브라우저로, Safari 혹은 ios를 가지고 있다면 safari브라우저로 체크한다. 아이폰 앱의 웹뷰는 Safari 기반, 안드로이드 앱의 웹뷰는 Android 기반으로 동작하기에 채택한 방식이다.

이 useBrowser를 테스트하기 위해 실행을 해보았다.

1. Chrome환경 : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/120.0.0.0 Safari/537.36
2. safari환경 : Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/605.1.15 (KHTML, like Gecko) Version/17.1.2 Safari/605.1.15

Safari환경에서는 그렇다 쳐도, Chrome환경에서도 AppleWebKit, Safari와 같은 키워드가 들어가 있는 것이다.

navigator.userAgent가 뭔데?

• navigator.userAgent

window 전역 객체에는 Location, navigator, web storage등 다양한 프로퍼티가 존재한다. window 전역 객체는 식별자 window.을 앞에 붙이지 않고도 객체 내 프로퍼티에 접근이 가능하다.

그 중 하나가 navigator인데, navigator에는 userAgent라는 객체가 존재한다. userAgent는 Mozilla 버전 + OS 정보 + 렌더링 엔진 정보 + 브라우저 이름의 형태로 이루어진다.

navigator 객체의 경우 location과 달리 writable 속성의 값이 false이므로 직접 값을 할당할 수 없다.

각 브라우저 별 userAgent는 다음과 같다.

1. Firefox : Mozilla/5.0 (Windows NT 10.0; Win64; x64; rv:99.0) Gecko/20100101 Firefox/99.0
2. Chrome : Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/100.0.4896.75 Safari/537.36