Firefox浏览器NS Binding Aborting问题排查求助

问题根源 #

Firefox在页面卸载（beforeunload/pagehide）过程中会终止与页面绑定的异步操作。你的代码中使用async/await等待请求完成，但浏览器不会等待这些异步操作结束就会销毁页面资源，从而触发NS Binding Aborting错误。

可行解决方案 #

方案1：使用navigator.sendBeacon（推荐） #

sendBeacon是浏览器专为页面卸载场景设计的API，它异步发送请求且不阻塞页面卸载，浏览器会确保请求完成。

修改代码如下：

const eventName = isOnIOS ? "pagehide" : "beforeunload";
        
this.window.addEventListener(eventName, () => {
  // 无需await，由浏览器保证请求完成
  this.saveAction(this.typeOfActions.unknown, null, "", null, true);
  this.saveActionMetaData(true);
});

saveAction = (
  type, 
  filters = null, 
  searchTerm = "",
  url = null,
  isUnload = false // 添加卸载场景标识
) => {
  const data = {
    target: url ? url : this.currentUrl,
    duration: Math.round((this.timeSpentOnPage / 1000) * 100) / 100 || 0,
    idle_time: isNaN(this.idleTime) ? 0 : Math.round((this.idleTime / 1000) * 100) / 100,
    type: type,
    filters: !filters ? {} : filters,
    session_id: this.#getSessionId(),
    searched_term: searchTerm
  };
  
  if (isUnload) {
    const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
    navigator.sendBeacon(`${this.collectorApi}${this.endpoints.action}`, blob);
  } else {
    return this.http.post(`${this.collectorApi}${this.endpoints.action}`, data);
  }
}

saveActionMetaData = (isUnload = false) => {
  const data = {
    filters: [],
    data: {},
    idle_time: Math.round((this.timeSpentOnPage / 1000) * 100) / 100 || 0,
    duration: isNaN(this.idleTime) ? 0 : Math.round((this.idleTime / 1000) * 100) / 100,
    action_url: this.currentUrl,
    search_terms: [],
    session_id: this.#getSessionId()
  };
  
  if (isUnload) {
    const blob = new Blob([JSON.stringify(data)], { type: 'application/json' });
    navigator.sendBeacon(`${this.collectorApi}${this.endpoints.actionMetaData}`, blob);
  } else {
    return this.http.post(`${this.collectorApi}${this.endpoints.actionMetaData}`, data);
  }
}

// 原post方法保留，用于非卸载场景
post = async (endpoint, data) => {
  try {
    return await (await fetch(endpoint, {
      method: "POST",
      headers: this.headers,
      body: JSON.stringify(data)
    })).json();
  } catch (e) {
    console.error(e);
  }
}

方案2：给fetch添加keepalive选项 #

如果坚持使用fetch，可在请求配置中添加keepalive: true，让浏览器在页面卸载后继续完成请求：

// 修改post方法
post = async (endpoint, data, keepalive = false) => {
  try {
    return await (await fetch(endpoint, {
      method: "POST",
      headers: this.headers,
      body: JSON.stringify(data),
      keepalive: keepalive // 添加keepalive参数
    })).json();
  } catch (e) {
    console.error(e);
  }
}

// 卸载事件中调用时传入keepalive:true
this.window.addEventListener(eventName, () => {
  this.saveAction(this.typeOfActions.unknown, null, "", null, true);
  this.saveActionMetaData(true);
});

// 调整saveAction方法
saveAction = async (type, filters = null, searchTerm = "", url = null, isUnload = false) => {
  await this.http.post(`${this.collectorApi}${this.endpoints.action}`, {
    target: url ? url : this.currentUrl,
    duration: Math.round((this.timeSpentOnPage / 1000) * 100) / 100 || 0,
    idle_time: isNaN(this.idleTime) ? 0 : Math.round((this.idleTime / 1000) * 100) / 100,
    type: type,
    filters: !filters ? {} : filters,
    session_id: this.#getSessionId(),
    searched_term: searchTerm
  }, isUnload);
}

注意：keepalive有请求大小限制（通常64KB），数据超限时建议用方案1。

方案3：移除async/await（不推荐） #

将异步请求改为同步会阻塞页面卸载，影响用户体验，仅作为极端场景备选。

关键注意点 #

• 页面卸载事件中不要依赖async/await，浏览器不会等待Promise完成。
• sendBeacon仅支持通过Blob设置Content-Type，若API需要自定义请求头，优先用方案2。

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