前端监控系统

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. Eﬀects

60. Eﬀects 60 45 30 15 0

61. Eﬀects 1600 1200 800 400 0

62. Eﬀects 1 0.75 0.5 0.25 0

63. Eﬀects 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