日志采集 - 前端埋点日志收集

原理分析

分析 :
在采集数据的网页上进行埋点(编写一小段js用于动态生成Img标签,然后加入dom页面中，利用该标签将参数请求至服务器中)
通过img标签的src属性可以解决跨域问题<img src="http://127.0.0.1/log.gif?k1=v1&k2=v2">将数据传递给后端服务器
后端服务器执行步骤：

1. 接受请求 , 响应图片(log.gif)
2. 解析参数 , 保存数据
3. 设置cookie

设计实现

确定需要搜集的信息

名称	途径	备注
访问时间	web server	Nginx $msec
IP	web server	Nginx $remote_add
域名	JavaScript	document.domain
URL	JavaScript	document.URL
页面标题	JavaScript	document.title
浏览客户端	web server	Nginx $http_user_agent
参数1	JavaScript	k1
参数2	JavaScript	k2

前端埋点操作

//通过组装params的参数为url请求到指定IP的log.gif地址
function logOperate(params){
	var args = ''; 
    for(var i in params) {
        if(args != '') {
            args += '&';
        }   
        args += i + '=' + encodeURIComponent(params[i]);
    }
	 var img = new Image(1, 1); 
    img.src = 'http://127.0.0.1/log.gif?' + args;
}

后端nginx简单配置采集日志

user  nginx;
worker_processes  1;

error_log  /var/log/nginx/error.log warn;
pid        /var/run/nginx.pid;


events {
    worker_connections  1024;
}

http {
    include       mime.types;
    default_type  application/octet-stream;
    #日志采用|分隔符
    log_format  main  '$remote_addr|$msec|$http_user_agent|$k1|$k2';
    access_log off;
    sendfile        on;
    #连接持有时间
    keepalive_timeout  5;
    #gzip  on;
    server {
        listen       80;
        server_name  127.0.0.1;
                #拦截/log.gif路径，并且只针对这个路径才采集日志
		location /log.gif {
                        #日志记录位置且采用main格式
			access_log /var/log/nginx/access.log main;
                        #返回类型
			default_type image/gif;
                        #获取请求参数值格式为[$arg_argname],以便于日志格式解析。
			set $k1 $arg_k1;
			set $k2 $arg_k2;
                        #设置返回前端时不需要缓存
			add_header Expires "Fri, 01 Jan 1980 00:00:00 GMT";
			add_header Pragma "no-cache";
			add_header Cache-Control "no-cache, max-age=0, must-revalidate";
			#返回一个1×1的空gif图片
			empty_gif;
		}
		#拦截其他所有路径，统一返回空图片。
		location / {
			default_type image/gif;
			empty_gif;
		}
	}
}

后记

前端通过img请求url将对应url参数发送至后端被nginx进行拦截并且解析以|竖线为分隔符的字符串追加到日志文件/var/log/nginx/access.log中。

后期可以通过flume或者logstat将相应日志发送到对应的分析服务器中进行分析数据。