前天快下班的时候收到客服反馈购买产品页面提示用户浏览器版本过低，想到自己更新vue项目不久，因此可能是用户访问的是缓存index页面，里面的外联js都是失效的，而在页面加载完后500ms，我判断到页面文字还是原来预设的文字时就说明项目没有运行成功，可能是碰到不兼容的错误，因此会提示用户浏览器版本底了，但是后来想想用户访问缓存页面遇到这种情况 ，我会自动帮用户刷新浏览器的，不会存在这种情况呀（犯了调试9法中的 那不可能发生的条例），是不是确实是用户的浏览器版本低呢？（既然是突然、集中出现的，那说明跟用户浏览器版本没有关系）因此为了验证这个判断，我让客服帮忙让用户访问可以拿到用户浏览器的user agent的网址，同时询问用户之前是否可以正常使用该页面；客服做了这件事后，另一个客服也反馈浏览器版本问题，因此这时我确定是我这边的问题了，然后看看自己的代码---资源跟页面是同域且能够识别该资源地址且该资源不是img的情况时，我会帮用户刷新浏览器；（当时没想到，这些都是要在触发error 事件的大前提下 才会执行 的）；说明自己在判断条件及帮用户刷新浏览器这两个步骤出问题了，因此我简化了判断条件（不要求同域、不要求识别到资源地址、不需要判断是否为img标签）及由 window.location.href = window.location.href+'?getTimeForReload='+new Date().getTime();刷新方式改为location.reload(true) 方式（微信里还是保持 location.href刷新方式）(虽然知道自己明知犯了 调试九法 中的 单一原则 但我还是这么做了。。。) 。以为自己就这么解决问题了，但是第二天一上班还是觉得心里没有谱，想把这个问题研究到底、研究的清清楚楚（这点精神值得后续保持），因此在拿到客服给的user agent 信息后， 在公司的测试机中找到一款比较接近的OPPO进行简单测试，发现我之前的猜测是错误的，因为要求同域、要求识别到资源地址、需要判断不为img标签，且刷新浏览器的方式，它都能够正常判断和运行。后来为了验证自己的最新代码是否有效，我按照正常流程进行打包及采用远程域名但实际使用的是本地资源的方式（可见研究前端常用工具很关键）进行测试，惊奇的发现我曾经遇到的一个相同的报错---Uncaught SyntaxError: Unexpected token <
，自己还写了一篇 js报Uncaught SyntaxError: Unexpected token <错误 解决方法 这样的文章；（可见影响力、多做事情，积累经验很关键）
因此答案慢慢浮出水面了----出现404时，服务器返回了一个html给我，所以不会触发 error事件。测试一个不存在的js资源地址，发现无论如何它都会返回首页的html给我。所以进一步验证了判断。
总结：
1、遇到问题不要逃避或放弃，多尝试几种方案，说不定偶然间会发现一些有用的线索；
2、遇见诡异问题，多想想，要具备深入研究精神，要有“打破砂锅问到底”、“不见真相不罢休” 的思想，不要“想当然”的解决问题（如 可能是xxxxx），要严谨、要验证；
3、诡异问题，也可能是其他方面的错误，如后端接口、运维设置，不要一直把关注点放在自己，思路应该开阔点；
4、遇见问题，不能“目击现场”时，要尽量模拟整个流程且要与真实的场景一致，也就是复现要与真实场景一致；
5、平时多做事情、多积累经验、多总结及提升自己的影响力；
window.addEventListener('error', function(msg, url, row, col, error){
// console.log(msg)
var targetSrc = getSrcOrHref(msg);
// console.log(targetSrc)
if (msg.target && !msg.message) {
document.getElementById('app')? document.getElementById('app').innerText='检测到页面有更新或资源加载失败,请刷新页面。(加载失败的资源地址:'+targetSrc+')':'';
// alert('检测到页面有更新或资源加载失败，即将刷新浏览器。'+targetSrc);
if(getBrowserInfo()){
window.location.href = window.location.href+'?getTimeForReload='+new Date().getTime();
}else {
window.location.reload(true)
}
// var joiner=window.location.href.indexOf('?')===-1?'?':'&';
// window.location.href = window.location.href+joiner+'getTimeForReload='+new Date().getTime();
// if (confirm('检测到平台程序有更新，是否需要刷新浏览器？'+targetSrc)) {
// console.error('可能您的浏览器还在使用过期的缓存文件，是否需要帮您自动刷新浏览器？'+'原因为找不到'+targetSrc);
// window.location.href = window.location.href+'?getTimeForReload='+new Date().getTime();
//
// }
}
// console.log('msg.target',msg.target)
console.warn(msg.target ? msg.target.outerHTML:'无法找到目标地址');
console.warn(msg.srcElement ? msg.srcElement.outerHTML:'无法找到目标地址');
console.warn(
msg, url, row, col, error
);
return true;
}, true);
网友评论