Safari의 JS 비동기 실행 특성에 따른 중복 Redirect 문제 해결

Why Safari Said 'Link Not Found' (And Chrome Didn't)

Anand Rathnas2026년 4월 22일4분intermediate

AI 요약

Context

URL Shortener 서비스의 Safari 브라우저 환경에서 간헐적인 'Link Not Found' 에러 발생. window.location.href 설정 이후에도 JS 실행을 중단하지 않는 Safari의 특성과 React의 State 업데이트로 인한 useEffect 재실행이 결합되어 발생한 레이스 컨디션 문제.

Technical Solution

useRef 기반의 Guard 변수 도입을 통한 중복 함수 실행 원천 차단
useState 대신 useRef를 선택하여 상태 변경으로 인한 불필요한 Re-render 및 Callback identity 변경 방지
Redirect 성공 직후 hasRedirected.current 값을 true로 변경하여 후속 API 요청 차단
Password-protected URL의 재시도 케이스를 고려한 조건부 Guard 로직 설계
로컬 재현 불가 문제를 해결하기 위해 localStorage 기반의 Timestamp 로그 instrumentation 적용 및 분석

실천 포인트

1. window.location.href 호출 후 브라우저별 JS 실행 중단 시점 차이 검토

2. useEffect의 의존성 배열에 포함된 상태를 해당 Effect 내부에서 업데이트할 때 발생하는 무한 루프 가능성 확인

3. UI 렌더링과 무관하게 상태를 유지해야 하는 Guard 로직에는 useState가 아닌 useRef 사용

4. 재현 불가능한 프로덕션 버그 해결을 위해 클라이언트 사이드 디버그 로그 수집 체계 구축

태그

#Client-side Instrumentation #React #Race Condition #Browser Compatibility #useRef

원문 읽기