网址: · Web view5 智能文本顺滑:针对语音识别第一次识别错误的结果,能够根据陈述人后面说话的识别结果对第一次的错误结果进行纠正,从而表明系统具备自主学习的能力。
型Web 项可性提升 零脚本错误的实战型Web 项可性提升 零脚本错误的实战...
Transcript of 型Web 项可性提升 零脚本错误的实战型Web 项可性提升 零脚本错误的实战...
-
⼤大型Web项⽬目可⽤用性提升零脚本错误的实战
郭林林烁 2017.10
-
https://github.com/joeyguo
郭林林烁 (joeyguo) @ 腾讯 AlloyTeam
https://github.com/joeyguo
-
1 社区的相关提问
-
如何发现代码出了了问题?
基础的监控体系组成
错误信息分析与优化
Web 安全与脚本错误
开发测试与脚本错误
-
1
如何发现线上代码出了了问题?
-
1 不不可能有问题!
我的代码不不可能有问题!
-
2 不不可能 不不可能 不不可能
-
3 测试/⽤用户反馈
这⾥里里有问题
有问题
有问题有问题
有问题
有问题
有问题
有问题
有问题
-
4 遇⻅见问题
这⻚页⾯面怎么打不不开啊?我是⽼老老板
后台前端 测试
前端?后台?能否复现?
-
xx⼿手机,能够复现了了
原来是前端兼容问题, 难怪浏览器器是正常的
修复速度太慢了了!我是⽼老老板
⽼老老板,问题修复了了
-
打造线上监控系统, 及时发现问题,解决问题
及时发现 ⽅方便便解决 总结沉淀
-
2
监控系统监控、上报、信息收集
-
1 “偷听”(监控)系统基本组成
报警 上报 警局 信息收集偷听 监控 现场还原 数据呈现
-
2 监控系统基本组成
1
2
3
代码监控
数据上报
数据收集系统
-
3 监控⽅方式
监控的⽅方式主要有两种
window.onerror
try-catch
try-catch 异步错误⽆无法捕获
预料料之内的错误
预料料之外的错误
并⾮非⾮非此即彼,可结合使⽤用
-
4 上报⽅方式
通过Ajax发送数据
动态创建 img 标签的形式
-
5 信息收集监控系统
存储上报数据
数据分析展示
提供上报接⼝口
-
3
错误信息分析与优化
-
1 错误信息分析 Script error.
-
2 产⽣生 Script error. 的原因
浏览器器安全策略略,跨域报错信息⽆无权限获得
http://trac.webkit.org/browser/trunk/Source/WebCore/dom/ScriptExecutionContext.cpp
-
3 优化 Script error.
同源处理理
Inline 内联代码
外链同域名
外链灰度同域 ( 20% )
-
http://a.com
4 优化 Script error.
script标签添加crossorigin属性
-
5 Vary:Origin 的作⽤用
Vary:Origin 表示在缓存筛选时,将结合请求的 Origin 进⾏行行区分
为缓存服务器器提供缓存规则及缓存筛选的依据Vary
www.qq.com/main.js
www.qq.com/main.js
http://b.com
http://a.com
http://a.com
http://a.com
-
进⾏行行脚本错误分析
-
6 错误信息分析
代码压缩后,定错出错代码困难
-
让脚本错误⼀一⽬目了了然
-
1 让脚本错误⼀一⽬目了了然
代码⼤大⼩小变⼤大很多、源代码泄露露
不不压缩代码
-
2 让脚本错误⼀一⽬目了了然
通过特征值快速找到报错代码
分号换空格/保留留空格换⾏行行
代码⼤大⼩小相对压缩则仍有所变⼤大
半压缩
-
3 让脚本错误⼀一⽬目了了然
维护源⽂文件盒处理理后⽂文件的映射关系 使⽤用VLQ编码来存储映射
SourceMap
SourceMap⽂文件
使⽤用 SourceMap 快速定位
源⽂文件 ⽣生成⽂文件
-
4 让脚本错误⼀一⽬目了了然
需要⽀支持 sourcemap ⽣生成、不不会增加线上代码⼤大⼩小
利利⽤用 SourceMap 结合⽣生成⽂文件的⾏行行列列 定位 到源⽂文件位置
源⽂文件路路径
源⽂文件⾏行行列列数
原变量量名
SourceMap⽂文件
⽣生成⽂文件⾏行行列列数处理理
function init() { noerror; // … }
!function(n){function r(e){if(t[e])return t[e].exports;var o=t[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=n,r.c=t,r.i=function(n){return n},r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=0)}([function(n,r){function t(){noerror}t()}]);
sourcemap + ⾏行行列列数
-
5 基于SourceMap脚本报错监控系统⽅方案
源代码
发布⽂文件
错误上报
脚本错误处理理平台
外⽹网环境
SouceMap⽂文件
错误信息 展示平台
错误信息
SourceMap统⼀一存储
1
2
3 处理理
-
6 基于SourceMap脚本报错监⽅方案示例例
https://github.com/joeyguo/noerror
-
7 开源⽅方案 sentry
https://github.com/getsentry/sentry
错误列列表 邮件通知指定修复负责⼈人 进展与记录项⽬目的团队管理理错误量量告警
-
8 发现代码不不存在的错误信息
这报错信息在代码中不不存在!
⻚页⾯面被注⼊入了了别的代码?
-
4
Web 安全 与 脚本错误
-
1 监控、上报
监听 document 的 onload 事件,对加载的 src 内容进⾏行行上报
只上报⾮非⽩白名单的资源
偷听 监控
监控、上报⾮非⽩白名单中的前端资源
-
2 数据分析,场景还原
-
内容安全策略略
CSP⽩白名单 ⾮非⽩白名单可信任的内容来源 ⽆无法正常执⾏行行
-
1 CSP (Content Security Policy)
HTML Meta 标签
HTTP Header ( 响应头 带上 CSP 的指令)
CSP 使⽤用⽅方式
-
2 CSP 配置
1Content-Security-Policy
Content-Security-Policy-Report-Only
进⾏行行拦截、阻⽌止执⾏行行
不不拦截、只上报
拦截
上报
两种策略略
多类参数
-
3 脚本错误量量越来越少
线上的脚本错误量量变少了了!
开发测试,从“源头”减少错误
-
5
开发测试 与 脚本错误
-
1 测试客户端内嵌⻚页⾯面脚本报错
CGI没返回?
⽹网络问题?
缓存导致?
发现不不及时 定位困难
报错了了!
-
js-error-dialog
https://github.com/joeyguo/js-error-dialog
脚本错误弹窗组件
-
?
1 测试客户端内嵌⻚页⾯面脚本报错
报错⾃自动唤起 (及时、可视化)
!
-
2 js-error-dialog
点击拷⻉贝,发送给我
弹出错误提示
拷⻉贝错误信息(易易传播)
-
3 js-error-dialog
打开错误⻚页⾯面,增加 jed 参数,⾃自动唤起输⼊入框
错误信息还原(可视化)
粘贴错误信息, 查看⽣生成报告
-
js-error-dialog 原理理分析
-
1 js-error-dialog 基础组成
当场抓 错误信息展示偷听 监控
现场分析
-
2 js-error-dialog 信息
- 查看压缩代码格式化的位置
精确地看到具体报错代码
- 基础报错信息 与 ⾃自定义信息
报错信息、U/A、客户端版本 …
详细的错误信息
-
3 js-error-dialog 实现核⼼心
!function(n) { // ... // ... }([ function(n, r) { function t() { noerror; } t(); } ]);
将压缩代码格式化并找到对应位置
!function(n){function r(e){if(t[e])return t[e].exports;var o=t[e]={i:e,l:!1,exports:{}};return n[e].call(o.exports,o,o.exports,r),o.l=!0,o.exports}var t={};r.m=n,r.c=t,r.i=function(n){return n},r.d=function(n,t,e){r.o(n,t)||Object.defineProperty(n,t,{configurable:!1,enumerable:!0,get:e})},r.n=function(n){var t=n&&n.__esModule?function(){return n.default}:function(){return n};return r.d(t,"a",t),t},r.o=function(n,r){return Object.prototype.hasOwnProperty.call(n,r)},r.p="",r(r.s=0)}([function(n,r){function t(){noerror}t()}]);
-
4 将压缩代码格式化并找到对应位置
SourceMap⽂文件
压缩⽂文件(源) 格式化⽂文件(⽣生成)
格式化⽂文件路路径
⽂文件⾏行行列列数
原变量量名
压缩⽂文件⾏行行列列数 处理理
2
1
原理理分析
代码⾼高亮展示3
https://github.com/joeyguo/prettyjs
prettyjs
资源体积过⼤大 ?
-
js-error-dialog 执⾏行行流程
代码格式化、sourcemap 代码⾼高亮、错误展示
监控 ⼊入⼝口
prettyjs动态拉取
5
js-error-dialog
报错更更容易易发现,线上错误更更加少了了!
-
基于prettyjs脚本报错监控系统⽅方案
拓拓展
-
1 基于prettyjs脚本报错监控系统⽅方案
不不增加线上代码⼤大⼩小
不不需要⽀支持sourcemap⽣生成
通过特征值快速找到报错代码
源代码 发布⽂文件
错误上报
脚本错误处理理平台
外⽹网环境
错误信息 展示平台错误信息
1
2
prettyjs
3
-
6
回顾
-
如何发现代码出了了问题?
监控体系基础组成
错误信息分析与优化
针对 Web 安全 的脚本错误优化
针对 开发测试 的脚本错误优化
1 回顾
-
2 相关内容
《XSS终结者-CSP理理论与实践》https://github.com/joeyguo/blog/issues/5
《脚本错误量量极致优化-监控上报与Script error》
《脚本错误量量极致优化-让脚本错误⼀一⽬目了了然》
https://github.com/joeyguo/blog/issues/13
https://github.com/joeyguo/blog/issues/14
https://github.com/joeyguo/noerror
noerror
https://github.com/joeyguo/js-beautify-sourcemap
js-beautify-sourcemap
https://github.com/joeyguo/js-error-dialog
js-error-dialog
https://github.com/joeyguo/prettyjs
prettyjs
joeyguo
https://github.com/joeyguo/blog/issues/13https://github.com/joeyguo/blog/issues/14https://github.com/joeyguo/noerrorhttps://github.com/joeyguo/js-beautify-sourcemaphttps://github.com/joeyguo/js-error-dialoghttps://github.com/joeyguo/prettyjs
-
THANKYOU