⼤大型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