eagle-eye-sdk/index.html at master · developer-once/eagle-eye-sdk · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
<!DOCTYPE html>
<html lang="zh">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Monitor testPage</title>
  <style>
    button{
      width: auto;
      height: 40px;
      font-size: 14px;
      line-height: 40px;
      outline: none;
      border: 0;
      background: #3973ff;
      color: #fff;
    }
  </style>
  <link rel="stylesheet" href="./rrweb-player.css"/>
</head>
<body>
  <h1>Monitor testPage</h1>

  <!-- ajax请求错误 -->
  <p>ajax请求错误</p>
  <button class="err-fetch">fetch</button>
  <button class="err-ajax-request">ajax请求错误</button>
  <button class="servererr-ajax-request">服务端错误</button>
  <button class="fail-ajax-request">ajax失败</button>
  <button class="timeout-ajax-request">ajax超时</button>
  <button>jsonp请求失败</button>
  <hr>

  <!-- js执行错误 -->
  <p>js执行错误</p>
  <button class="js-running-error">js执行错误</button>
  <hr>

  <!-- Promise 错误 -->
  <p>Promise 错误</p>
  <button class="promise-error">Promise 错误</button>
  <hr>

  <!-- js内存泄漏 -->
  <!-- <p>js内存泄漏</p>
  <button>js内存泄漏</button>
  <hr> -->

  <!-- 资源没有加载 -->
  <p>资源没有加载</p>
  <button class="err-js-load">没有加载javascript</button>
  <button class="err-css-load">没有加载css</button>
  <button class="err-image-load">没有加载image</button>
  <button class="err-iframe-load">没有加载iframe</button>
  <hr>

  <!-- 慢请求 -->
  <p>慢请求</p>
  <button class="err-slow-resourse">慢资源加载</button>
  <button class="err-slow-ajax">慢API</button>
  <hr>

  <!-- 第三方资源错误 -->
  <p>第三方资源错误</p>
  <button class="other-resource-error">第三方资源错误</button>
  <hr>

  <!-- destory -->
  <p>销毁实例</p>
  <button class="destory">销毁实例</button>
  <hr>


  <!-- rrweb 重播 -->
  <p>rrweb 重播</p>
  <button class="rrweb">rrweb 重播</button>
  <hr>

  <!-- 主动上报 -->
  <p>主动上报</p>
  <button class="report">主动上报</button>
  <hr>

  <div>
    <div>
      <p></p>
    </div>
  </div>

  <script src="./rrweb.js"></script>
  <script src="./rrweb-player.js"></script>
  <!-- 注意这里必须加 crossorigin="anonymous" 否则在引入的时候会因为是第三方资源无法收集完整报错信息 -->
  <script crossorigin="anonymous" src="../lib/eagle-eye.js"></script>
  <script src="./createError.js"></script>
  <script>
    var config = {
      url: 'http://localhost:7001/api/report',
      config: 'http://localhost:7001/api/get/config',
      https: true,
      record: true,
      app_key: "a0ab334b0f4e9ee45eca86",
      autoSendPv: true,
      recordReSoure: false,
      startTime: new Date().getTime(),
      globalClick: true,
      openHeartbeat: true,
      slowAjaxCost: 700,
      behaviorMax: 5,
    };

    window.monitor = eagleEye(config);

    window.onerror = function(err, detail) {
      // console.log(111);
    }

  </script>

  <!-- <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/style.css"/>
  <script src="https://cdn.jsdelivr.net/npm/rrweb-player@latest/dist/index.js"></script> -->
  <script>
    /**
     * rrweb 回播
     */
    var rrwebButton = document.getElementsByClassName("rrweb")[0];
    rrwebButton.onclick = function () {
      var events = window.monitor.getRecord();
      new rrwebPlayer({
        target: document.body,
        props: { events },
      });
    }
  </script>
</body>
</html>