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

原理分析

分析 :
在采集數據的網頁上進行埋點(編寫一小段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將相應日志發送到對應的分析服務器中進行分析數據。