ac2017-joeyguo-2.0.key

Size: px

Start display at page:

Download "ac2017-joeyguo-2.0.key"

映姜苟
5 years ago
Views:

1 大型 Web 项目可用性提升零脚本错误的实战郭林林烁

2 郭林林烁腾讯 AlloyTeam

3 1 社区的相关提问

4 错误信息分析与优化如何发现代码出了了问题? 开发测试与脚本错误 Web 安全与脚本错误基础的监控体系组成

5 1 如何发现线上代码出了了问题?

6 1 不不可能有问题! 我的代码不不可能有问题!

7 2 不不可能不不可能不不可能

8 3 测试 / 用户反馈有问题有问题有问题有问题有问题有问题这里里有问题有问题有问题

9 4 遇见问题这页面怎么打不不开啊? 我是老老板前端? 后台? 能否复现? 前端后台测试

10 xx 手机, 能够复现了了原来是前端兼容问题, 难怪浏览器器是正常的老老板, 问题修复了了我是老老板修复速度太慢了了!

11 及时发现方便便解决总结沉淀打造线上监控系统, 及时发现问题, 解决问题

12 2 监控系统监控上报信息收集

13 1 偷听 ( 监控 ) 系统基本组成偷听监控报警上报现场还原数据呈现警局信息收集

14 2 监控系统基本组成 1 代码监控 2 数据上报 3 数据收集系统

15 3 监控方式监控的方式主要有两种 try-catch 预料料之内的错误 window.onerror 预料料之外的错误并非非此即彼, 可结合使用 try-catch 异步错误无法捕获

16 4 上报方式通过 Ajax 发送数据动态创建 img 标签的形式

17 5 信息收集监控系统提供上报接口存储上报数据数据分析展示

18 3 错误信息分析与优化

19 1 错误信息分析 Script error.

2 产生 Script error. 的原因浏览器器安全策略略, 跨域报错信息无权限获得 http://trac.

20 2 产生 Script error. 的原因浏览器器安全策略略, 跨域报错信息无权限获得

21 3 优化 Script error. 同源处理理 Inline 内联代码外链同域名外链灰度同域 ( 20% )

22 4 优化 Script error. 利利用跨源资源共享机制 (CORS) script 标签添加 crossorigin 属性响应头增加 Access-Control-Allow-Origin 响应头中需带上 Vary:Origin <script src= //qq.com/main.js" crossorigin></script>

23 5 Vary:Origin 的作用 Vary 为缓存服务器器提供缓存规则及缓存筛选的依据 Vary:Origin 表示在缓存筛选时, 将结合请求的 Origin 进行行区分

24 进行行脚本错误分析

25 6 错误信息分析代码压缩后, 定错出错代码困难

26 让脚本错误一目了了然

27 1 让脚本错误一目了了然不不压缩代码代码大小变大很多源代码泄露露

28 2 让脚本错误一目了了然半压缩分号换空格 / 保留留空格换行行通过特征值快速找到报错代码代码大小相对压缩则仍有所变大

29 3 让脚本错误一目了了然使用 SourceMap 快速定位 SourceMap 维护源文件盒处理理后文件的映射关系使用 VLQ 编码来存储映射源文件生成文件 SourceMap 文件

30 4 让脚本错误一目了了然利利用 SourceMap 结合生成文件的行行列列定位到源文件位置 SourceMap 文件源文件路路径处理理源文件行行列列数生成文件行行列列数原变量量名!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 + 行行列列数 function init() { noerror; // } 需要支持 sourcemap 生成不不会增加线上代码大小

31 5 基于 SourceMap 脚本报错监控系统方案 SourceMap 统一存储脚本错误处理理平台 SouceMap 文件 3 处理理错误信息展示平台错误信息源代码 1 2 错误上报外网环境发布文件

32 6 基于 SourceMap 脚本报错监方案示例例

33 7 开源方案 sentry 错误列列表错误量量告警项目的团队管理理指定修复负责人进展与记录邮件通知

36 8 发现代码不不存在的错误信息这报错信息在代码中不不存在! 页面被注入了了别的代码?

37 4 Web 安全与脚本错误

38 1 监控上报监控上报非白名单中的前端资源监听 document 的 onload 事件, 对加载的 src 内容进行行上报只上报非白名单的资源偷听监控

39 2 数据分析, 场景还原

40 CSP 内容安全策略略白名单可信任的内容来源非白名单无法正常执行行

41 1 CSP (Content Security Policy) CSP 使用方式 HTML Meta 标签 <meta http-equiv="content-security-policy" content="script-src 'self'"> HTTP Header ( 响应头带上 CSP 的指令 )

42 2 CSP 配置两种策略略上报 Content-Security-Policy-Report-Only 不不拦截只上报拦截 Content-Security-Policy 1 进行行拦截阻止执行行多类参数

44 3 脚本错误量量越来越少线上的脚本错误量量变少了了! 开发测试, 从源头减少错误

45 5 开发测试与脚本错误

46 1 测试客户端内嵌页面脚本报错报错了了! 网络问题? 缓存导致? CGI 没返回? 发现不不及时定位困难

47 js-error-dialog 脚本错误弹窗组件

48 1 测试客户端内嵌页面脚本报错报错自动唤起 ( 及时可视化 )?!

49 2 js-error-dialog 拷贝错误信息 ( 易易传播 ) 弹出错误提示点击拷贝, 发送给我

50 3 js-error-dialog 错误信息还原 ( 可视化 ) 打开错误页面, 增加 jed 参数, 自动唤起输入框粘贴错误信息, 查看生成报告

51 js-error-dialog 原理理分析

52 1 js-error-dialog 基础组成现场分析偷听监控当场抓错误信息展示

53 2 js-error-dialog 信息详细的错误信息 - 基础报错信息与自定义信息报错信息 U/A 客户端版本 - 查看压缩代码格式化的位置精确地看到具体报错代码

54 3 js-error-dialog 实现核心将压缩代码格式化并找到对应位置!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()}]);!function(n) { //... //... }([ function(n, r) { function t() { noerror; } t(); } ]);

55 4 将压缩代码格式化并找到对应位置原理理分析 prettyjs 1 压缩文件 ( 源 ) 格式化文件 ( 生成 ) 资源体积过大? SourceMap 文件 2 格式化文件路路径 3 压缩文件行行列列数处理理文件行行列列数代码高亮展示原变量量名

56 5 js-error-dialog 执行行流程 js-error-dialog 监控入口代码格式化 sourcemap 代码高亮错误展示动态拉取 prettyjs 报错更更容易易发现, 线上错误更更加少了了!

57 拓拓展基于 prettyjs 脚本报错监控系统方案

58 1 基于 prettyjs 脚本报错监控系统方案不不增加线上代码大小脚本错误处理理平台不不需要支持 sourcemap 生成通过特征值快速找到报错代码错误信息 prettyjs 3 错误信息展示平台 2 错误上报源代码 1 发布文件外网环境

59 6 回顾

60 1 回顾如何发现代码出了了问题? 监控体系基础组成错误信息分析与优化针对 Web 安全的脚本错误优化针对开发测试的脚本错误优化

61 2 相关内容脚本错误量量极致优化 - 监控上报与 Script error 脚本错误量量极致优化 - 让脚本错误一目了了然 XSS 终结者 -CSP 理理论与实践 noerror js-beautify-sourcemap js-error-dialog prettyjs

62 THANK YOU

Intruduction to the NGINX stream subsystem and OpenResty's support

Intruduction to the NGINX stream subsystem and OpenResty's support NGINX stream 子系统的简介以及 OpenResty 对其的支持孙大同 (@dndx) OpenResty Con 2017 北北京 2017 年年 10 月 21 日关于我 90 后曾在 LinkedIn,Cloudflare 等公司工作 OpenResty Inc. 技术合伙人热爱钻研底层技术以及折腾飞行行爱好者拥有固定翼私人飞行行执照, 仪表飞行行资质以及