使用 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 的搭建过程。

elasticsearch.yml配置内容详解

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, 正无穷] 四种范围。
具体配置如下：


最终的效果图如下：