服务工作者网络错误获取更详细的信息

javascript

2024-03-21 12:02:43

服务工作者：获取更详细的网络错误信息

问题

服务工作者中常见的错误“TypeError: Failed to fetch”提供的信息非常有限，这使得在“离线页面”中向用户提供有用的反馈和调试服务工作者变得困难。

解决方案

1. 使用 event.detail 属性

当 fetch() 请求失败时，event.detail 属性包含一个 DOMException 对象，其中包含 code 属性，它提供有关错误类型的更具体信息。

2. 检查 navigator.onLine 属性

此属性表示设备是否处于联机状态。如果 navigator.onLine 为 false，则表明存在网络连接问题。

3. 使用 AbortController

AbortController 允许我们中止 fetch() 请求。我们可以使用它来在网络连接丢失时中止请求，从而获得更具体的错误信息。

4. 捕获 unhandledrejection 事件

当 fetch() 请求失败时，它会触发一个 unhandledrejection 事件。我们可以捕获此事件并从拒绝对象中检索错误信息。

代码示例

self.addEventListener('fetch', event => {
  if (...) {
    const controller = new AbortController();
    const signal = controller.signal;

    event.respondWith(
      fetch(event.request, { signal })
        .catch(error => {
          let errorMessage = 'TypeError: Failed to fetch';

          if (error.detail) {
            errorMessage = error.detail.message;
          } else if (!navigator.onLine) {
            errorMessage = 'Network connection lost';
          } else if (error.name === 'AbortError') {
            errorMessage = 'Request aborted due to network connectivity issues';
          } else {
            // Handle other types of errors
          }

          console.error(errorMessage);
        })
    );

    // Abort the request if the user goes offline
    navigator.addEventListener('offline', () => {
      controller.abort();
    });
  }
});