문제 상황
•
어떤 것을 하려다가 문제가 발생했는가?
아이폰 Safari에서 웹 푸시 알림 설정을 변경했을때 FirebaseError 발생하고, 사용자에게 실제 설정 변경 여부와 관계없이 ‘설정이 저장되었습니다’라는 정상 문구 안내
•
발생한 환경
◦
PROD ONLY(DEV에서는 재현 불가)
•
발생한 문제(에러)
◦
에러 메시지
Messaging: This browser doesn't support the API's required to use the Firebase SDK. (messaging/unsupported-browser).
TypeScript
복사
•
에러 발견 방법 : Discord와 연동된 Sentry 에러 알림 수신
원인
•
추정되는 원인
◦
getMessaging 함수를 브라우저 환경이 아닐 때 호출한다고 판단
FCM(Firebase Cloud Messaging)의 getMessaging
•
FCM의 기능을 사용하기 위해 필요한 messaging 객체를 반환
•
웹 브라우저나 모바일 애플리케이션에서 푸시 메시지를 수신하는 데 사용
•
실제 원인
◦
PR 리뷰 중 팀원의 도움으로 일부 브라우저에서 Firebase Messaging API의 필수 기능이 지원되지 않는 것을 알게됐고, 이에 대한 예외 처리 로직의 부재가 근본적인 원인임을 파악함 < 무작정 구글링하지 말고 에러 메시지에 더 집중할걸,,
◦
에러 발생 패턴 분석: Sentry 대시보드 확인 및 직접적인 브라우저 테스트를 통해 에러가 특정 브라우저에서만 반복적으로 발생하는 것을 확인
최종 해결
•
해결방법
◦
isSupported()를 활용한 브라우저 지원 여부 검증 로직을 추가해서 FCM API를 지원하는 환경에서만 푸시 알림 관련 기능이 작동하도록 개선하고, 지원하지 않는 환경 사용자에게는 적절한 안내 메시지(데스크탑 이용 권장) 제공하여 사용자 경험 개선
◦
코드
// 사용자 브라우저가 푸시 알림 기능을 지원하는지 확인
const checkBrowserSupport = async () => {
const isApiSupported = await isSupported();
if (isApiSupported) messaging = getMessaging(app);
else {
let error = new Error(unsupportedMsg);
error.name = "브라우저 알림 지원 제한";
throw error;
}
};
// FCM APP을 등록 후 브라우저 알림 권한을 요청하고, 토큰을 반환
export const requestFcmAndGetDeviceToken = async (): Promise<string | null> => {
checkBrowserSupport(); //
...
const token = await getToken(messaging!, {
...
}
// FCM 토큰 제거 및 브라우저 알람 권한 해제
export const deleteFcmToken = async (): Promise<void> => {
checkBrowserSupport(); //
await deleteToken(messaging!);
...
}
TypeScript
복사
1.
브라우저 지원 여부 확인 추가(checkBrowserSupport)
•
isSupported()로 FCM API 지원 여부를 체크하는 로직 추가
•
지원 → 에러 처리 → 사용자 안내 메시지 모달 띄움
→ 에러 처리 → 사용자 안내 메시지 모달 띄움
2.
FCM API 호출 전 호환성 검증 로직 적용
•
FCM 토큰을 요청(requestFcmAndGetDeviceToken)하거나 삭제(deleteFcmToken)할 때 무조건 checkBrowserSupport 호출 → 브라우저가 푸시 알림을 지원하지 않으면 동작하지 않도록 방지
