RxJS结合HTML Geolocation API首次定位后返回POSITION_UNAVAILABLE错误

你遇到的核心问题是：原生navigator.geolocation.watchPosition触发错误后不会停止监听，仍会尝试获取后续位置，但你在RxJS封装中调用了observer.error(error)，这会直接终止整个Observable流。当用Chrome调试修改位置触发POSITION_UNAVAILABLE时，流就断了，只能靠repeat()重新订阅——这就是临时重试方案不够优雅的原因。而React Hook方式没这个问题，大概率是Hook里没有把错误抛成流的终止信号，而是做了内部处理。

修改RxJS Observable的错误处理逻辑，不要让错误终止流，以下是两种可选方案：

方案1：忽略错误，继续监听位置 #

直接在onError里不调用observer.error，流不会终止，后续位置更新仍能正常接收：

import {Observable} from 'rxjs';
import {action, observable} from 'mobx';

export default class GeoLocationState {
    public static createState() {
        return new GeoLocationState();
    }

    public readonly locationWatcher$: Observable<GPSPosition>;

    private constructor() {
        this.locationWatcher$ = new Observable<GPSPosition>((observer) => {
            const onSuccess: PositionCallback = (position) => {
                observer.next({
                    latitude: position.coords.latitude,
                    longitude: position.coords.longitude,
                    accuracy: position.coords.accuracy,
                    speed: position.coords.speed,
                    heading: position.coords.heading,
                    timeStamp: position.timestamp,
                    altitude: position.coords.altitude,
                    altitudeAccuracy: position.coords.altitudeAccuracy,
                });
            };
            // 修改错误处理：不终止流，仅记录错误
            const onError: PositionErrorCallback = (error) => {
                console.warn('获取位置失败:', error);
                // 可选：若需上层感知错误，可emit null后续处理
                // observer.next(null);
            };

            const watcherId = window.navigator.geolocation.watchPosition(onSuccess, onError, {
                enableHighAccuracy: true,
                maximumAge: 500,
            });

            return () => {
                window.navigator.geolocation.clearWatch(watcherId);
            };
        });
    }
}

export interface GPSPosition {
    latitude: number;
    longitude: number;

    accuracy: number;
    timeStamp: number;
    altitude: number | null;
    speed: number | null;
    heading: number | null;
    altitudeAccuracy: number | null;
}

订阅代码可简化，无需catchError和repeat()：

const watchLocationSubscription = state.getState(GeoLocationState).locationWatcher$
.subscribe({
    next: (position) => {
        // 处理位置更新逻辑
    },
});

方案2：把错误作为数据流的一部分（推荐） #

若需上层代码感知错误，可定义联合类型让Observable同时emit位置或错误，既不终止流，又能处理错误：

// 定义联合类型区分成功/错误结果
type LocationResult = { type: 'success'; position: GPSPosition } | { type: 'error'; error: GeolocationPositionError };

export default class GeoLocationState {
    public static createState() {
        return new GeoLocationState();
    }

    public readonly locationWatcher$: Observable<LocationResult>;

    private constructor() {
        this.locationWatcher$ = new Observable<LocationResult>((observer) => {
            const onSuccess: PositionCallback = (position) => {
                observer.next({
                    type: 'success',
                    position: {
                        latitude: position.coords.latitude,
                        longitude: position.coords.longitude,
                        accuracy: position.coords.accuracy,
                        speed: position.coords.speed,
                        heading: position.coords.heading,
                        timeStamp: position.timestamp,
                        altitude: position.coords.altitude,
                        altitudeAccuracy: position.coords.altitudeAccuracy,
                    }
                });
            };
            const onError: PositionErrorCallback = (error) => {
                observer.next({ type: 'error', error });
            };

            const watcherId = window.navigator.geolocation.watchPosition(onSuccess, onError, {
                enableHighAccuracy: true,
                maximumAge: 500,
            });

            return () => {
                window.navigator.geolocation.clearWatch(watcherId);
            };
        });
    }
}

订阅时区分处理：

const watchLocationSubscription = state.getState(GeoLocationState).locationWatcher$
.subscribe({
    next: (result) => {
        if (result.type === 'success') {
            console.log('位置更新:', result.position);
            // 处理位置逻辑
        } else {
            console.warn('位置错误:', result.error);
            // 处理错误逻辑
        }
    },
});

RxJS的Observable一旦调用observer.error()就会进入终止状态，无法再接收后续next值，这和原生watchPosition的持续监听逻辑不匹配。核心就是不要让错误终止流，而是把错误转化为普通next事件或忽略，这样就能和原生API行为保持一致，无需重试机制。

内容的提问来源于stack exchange，提问作者BR75