记一次前端问题解决历程(Cannot read Property 'call' of undefined)
场景
echosong 回长沙两个多月了, 新公司的创业项目 App , 小程序, 公众号。 目前差app 没有 做完。 公众号在前端小美女同事 的主导下采用前端比较火的Vue 技术框架。 一直一来主要方向后端 +架构+ 管理方向。长沙的IT环境不比上海, 回来基本上全栈都要做,乃至技术意外的培训,市场。
面的辐射性扩张, 对于技术一条道走到黑的方向已经开始形成了挑战,希望未来打破职业 年龄瓶颈 运气不要太差。
言归问题
Vue+npm + webpack 相关的技术生成单页的整站应用, 自从开发完上线到目前,一直存在一个不能解决的问题。 访问时候偶尔回出现以下问题
(Uncaught TypeError: Cannot read Property 'call' of undefined) ,重现刷新下基本上又能进入。概率大概又个 10%
解决方案
初步解决
之前以为跟 webpack 打包相关, 目前对前端的驾驭,没有从根本去解决。但是出现问题的时候都是index.html 能正常加载出来,js 相关不能加载,多刷新下就能正常,基于这个前提想到了,在入口文件index.html加入了以上代码
var refush = setInterval(function () {
console.log('刷新补救');
var style = window.getComputedStyle(loading);
if ( style.display === 'none') {
clearInterval(refush);
} else {
location.reload(true);
}
}, 2000)
问题解决了一大半,正如log 打印,只是一种打不开的时候补救,未能冲根本上解决问题。
彻底解决
周末都是加班,没有休息过,昨天周日终于给自己放了个假,但是心里装着问题未解决,对于一个对技术很产品有追求的人来说,这是一种煎熬,让你没办法正常享受休息时光。 于是专门花一天时间来研究这个问题
找问题点思路:
1 、 之前这个问题曾经让前同事专门做前端的大牛帮我看,他在上海那边一直刷新,无论怎么样访问死活重现不了问题,让其他地区的小伙伴页试试了下也没有此问题
2、 打包线上才会出现这种问题,本地也没出现过
4、 再抓包看 每次加载js次序不一样
5 、 最奇怪的时候每次还会加载一个 ip 地址相关的东西,而本地报,和其他地区的包不存在
综上症状,我开始去查看会不是是哪里配置有问题,但是对比了一圈下来无果, 于是 一艘那个奇怪的ip
似乎结果开始浮出水面, 长沙地区的电信,自然想到的DNS 劫持,愤怒之下 发泄对长沙电信的恶行谴责!!
怎么解决
得知了是dns 劫持,每次劫持的js 地址不一样,他是劫持了我的脚本,然后注入了自己的一段脚本 最后在加载我的原来那个js。这样一来改变了 js 加载的次序,因为VUe框架打包的东西,加载次序是要控制的。这样一来改变了加载js 次序,那么就会导致运行程序出现最初的错误。
这种针对域名的劫持,也没有什么其他的解决办法 无非
程序执行次序调整(这个基本上不好办,因为是npm run build 以后的机制)
换域名(电信的这种注入他也是有选择性的针对预约注入,如果换个域名可以解决,但是这不符合业务上的诉求)
http 换成 https 传输过程中https 需要证书,这种dns 劫持的注入是注入不了的
最终选择了第三种解决办法。整个问题得到了彻底解决。
记一次前端问题解决历程(Cannot read Property 'call' of undefined)的更多相关文章
- 记一起和前端没什么卵关系的OPTION 405问题
记一起和前端没什么卵关系的后端405问题 问题的关键点在于本来是POST请求,会变成OPTION请求,并且提示405报错,会类似跨域.并且只有某些手机机型才会(如Oppo系列). 其实跨域的问题,如果 ...
- 记第一次web前端校招笔试
是的,我今晚跑到隔壁学校参加某电商公司的宣讲会+现场笔试.只有俩字可以形容:苦笑! 在寝室复习了下以前学习的关于前端方面的知识,重点是JavaScript,javaweb开发技术(jsp+servle ...
- 前端学习历程--js--原型&闭包
一.数据类型 1.值类型:undefined, number, string, boolean,不是对象 2.引用类型:函数.数组.对象.null.new Number(10)都是对象 3.引用类型判 ...
- [mvc]记一次“项目”的历程
大二上半学期因为选修课的原因,答应帮老师完善学院的选课系统.在这之前没有做过一个可以成为“项目”的项目,本着挑战自己的原则和可以不上选修课的福利,断断续续用了一学期的时间来完善这个选课系统. 接受这个 ...
- Mysql乱码问题解决历程
可能是因为看了太多网上的关于这个问题的解决办法,可能当时是我自己没有看明白也或许是情况不一样,反正都没有解决我当初遇到的问题,现在想想可能是自己当初太无知了,第二个原因是原来大多数情况下是在windo ...
- WIN XP SP2系统经常性死机问题解决历程
如题: 1.初始时,XP还能进入系统,等系统3分钟左右,鼠标熄灭,键盘无反应,查看资源管理器CPU 100%,内存占用不高. 2.现象初步分析: a.怀疑是病毒占用CPU 100%,于是下载360安全 ...
- 记一次前端CryptoJS AES解密
1.背景 业务需求,需要联动多个平台,涉及到各平台的模拟登录. 已知加密前明文且正常登录.(无验证码要求) 某平台验证验证方式为.\login接口POST一串json字符串 { "accou ...
- 前端学习历程--http与https
一.CA(证书授权中心)证书 1.ca是通信的中介,具有足够的权威性 2.信任可嵌套如:C 信任 A1,A1 信任 A2,A2 信任 A3 二.根本区别 1.https需要基于ssl的ca证书认证(判 ...
- 前端学习历程--vue
---恢复内容开始--- 一.对比其他框架 1.react: 共同点: 使用 Virtual DOM 提供了响应式(Reactive)和组件化(Composable)的视图组件. 将注意力集中保持在核 ...
随机推荐
- poj1486 Sorting Slides
Sorting Slides Time Limit: 1000MS Memory Limit: 10000K Total Submissions: 4812 Accepted: 1882 De ...
- 杨辉三角之c实现任意行输出
#include<stdio.h> #include<stdlib.h> int** fmalloc(int n){ int** array; //二维指针 int i; ar ...
- time_t与GMT格式互转
time_t Time::timeFromGMT(string gmt) { char week[4]; memset(week,0,4); char month[4]; memset(month,0 ...
- Bootstrap 文件上传插件 FileInput的使用问题
: 在使用bootstrap的文件上传插件fileinput http://plugins.krajee.com/file-input的预览功能时,删除预览图片在 bootstrap 模态框中没有用, ...
- 1.Spring揭秘--Ioc容器
1.Ioc即控制反转,假设一个类需要依赖另外一个类,在最初始的做法就是创建那个依赖类的对象,然后使用这个类提供的功能,如果创建这个依赖类的职责交给Ioc Service Provider去做,那么这就 ...
- My deep learning reading list
My deep learning reading list 主要是顺着Bengio的PAMI review的文章找出来的.包括几本综述文章,将近100篇论文,各位山头们的Presentation.全部 ...
- git使用(1)----推送代码到远程
git使用(1) 首先要明白git上有三个区域 1.工作区 2.暂存区 3.历史记录区 步骤: 1.git init 2.配置环境(如果配置一次了以后就不用再继续配置) git config - ...
- 利用PhantomJS生成网站截图
var page = require('webpage').create(); page.open('http://qq.com', function () { page.render('exampl ...
- Liunx 下载文件夹下所有文件
136down voteaccepted You may use this in shell: wget -r --no-parent http://abc.tamu.edu/projects/tzi ...
- mysql查询日期相关的
今天 select * from 表名 where to_days(时间字段名) = to_days(now()); 昨天 SELECT * FROM 表名 WHERE TO_DAYS( NOW( ) ...