如何隐藏服务工作者获取的堆栈跟踪？答案

【问题标题】：How to hide stack trace from service worker fetch?如何隐藏服务工作者获取的堆栈跟踪？
【发布时间】：2022-01-25 07:55:48
【问题描述】：

我有这样的服务人员：

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

我不记得我在哪里找到了这段代码，但是当我将广告拦截器与 404 一起使用时，在控制台中我看到了堆栈跟踪：

有没有办法摆脱那个堆栈跟踪。我只需要知道获取失败（请参阅第二条错误消息）。

【问题讨论】：

标签： javascript service-worker fetch-api

【解决方案1】：

堆栈跟踪来自传递给reject 方法的Error 对象（或派生类）的堆栈属性。一种解决方案是用字符串拒绝：

catch( err=>reject(err.message))

但是，如果您想要获取有关未能获取的 url 的更多信息，则需要从 event.request 中的信息中包含它。如何包含它取决于 event.request 是 url 字符串、URL 还是 Request 对象或带有字符串化符的对象。如果没有确切的信息，您可以尝试类似

catch( err=>reject("Fetch failed to fetch " + (request?.url || request )));

【讨论】：

您的解决方案似乎也显示未捕获的异常。只有堆栈跟踪丢失。我根本不想看到错误。有什么解决办法吗？

【解决方案2】：

只需清除stack 属性：

const e = new Error('Uh oh');
console.log(e.name, e.message, e.stack);

e.stack = '';
console.log(e.name, e.message, e.stack);

【讨论】：

删除堆栈后仍然存在重复的sw.js:61 Uncaught (in promise) ，但没有堆栈，我不希望控制台出现额外的错误。正确的解决方案是@traktor answer。

【解决方案3】：

似乎正确的方法是吞下错误，网络似乎得到了正确的错误，出现在开发工具的网络和控制台选项卡中。

self.addEventListener('fetch', function (event) {
    var req = fetch(event.request).then(resolve).catch(() => {});
    event.respondWith(req);
});

【讨论】：