Chrome에서 HTML5 Geolocation 거부·타임아웃 콜백 처리하기

Chrome에서 HTML5 Geolocation 콜백이 호출되지 않는 문제

Google Chrome에서 navigator.geolocation.getCurrentPosition()을 사용하다 보면 위치 정보 요청이 거부되거나 타임아웃이 발생했는데도 성공(success) 또는 오류(error) 콜백이 전혀 호출되지 않는 경우가 있습니다. 브라우저가 사용자의 권한 응답을 계속 기다리는 동안 아무런 피드백 없이 대기 상태에 머물기 때문입니다.

해결 방법: 플래그 변수와 setTimeout 조합

아래 코드는 콜백의 실행 여부를 추적하는 플래그 변수와 setTimeout을 함께 사용하여, 일정 시간 내에 어떤 콜백도 호출되지 않으면 이를 감지할 수 있도록 만든 패턴입니다.

_callback = false;
function successCallback(position) {
    _callback = true;
    console.log('success');
}

function errorCallback(error) {
    _callback = true;
    alert('error');
}
setTimeout(function(){if(!_callback)console.log('ignored')}, 20000);

navigator.geolocation.getCurrentPosition(
    successCallback,
    errorCallback,
    {timeout: 2000}
);

코드 동작 원리

• _callback 변수: 성공 또는 오류 콜백이 이미 실행되었는지 여부를 저장하는 플래그입니다.
• successCallback: 위치 정보를 성공적으로 가져오면 실행되며, 플래그를 true로 설정합니다.
• errorCallback: 요청이 거부되거나 오류가 발생하면 실행되어 사용자에게 알림을 표시합니다.
• setTimeout(20초): 20초가 지난 후에도 콜백이 한 번도 호출되지 않았다면 'ignored'를 출력하여 해당 요청이 무시되었음을 감지합니다.

이처럼 옵션의 timeout: 2000 설정만으로는 Chrome에서 콜백이 확실히 호출된다는 보장이 없으므로, 위와 같은 자체 타임아웃 로직을 추가하면 응답 없이 멈추는 상황을 안정적으로 처리할 수 있습니다. 이 패턴은 Chrome뿐 아니라 다른 브라우저 환경에서도 지오로케이션 요청의 신뢰성을 높이는 데 유용하게 활용할 수 있습니다.