19年12月踩过最深的坑

前天快下班的时候收到客服反馈购买产品页面提示用户浏览器版本过低,想到自己更新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);
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 160,706评论 4 366
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 68,002评论 1 301
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 110,462评论 0 250
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,375评论 0 216
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,763评论 3 294
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,849评论 1 224
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 32,033评论 2 317
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,768评论 0 204
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,490评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,734评论 2 253
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,204评论 1 264
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,566评论 3 260
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,227评论 3 241
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,137评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,934评论 0 201
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,926评论 2 283
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,774评论 2 274

推荐阅读更多精彩内容

  • 人丑就该多看书 文章来自其他博文。 *.location.href 用法: javascript> functio...
    樱花树下_529d阅读 355评论 0 0
  •   ECMAScript 是 JavaScript 的核心,但如果要在 Web 中使用 JavaScript,那么...
    霜天晓阅读 833评论 0 0
  •   JavaScript 与 HTML 之间的交互是通过事件实现的。   事件,就是文档或浏览器窗口中发生的一些特...
    霜天晓阅读 3,426评论 1 11
  • mobileHack 这里收集了许多移动端上遇到的各种坑与相对解决方案 工具类网站 HTML5 与 CSS3 技术...
    Zoemings阅读 6,459评论 0 12
  • “相别多年,甚是挂念,余离家多年,遍寻多地未果,幸门下弟子巧遇,三日之后自有人乐坊寻之,当年因果自然相告。”我缓缓...
    林书洛阅读 272评论 0 1