记一次前端问题解决历程(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)的视图组件. 将注意力集中保持在核 ...
随机推荐
- Calculating and saving space in PostgreSQL
Q: I have a table in pg like so: CREATE TABLE t ( a BIGSERIAL NOT NULL, -- 8 b b SMALLINT, -- 2 b c ...
- 使用 nginx 代理 tomcat 服务器
server { listen 80; server_name wechat-jsp.local; root /usr/local/Cellar/tomcat/9.0.5/libexec/webapp ...
- bzoj 4332: JSOI2012 分零食 快速傅立叶变换
题目: Description 同学们依次排成了一列,其中有A位小朋友,有三个共同的欢乐系数O,S和U.如果有一位小朋友得到了x个糖果,那么她的欢乐程度就是\(f(x)=O*x^2+S*x+U\) 现 ...
- 查看git拉取地址
在项目地址下面输入:git remote -v 即可查看到地址啦.
- (转)C++常见问题: 字符串分割函数 split
http://www.cnblogs.com/dfcao/p/cpp-FAQ-split.html C++标准库里面没有字符分割函数split ,这可太不方便了,我已经遇到>3次如何对字符串快速 ...
- click和mousedown的区别
$("button").mousedown(function(){ $("p").slideToggle(); }); 当鼠标指针移动到元素上方,并按下鼠标按键 ...
- 「LibreOJ β Round #4」游戏
https://loj.ac/problem/524 题目描述 qmqmqm和sublinekelzrip要进行一场游戏,其规则是这样的: 首先有一个序列,其中每个位置是一个整数或是X.双方轮流将X的 ...
- LightOJ 1088 - Points in Segments 二分
http://www.lightoj.com/volume_showproblem.php?problem=1088 题意:给出N个点,Q个查询,问在区间内的点数有多少个. 思路:直接在线二分,注意边 ...
- windows下gitlab配置 生成ssh key
Git-1.9.5-preview20141217 1. 安装git,从程序目录打开 "Git Bash" 2. 键入命令:ssh-keygen -t rsa -C "e ...
- 【CodeForces】914 E. Palindromes in a Tree 点分治
[题目]E. Palindromes in a Tree [题意]给定一棵树,每个点都有一个a~t的字符,一条路径回文定义为路径上的字符存在一个排列构成回文串,求经过每个点的回文路径数.n<=2 ...