前端监控系统
如果无法正常显示，请先停止浏览器的去广告插件。
1. 前端监控系统
TooBug 2017-12
2. About Me
CDC
Less
Grunt
@TooBug
web
SVG
Python
JavaScript
3. Why ?
4. ⽤用户体验设计要素
5. ⽤用户体验运营要素
6. 如何确保能⽤用？
“ ……”
“ ”
7. 如何确保能⽤用？
“
“
100%”
2.1s”
8. 99.99%可⽤用是什什么概念
= 0.0001*365*24*60
52
9. 52分钟能⼲干啥
10. 如何在5分钟内解决问题
11. 如何发现问题呢？
12. 如何提⾼高系统可靠性
Code
Review
13.
14. What ?
15. A Joke
……
16. 问题来源于异常
17. ⾏行行情爬⾍虫
18. 运营推⼴广
19. 系统异常
20. 平常⻓长什什么样？
21. 完整流程
1
2
22. 完整流程
1
2
23. How ?
24. 完整流程
Agent
1
2
25. Agent
26. Agent JS⽂文件的引⼊入
npm
<script>
27. Agent JS⽂文件的引⼊入
•
•
Agent
dedog
28. Agent
29. 上报什什么
report()
log()
30. 错误信息分类
performance.getEntries()
JavaScript runtime
Ajax
onerror
xhr
31. 错误信息的捕获
32. jQuery升级后报错
33. 性能数据
34. performance.timing
35.
36. QQ钱包加载慢
37. 周末加载时间变慢
1
2
3
PV
38. 打点上报
“ ”
39. 放弃IE8
IE IE8- IE8
N/A 0.35% N/A
CNZZ 1.14% N/A N/A
GA 2.14% 0.35% 0.29%
40. 累积量量反映事故
41. ⽇日志上报
42. ⽇日志上报
43. 图⽚片上传投诉
44. cnzz加载失败
45. Agent
46. 数据上报⼿手段
jsonp
ajax
beacon
<img src>
47. ⽤用户ID和业务ID
• ID
• ID
48. Agent
49. 错误信息的捕获
•
CDN
<script crossorigin=“anonymous”>
•
•
JS
JS
CORS
50. 节流
1s
51. 鉴权和过滤
52. sourcemap解析
+
source
map
53. 完整流程
Agent
1
2
54. “
”
55. 告警
/
56. 告警内容
ID
57. banner图超限
58. ⾃自定义告警
•
•
1%
59. Effects
60. Effects
60
45
30
15
0
61. Effects
1600
1200
800
400
0
62. Effects
1
0.75
0.5
0.25
0
63. Effects
180
135
90
45
0
64. System? You?
65. 完整流程
Agent
1
2
66. ⼈人是监控系统重要⼀一环
67. 对异常⾼高度警惕
68. ⼈人的惰性
review
69. 值班制度
70. Summary
71.
72.
73.
74.
75. Thanks & QA