[FE] FIX: 모바일로 접속시 발생되는 firebase error 해결 #1680

[jnkeniaem]

해당 사항 (중복 선택)

• FEAT : 새로운 기능 추가 및 개선
• FIX : 기존 기능 수정 및 정상 동작을 위한 간단한 추가, 수정사항
• BUG : 버그 수정
• REFACTOR : 결과의 변경 없이 코드의 구조를 재조정
• TEST : 테스트 코드 추가
• DOCS : 코드가 아닌 문서를 수정한 경우
• REMOVE : 파일을 삭제하는 작업만 수행
• RENAME : 파일 또는 폴더명을 수정하거나 위치(경로)를 변경
• ETC : 이외에 다른 경우 - 어떠한 사항인지 작성해주세요.

설명

문제1

api_response_delay.mov

api_calls_on_save_click.mov

내 정보 - 알림에서 가끔 알림 설정 변경시 브라우저 알림 권한 요청 보낸 후 응답 수신까지 2~3초 정도 소요.
응답 받기 전까지
1. 설정이 변경되고 있는건지 아님 클릭이 안된건지 알 수가 없었음.(작업 수행중임을 알려주는 UI 부재)
2. 저장 버튼 클릭할때마다 api 요청 보내짐

문제1 해결

solved.mov

(영상에서 저장버튼 hover시 깨지는데 아래 커서로 바뀌는거에요!)

• IButtonProps에 isLoading 추가
• api 요청 후 응답 수신전까지 저장 및 취소 버튼에 isLoading : true로 설정 후,
  isLoading이면 저장 버튼 hover시 cursor 속성값 wait으로, 취소 버튼 hover시 not-allowed로 변경

2. debounce 적용

문제2

아이폰으로 cabi 홈페이지 접속시(PWA 포함) "FirebaseError Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser)." 에러 발생

dev 환경에서 테스트 하고자 했으나 아이폰으로 https://dev.cabi.42seoul.io 접속시 해당 에러가 발생하지 않아 테스트 불가
(왜 dev 환경에선 에러 발생하지 모르겠어요 ㅠ.ㅠ)

문제2 에러 원인으로 추측되는 곳 수정

예상 원인 : getMessaging 함수를 브라우저 환경이 아닐때 호출해서

cf) FCM의 getMessaging : 웹 브라우저나 모바일 애플리케이션에서 푸시 메시지를 수신하는 데 사용

기존 코드

const messaging = getMessaging(app);

getMessaging 함수가 브라우저 환경이 아닐때도 호출될 수 있다.

수정 코드

let messaging: null | Messaging = null;
if (typeof window !== "undefined" && typeof window.navigator !== "undefined") {
  messaging = getMessaging(app);
}

브라우저 환경에서만 getMessaging 호출 가능하게 변경

‼️ 의견이 필요한 부분 ‼️
아래는 requestFcmAndGetDeviceToken 함수에서 브라우저 환경이 아닐때 messaging 사용하는 것을 방지하는 코드인데,

if (!messaging) {
    console.log("토큰 생성 또는 갱신 실패");
    return null;
}

console에 출력하는 것 외에 더 좋은 방법 추천 받습니다. 편하게 의견 주세요 !

문제3

중요하지 않은 센트리 알림 수신

문제3 해결

401 bad request는 센트리에 로깅할만한 중요한 에러가 아니라 판단해서 logAxiosError 함수에 401의 경우 센트리 로깅에서 제외하는 코드(⬇️)를 추가했습니다.

if (error.response?.status === HttpStatusCode.BadRequest) return;

문제4

axios custom, 파일, 함수 등의 이름에 notification, alarm 혼용으로 인한 혼돈

문제4 해결

Profile과 Admin Slack 부분의 Notification을 Alarm 으로 변경해 백엔드와 통일했습니다.

#1680

[github-actions]

해당 PR은 지난 30일 동안 활동이 없어서 "stale" 상태로 표시되었어요. 3일 이내에 "no stale"으로 태그가 지정되거나 다른 활동이 발생하지 않으면 자동으로 닫힐 예정입니다. 해당 PR이 "stale" 상태로 표시되지 않기를 원하면 이 PR에 코멘트를 남겨주세요.

[jimchoi9]

debouncing 개념에 대해 숙지가 잘 안되어있었는데 덕분에 새롭게 공부할 수 있는 계기가 되었습니다~! 고생하셨습니다!!

[jimchoi9]

debounce 적용으로 무한 요청을 막을 뿐 아니라 cursor 아이콘 변경을 통해 사용자가 직관적으로 알 수 있도록 한 점이 인상깊어요! 덕분에 공부가 많이 되었습니다!