日誌採集 - 前端埋點日誌收集

#原理分析

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