TIL - 20230320

 

 

최종프로젝트 직전 작업한 타입스크립트 프로젝트에서 이슈 발견하여

해당 프로젝트 레포지토리에 이슈 작성함.

 

이슈 🚨

사이트 접속 시 특정 사용자에게만 자동 로그인과 마이페이지 접속 시 구문 에러(SyntaxError) 발생.

1. 첫 번째 이슈 🔥

• 사이트 접속 시 정상 출력 화면.

• 사이트 접속 시 특정 사용자 자동 로그인된 화면.

=> 해당 프로젝트는 로그인 정보를 세션 스토리지에 저장하고 있기 때문에 비로그인 상태로 접속이 되는 것이 정상임.

2. 두 번째 이슈 🔥

• 정상 출력된 마이페이지.

• 특정 사용자 마이페이지 접근 시 나타나는 구문 에러.

=> 로그인 후 정상적으로 접근이 가능하던 마이페이지에 특정 사용자가 접근하면 해당 에러가 발생하며 렌더링이 되지 않음.

=> 해당 에러가 가리키는 코드. 특정 사용자(1명) 제외 사용자들은 해당 코드에서 아무 문제가 없었음.
=> 특정 사용자 또한 프로젝트 완성 후 최소 일주일 1회 이상 해당 사이트에 방문하며 이슈 없었으나 지난주(3. 13~ 3. 17) 사이 해당 이슈 발견함.

 

 

 

정상적으로 들어오는 키(왼쪽), 에러 발생하는 특정 사용자에게 들어오는 키(오른쪽)

- 특정 사용자에게만 다른 세션스토리지 키 값이 들어오는 것을 인지하고 있었으나 해당 키 내 키워드들을 구글링, 에디터 내 전역 검색 해봐도 이렇다할 결과가 없어 원인을 찾을 수 없었음.

- 해당 이슈를 주말 이틀과 오늘 월요일 하루 내내 해결을 못하다가 오후가 되서야 해결할 수 있었는데 원인 모를 키의 https 주소 앞 키워드를 검색하니 이슈와 연관 없어 보이는 크롬 디벨로퍼스 사이트가 나온 것.

- 이 사이트 내에서 이슈와 조금이라도 관련된 키워드 등을 찾고 싶었으나 찾을 수 없었고 특정 사용자의 pc에 설치된 확장프로그램까지 찾아보게 되었음.

 

- 확장 프로그램들을 전부 비활성화 시킨 후 다시 접속해 본 결과 해당 이슈를 발견한 특정 사용자에게서도 올바른 세션스토리지 키가 들어옴을 발견함.

- 프로그램들을 하나하나 활성/비활성을 반복한 결과 Live color picker 라는 익스텐션이 활성화되면 원인 모를 키가 들어옴을 인지.

- 저 녀석을 삭제해 이슈 해결. 넌 이제 쓸 일 없다.

 

  // const isLoggedIn = sessionStorage.key(0);
  const isLoggedIn = sessionStorage.getItem(
    `firebase:authUser:${firebaseConfig.apiKey}:[DEFAULT]`,
  );

- 차후 혹시 모를 변수에 대비해 기존 헤더 컴포넌트에서 세션스토리지의 첫 번째 키로 로그인 유저를 확인하던 방식을 해당 에러처럼 특정 사용자가 크롬 익스텐션과의 이슈로 잘못된 키 값을 받아와 유저 확인이 불가능할 수 있으니 세션스토리지의 파이어베이스 키 값 만을 가져오게 수정함.

 

깃헙 이슈 기록

https://github.com/kimwonjuun/no-sunday/issues/68