chrome request canceled 问题排查

背景

最近在日常业务需求中，偶遇一个 resource 加载 status=canceled 的问题。

需求大致内容是在页面上增加一段唤端脚本，监听页面点击事件，进行拉端。

1
2
3

document.body.addEventListener('click', () => {
	schemaJump(schemaUrl);
});

而在未安装 App 的手机浏览器、PC 浏览器环境下，是无法拉起 App 的：

此时恰好底部的推品列表中 offer 也是通过监听点击事件进行跳转的，结果发现加入以上唤端脚本后 offer 无法点击跳转了，Chrome Developer Tools 发现点击跳转的 request 的 status=canceled，也就是被 chrome cancele 掉了。

在 stackoverflow 上找到以下几种情况 Chrome 会产生 cancel request:

The DOM element that caused the request to be made got deleted (i.e. an IMG is being loaded, but before the load happened, you deleted the IMG node)
You did something that made loading the data unnecessary. (i.e. you started loading a iframe, then changed the src or overwrite the contents)
There are lots of requests going to the same server, and a network problem on earlier requests showed that subsequent requests weren’t going to work (DNS lookup error, earlier (same) request resulted e.g. HTTP 400 error code, etc)
The event successfully sends the request, but is is canceled then (but processed by the server). The reason is, the elements submit forms on click events, no matter if you make any ajax requests on the same click event.

很显然我们的情况和第 4 条基本吻合，问题出在 click 事情监听上，解决方案：

document.body.addEventListener('click', (event) => {
	event.preventDefault();
	schemaJump(schemaUrl);
});