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

原理分析

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

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将相应日志发送到对应的分析服务器中进行分析数据。