Service Worker中fetch事件Promise拒绝的作用及错误处理

场景描述 #

当JS文件被uBlock Chrome广告拦截器拦截时，Chrome开发者工具出现带栈追踪的错误，该错误来自我博客的OWA（Open Web Analytics）分析脚本。我在Service Worker中写了相关的fetch事件处理逻辑，代码如下：

完整Service Worker代码 #

self.addEventListener('fetch', (event) => {
    event.respondWith(new Promise(async (resolve, reject) => {
        const req = event.request;
        try {
            const res = new HTTPResponse(resolve, reject);
            await chain_handlers(this._middlewares, function(fn, next) {
                return fn(req, res, next);
            });
            const method = req.method;
            const url = new URL(req.url);
            const path = normalize_url(url.pathname);
            const routes = this._routes[method];
            if (routes) {
                const match = this._parser.pick(routes, path);
                if (match.length) {
                    const [first_match] = match;
                    const fns = [...this._middlewares, ...routes[first_match.pattern]];
                    req.params = first_match.data;
                    setTimeout(function() {
                        reject('Timeout Error');
                    }, this._timeout);
                    await chain_handlers(fns, (fn, next) => {
                        return fn(req, res, next);
                    });
                    return;
                }
            }
            if (event.request.cache === 'only-if-cached' && event.request.mode !== 'same-origin') {
                return;
            }
            //request = credentials: 'include'
            fetch(event.request).then(resolve).catch(reject);
        } catch(error) {
            this._handle_error(resolve, req, error);
        }
    }));
});

简化版Service Worker代码 #

self.addEventListener('fetch', (event) => {
  event.respondWith(new Promise((resolve, reject) => {
    fetch(event.request).then(resolve).catch(reject);
  }));
});

self.addEventListener('activate', (event) => {
  event.waitUntil(clients.claim());
});

核心疑问 #

1. fetch事件中Promise的reject有什么作用？
2. 如何在Service Worker中正确处理这类错误，避免控制台出现栈追踪？

一、fetch事件中Promise reject的作用 #

当event.respondWith()传入的Promise被reject时，浏览器会将其判定为网络请求失败，这个失败信号会传递给发起请求的页面脚本（比如你博客里的OWA分析脚本），触发脚本中对应请求的catch回调，同时在控制台打印错误栈追踪——这就是你看到的报错来源。

简单来说，reject的作用是把Service Worker内部的错误同步给客户端页面，让页面感知到请求未正常完成。

二、正确处理错误避免控制台栈追踪的方法 #

要消除控制台的错误栈，核心是不让event.respondWith()的Promise被reject，而是用一个合法的HTTP响应来resolve它，哪怕请求实际失败了。

1. 捕获所有fetch失败场景，返回兜底响应 #

不管是广告拦截导致的请求阻断，还是网络错误，都要捕获错误并返回符合HTTP规范的兜底响应（比如404、500状态码的空响应）。

以简化版代码为例，修改后：

self.addEventListener('fetch', (event) => {
  event.respondWith(
    fetch(event.request)
      .catch(error => {
        // 捕获所有fetch失败情况，返回合法的错误响应
        return new Response(null, {
          status: 404,
          statusText: 'Not Found'
        });
      })
  );
});

self.addEventListener('activate', (event) => {
  event.waitUntil(clients.claim());
});

2. 处理自定义逻辑中的错误（超时、中间件报错） #

在完整代码里，超时、中间件异常等自定义逻辑的reject场景，都要替换成resolve兜底响应：

• 将reject('Timeout Error')改为resolve(new Response(null, {status: 504, statusText: 'Gateway Timeout'}))
• 在_handle_error方法中，不要调用reject，而是生成对应错误响应并resolve

关键片段修改示例：

// 替换超时逻辑
setTimeout(() => {
  resolve(new Response(null, {
    status: 504,
    statusText: 'Gateway Timeout'
  }));
}, this._timeout);

// 改写错误处理函数
_handle_error(resolve, req, error) {
  let status = 500;
  let statusText = 'Internal Server Error';
  if (error.message.includes('Timeout')) {
    status = 504;
    statusText = 'Gateway Timeout';
  }
  resolve(new Response(null, {status, statusText}));
}

3. 针对广告拦截的特殊处理 #

广告拦截器通常会直接阻断请求，导致fetch抛出错误。这种情况下，直接返回404响应即可——因为请求被正常resolve为合法的HTTP错误响应，而非Promise reject，不会触发控制台的错误栈。

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