如何捕获Mapbox瓦片请求中令牌无效或过期的错误

问题根因 #

你写的事件监听无响应主要有两个常见原因：

1. 事件绑定的对象不匹配：你初始化地图实例时赋值给了this.map，如果后续监听事件时用的map变量不在对应作用域下，就会绑定到未定义对象或者错误实例上，自然无法触发回调。
2. 普通的全局error事件默认不会捕获所有瓦片加载层面的认证错误，需要配合错误参数判定，或者直接监听对应瓦片源的错误事件。

解决步骤 #

• 修正实例绑定逻辑，在地图初始化完成后绑定全局错误事件，同时捕获完整错误对象判定认证异常：

this.map.on('load', () => {
  this.map.on('error', (e) => {
    // 匹配401未授权、403无权限的认证类错误
    if (e.error?.status === 401 || e.error?.status === 403) {
      console.log('access token无效或已过期');
      // 此处添加你的token刷新、重新请求瓦片的逻辑
    }
  });
});

• 如果全局事件仍未捕获到自定义瓦片源的错误，直接对指定瓦片源绑定错误监听：

// 替换为你实际注册的瓦片源ID
const tileSource = this.map.getSource('your-custom-tile-source-id');
tileSource?.on('error', (err) => {
  if (err.status === 401 || err.status === 403) {
    // 处理token异常逻辑
  }
});

• 兜底方案：全局拦截瓦片请求响应
  如果以上事件监听都无法覆盖你的场景，可以通过拦截fetch或你用的请求库的响应，匹配你的tileUrl规则，所有命中规则的请求返回401/403时直接触发认证异常处理逻辑，这个方案不受mapbox-gl事件机制限制，兼容性最好。

调试提示 #

调试阶段可以在地图初始化参数中添加tileRetryLimit: 0关闭瓦片加载失败后的自动重试，避免多次重试后才触发错误事件导致的调试延迟。

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