前端监控脚本开发讨论

[ruiming]

建立会话请求（0.1.0）

当访客打开网站时，需要立即发送一个请求用于建立会话，请求应该包括：

1. 访客信息。如语言，地区，城市，浏览器版本，操作系统，referer 等。

服务端读取用户 Cookie 判断是否是初次访问。

• 如果是，则取到访客信息直接使用，并重新签发新的会话 ID 重新设置 Cookie。
• 如果不是，根据前端发送的 body 信息建立新的访客信息（Visiter 表），并签发新的会话 ID 设置 Cookie。

同时，服务端会读取前端发送的 body 信息，建立 Session 记录，主要记录访问时间和 referer。

页面信息（0.1.0）

当会话成功建立之后，当页面完全加载完成时，将当前页面的信息发送至服务端，请求应该包含：

1. 各种加载时间如页面进入到各个完成点的时间，当前哪个页面等。

2. 请求了哪些资源，各花了多长时间，下面这些东西脚本能获取到多少？。（本身页面也是一种资源）

   

3. 如果是首屏，还需要传递首屏特有信息如 DNS 查询时间等。

服务端写入 Page 表，资源耗时写入 Connection 表，Connection 和 Visiter 以及 Host 进行关联。

性能信息（0.2.0）

调研：是定时发送性能信息，还是每个页面都进行发送？

错误信息（0.2.0）

当访问过程出现错误，前端将错误信息发送到服务端。TODO。

[ruiming]

我有几个问题，你想一想：

1. 页面未完全加载的时候用户跳转其他页面怎么处理？在何时发送请求？
2. 单页应用怎么记录用户页面跳转？
3. 性能怎么收集怎么处理比较好？定时发送还是说每个页面都发送一下，如果是每个页面都发送，那在页面记载的哪个阶段发送？用户在此前跳转到其他页面怎么做？

[ruiming]

先做 0.1.0 版本，其他的可以先缓一下。上面你有什么建议想法或者补充的可以说一下，你那个文档最好可以按照上面说的两个请求来（确切说是三个请求，首屏比其他页面会多传一些信息），说明你可以发送什么数据给我。
我也不知道可以得到哪些数据，这一块就你自己去想。

[lgybetter]

0.1.0功能记录补充:

1. 脚本请求验证功能，目的通过密钥建立向服务端认证，服务端下发cookie或token都行，用于作为sessionId,（需要服务端提供认证服务）
2. 发送数据分为两种数据，一种是全局数据，另一种是动态页面数据。
   全局数据：指从打开页面到关闭页面，改数据不随前端的url改变（页面改变而发生改变），例如：网站浏览时间
   动态页面数据：指进入某个页面产生的数据统计，离开页面不保存数据信息，这种信息需要在页面enter或leave的时候发送到服务端，没必要进行前端的数据存储。例如: reffer信息，当前页面是由哪个页面跳转过来。

问题想法：

1. 页面没完全加载出来，意味着数据发送脚本不一定能够执行呢。。。
2. 单页应用记录用户跳转可以通过监听路由的变化来保存用户的跳转路径，也就是自行计算reffer
3. 性能收集应该是页面加载渲染完成后统一发送，如果用户在此渲染完后跳转其他页面就不要去管那么多了，先简单来吧，别考虑太多，把数据收集起来，然后呈现出来先，这种打断的处理有心情再考虑，小兄弟。

[ruiming]

登录页面可以参考我以前写的代码：https://gist.github.com/ruiming/63144b4d3bfb50b446af882529a9fd87

[ruiming]

我看了下你的那些数据，你确定你的那些数据都是能得到的了？（比如 waterfall 这个）。
0.1.0 目前只是做管理端登录注册，脚本的初次连接，页面信息发送，页面所有资源信息发送，网站退出。一共六个接口。

接口文档初稿：https://app.swaggerhub.com/apis/ruiming/tinylog/0.1.0

我简单说下接口的请求顺序和流程以及功能说明：

1. 用户打开网站时，调用 /initialize 接口，服务端进行 Cookie 处理，前端不用关心。
2. 发送第一个页面的数据，调用 /page 接口，需要注意，这里不需要包含该页面(html)的请求时间之类的数据，这些和图片等资源一起通过调用下面的接口发送过来。这个接口会返回一个 pageId 过来，并且需要注意，如果这个页面是通过其他页面跳转过来的，那么应该把上一个页面的 pageId 发送过来。
3. 发送第一个页面的资源数据，调用 /assets 接口，需要把 pageId 也发送过来。
4. 退出网站，调用 /exit 接口。

totalTime 不需要了，只需要每次 /page 以及最后的 /exit 请求把当前客户端时间发送过来就好、

需要核实的地方：

1. 这几个接口是否有疑问？以上是否有不清楚的地方？
2. 是否有部分数据为可选？重要！
3. 是否有不需要的 key 或者残缺 key？
4. 对于 swagger 文档有什么建议？我可以后面完善下。

[lgybetter]

更新了数据文档
移除:

页面资源状态信息

{
name: 名称
status: 状态码
type: 类型
size: 大小
time: 时间
waterfall: 对象(瀑布流)
}

[ruiming]

以后文档就参考这里：https://app.swaggerhub.com/apis/ruiming/tinylog

最近改了几个地方，注意下

1. 时间要传 datetime 不能传时间戳
2. xxxId 都是 number 类型

已经部署上去了，接口可以调用，有问题再找我

[lgybetter]

增加了tinylog-ui的页面数据展示分布https://github.com/tinylog/tinylog-script/blob/master/docs/data.png
你也看一下有没有什么具体的数据可以进一步分析的