使用 ELK 做前端性能监控
我们可以利用 Navigation Timing 来获取页面加载各个阶段的时间，参考：https://segmentfault.com/a/1190000010209584
这里我们以获取页面加载的总时间为例，并将参数发送到 /statistics
let flt = Date.now - window.performance.timing.navigationStart
$.post "/statistics", {
data: { flt }
}
在 nginx.conf 中，我们对于 /statistics 请求的 log 日志做单独处理，将请求参数也记录下来。（主要是记录 $request_body）
log_format front_monitor_log '$remote_addr - $remote_user [$time_local] "$request" '
'$status $body_bytes_sent "$http_referer" '
'"$http_user_agent" "$http_x_forwarded_for" "$request_body"';
location /statistics {
access_log /var/log/nginx/front-monitor.access.log front_monitor_log;
}
重启 nginx 服务后，我们访问页面时，会在 /var/log/nginx/front-monitor.access.log 中生成如下格式的日志：(这里的 $request_body 是 utf-8 的编码，不过不是很影响）
172.20.238.1 - - [13/Feb/2020:10:55:34 +0000] "POST /statistics HTTP/1.1" 499 0 "xxxx" "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36" "-" "data%5Bflt%5D=6456"
二、利用 filebeat 收集到 logstash 中
由于 ELK 是之前就已经搭建好的，我的工作主要是在其中加入前端性能监控数据，因此这里不再赘述 ELK 的搭建过程。
filebeat 的主要任务就是将客户端的日志收集转发到 ELK 的服务端，包括对数据进行筛选解析等处理。上文中生成 nginx log 的机器便是这里的客户端，而搭建 ELK 的机器则是服务端。
在客户端的 /etc/filebeat/filebeat.yml 配置文件中，我们设置：
paths:
- /var/log/nginx/*access.log
以收集所有 nginx 的 access.log 日志。
在服务端中，我们通过设置 logstash 的配置对收集到的日志进行处理。这里我主要是做了两个处理，一个是正则匹配 message 内容，一个是将 flt 设为 number 类型。
/etc/logstash/conf.d/nginx-filter.conf
filter {
if [source] == "/var/log/nginx/front-monitor.access.log" {
grok {
patterns_dir => "/etc/logstash/patterns"
match => { "message" => "%{FRONT_MONITOR}" }
}
mutate {
convert => {
"flt" => "number"
}
}
}
}
/etc/logstash/patterns/nginx
FRONT_MONITOR %{IPORHOST:client_ip} %{NGUSER:ident} %{NGUSER:auth} \[%{HTTPDATE:timestamp}\] "%{WORD:verb} %{URIPATHPARAM:request} HTTP/%{NUMBER:http_version}" %{NUMBER:response} (?:%{NUMBER:bytes}|-) (?:"(?:%{URI:referrer}|-)"|%{QS:referrer}) %{QS:agent} %{QS:x_forwarded} "data%5Bflt%5D=%{NUMBER:flt}"
这里的正则匹配规则可以参考：https://www.bbsmax.com/A/ke5jQZvVJr/
配置完成后，我们需要重启 logstash 使配置生效：
/usr/share/logstash/bin/logstash -f /etc/logstash/conf.d/nginx-filter.conf
systemctl restart logstash
我们可以通过 tail -f /var/log/logstash/logstash-plain.log 来查看日志有没有正常收集，配置是否有报错。
在 Kibana 中我们可以看到解析后的日志内容：
{
"client_ip": "172.20.238.1",
"ident": "-",
"request": "/statistics",
"agent": "\"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36\"",
"auth": "-",
"timestamp": "14/Feb/2020:12:05:34 +0000",
"x_forwarded": "-",
"offset": 358,
"flt": 6456,
"verb": "POST",
"http_version": "1.1",
"message": "172.20.238.1 - - [14/Feb/2020:12:05:34 +0000] \"POST /statistics HTTP/1.1\" 499 0 \"xxxx" \"Mozilla/5.0 (Macintosh; Intel Mac OS X 10_14_4) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/80.0.3987.87 Safari/537.36\" \"-\" \"data%5Bflt%5D=6456\"",
"referrer": "xxxx",
"response": "499",
"bytes": "0"
}
接下来我们只需要根据需要来制定 visualize 图表就可以了。
三、Kibana 绘图这里我选择的是饼状图，我们可以将 flt 的结果分成 [0, 2000] [2000, 4000] [4000, 8000] [8000, 正无穷] 四种范围。
具体配置如下：
最终的效果图如下：
作者：JOY酷酷
