openresty收集前端日志

环境:centos-6.5

依赖:yum install -y gcc gcc-c++

下载pcre,openssl,openresty

wget https://sourceforge.net/projects/pcre/files/pcre/8.39/pcre-8.39.tar.gz

wget https://www.openssl.org/source/openssl-1.0.1t.tar.gz

wget  https://openresty.org/download/openresty-1.9.15.1.tar.gz

全部解压

cd openresty-1.9.15.1

编译安装(指定pcre和openssl的解压目录):

./configure --prefix=/home/qun/nginx/openresty --with-pcre=/home/qun/nginx/pcre-8.39 --with-http_ssl_module --with-openssl=/home/qun/nginx/openssl-1.0.1t  --with-luajit

make

make install

定制日志格式:

a.前端统一脚本ma.js

(function () {
    var params = {};
    //Document对象数据
    if(document) {
        params.domain = document.domain || ‘‘; 
        params.url = document.URL || ‘‘; 
        params.title = document.title || ‘‘; 
        params.referrer = document.referrer || ‘‘; 
    }   
    //Window对象数据
    if(window && window.screen) {
        params.sh = window.screen.height || 0;
        params.sw = window.screen.width || 0;
        params.cd = window.screen.colorDepth || 0;
    }   
    //navigator对象数据
    if(navigator) {
        params.lang = navigator.language || ‘‘; 
    }   
    //解析_maq配置
    if(_maq) {
        for(var i in _maq) {
            switch(_maq[i][0]) {
                case ‘_setAccount‘:
                    params.account = _maq[i][1];
                    break;
                default:
                    break;
            }   
        }   
    }   
    //拼接参数串
    var args = ‘‘; 
    for(var i in params) {
        if(args != ‘‘) {
            args += ‘&‘;
        }   
        args += i + ‘=‘ + encodeURIComponent(params[i]);
    }   
 
    //通过Image对象请求后端脚本
    var img = new Image(1, 1); 
    img.src = ‘http://analytics.codinglabs.org/1.gif?‘ + args;
})();

b.埋点代码(嵌入到前端页面中)

<script type="text/javascript">
var _maq = _maq || [];
_maq.push([‘_setAccount‘, ‘网站标识‘]);
(function() {
    var ma = document.createElement(‘script‘); ma.type = ‘text/javascript‘; ma.async = true;
    ma.src = (‘https:‘ == document.location.protocol ? ‘https://master:18080/sa‘ : ‘http://master:18080/sa‘) + ‘/js/ma.js‘;
    alert(ma);
    var s = document.getElementsByTagName(‘script‘)[0]; s.parentNode.insertBefore(ma, s);
})();
</script>

c.nginx拦截1.gif的请求,定制日志格式,配置nginx.conf

log_format tick "$msec^A$remote_addr^A$u_domain^A$u_url^A$u_title^A$u_referrer^A$u_sh^A$u_sw^A$u_cd^A$u_lang^A$http_user_agent^A$u_utrace^A$u_account";

server {
        listen       18080;
        server_name  localhost;
        #charset koi8-r;
        #access_log  logs/host.access.log  main;
        location / {
            root   html;
            index  index.html index.htm;
        }
  
        location /echo {  
            default_type ‘text/plain‘;  
            echo ‘hello echo‘;  
        }  
        location /lua {  
            default_type ‘text/plain‘;  
            content_by_lua ‘ngx.say("hello, lua")‘;  
        } 
        
        location /1.gif {
            #伪装成gif文件
            default_type image/gif;    
             #本身关闭access_log,通过subrequest记录log
            access_log off;
         
            access_by_lua "
                -- 用户跟踪cookie名为__utrace
                local uid = ngx.var.cookie___utrace        
                if not uid then
                    -- 如果没有则生成一个跟踪cookie,算法为md5(时间戳+IP+客户端信息)
                    uid = ngx.md5(ngx.now() .. ngx.var.remote_addr .. ngx.var.http_user_agent)
                end 
                ngx.header[‘Set-Cookie‘] = {‘__utrace=‘ .. uid .. ‘; path=/‘}
                if ngx.var.arg_domain then
                -- 通过subrequest到/i-log记录日志,将参数和用户跟踪cookie带过去
                    ngx.location.capture(‘/i-log?‘ .. ngx.var.args .. ‘&utrace=‘ .. uid)
                end 
            ";  
         
            #此请求不缓存
            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 /i-log {
            #内部location,不允许外部直接访问
            internal;
         
            #设置变量,注意需要unescape
            set_unescape_uri $u_domain $arg_domain;
            set_unescape_uri $u_url $arg_url;
            set_unescape_uri $u_title $arg_title;
            set_unescape_uri $u_referrer $arg_referrer;
            set_unescape_uri $u_sh $arg_sh;
            set_unescape_uri $u_sw $arg_sw;
            set_unescape_uri $u_cd $arg_cd;
            set_unescape_uri $u_lang $arg_lang;
            set_unescape_uri $u_utrace $arg_utrace;
            set_unescape_uri $u_account $arg_account;
         
            #打开日志
            log_subrequest on;
            #记录日志到ma.log,实际应用中最好加buffer,格式为tick
            access_log /home/qun/nginx/openresty/nginx/logs/ma.log tick;
         
            #输出空字符串
            echo ‘‘;
        }
       
    }

注意:

1.log_format tick定制日志格式
2.location /1.gif拦截所有1.gif的请求,并获得请求参数
3.location /i-log 日志落地

日志:

cat /home/qun/nginx/openresty/nginx/logs/ma.log

1466110654.294^A192.168.137.1^Amaster^Ahttp://master:18080/sa/index.html^AHome^Ahttp://master:18080/sa/index.html^A1080^A1920^A24^Azh-CN^AMozilla/5.0 (Windows NT 6.1; WOW64; rv:47.0) Gecko/20100101 Firefox/47.0^Aa005f232c13979e44fc392da9899469d^A\xEF\xBF\xBD\xEF\xBF\xBD\xD5\xBE\xEF\xBF\xBD\xEF\xBF\xBD\xCA\xB6
时间: 2024-10-14 10:48:53

openresty收集前端日志的相关文章

ELK 二进制安装并收集nginx日志

对于日志来说,最常见的需求就是收集.存储.查询.展示,开源社区正好有相对应的开源项目:logstash(收集).elasticsearch(存储+搜索).kibana(展示),我们将这三个组合起来的技术称之为ELKStack,所以说ELKStack指的是Elasticsearch(java).Logstash(jruby).Kibana技术栈的结合, ELK5.X搭建并收集Nginx日志 ELK ELK5.X搭建并收集Nginx日志一.基础环境配置及软件包下载 二.安装Elasticsearch

elk系统搭建并收集nginx日志-主要步骤

一)简介 elk系统是一套目前较为流行的日志收集分析系统,主要由elasticserch,logstash,kibana三部分组成,其中elasticsearch负责数据的存储,logstash负责日志的收集过滤,kibana负责日志的可视化部分.整个工作流程为logstash收集日志,过滤后输出并保存到elasticsearch中,最后用户通过kibana从elasticsearch中读取数据并处理.本文中日志收集引入filebeat收集日志,logstash监听在5000端口并接受fileb

前端日志

现今有很多无法预知的错误出现,但又不是所有的错误都可以使用pc端的浏览器重现问题所在, 所以前端日志很有必要,日志的出现就是记录某些东西,让开发人员更好锁定问题所在,而后台 在这方面的工作就很完善,这样大大的提高追踪问题速度,然而前端的兼容性是一件很头痛的问题, 有可能写了一段很新的技术代码,然而某些浏览器不兼容而挂了,这样很可能无法追踪到问题, 所以前端日志这个时刻起的作用就起来了. 前端日志使用到技术一般就几个,一个是try()catch(e){}和onerror,这两个,如果有必要的也会使

实时收集Storm日志到ELK集群

背景 我们的storm实时流计算项目已经上线几个月了,由于各种原因迟迟没有进行监控,每次出现问题都要登录好几台机器,然后使用sed,shell,awk,vi等各种命令来查询原因,效率非常低下,而且有些统计是没法做的,所以很有必要对storm本身相关的日志以及我们运行在storm上面的任务的日志做一个统一的日志收集,分析,查询,统计平台. 技术选型 对于这个选择,其实不用考虑那么多,借用一句名言 Life is short , You need elk ! 关于elk相关的安装这里不再介绍,可参考

rsyslog收集nginx日志配置

rsyslog日志收集配置 rsyslog服务器收集各服务器的日志,并汇总,再由logstash处理 请查看上一篇文章 http://bbotte.blog.51cto.com/6205307/1613571 客户端/发送端  web服务器 # yum install rsyslog -y # vim /etc/rsyslog.conf *.* @192.168.10.1:514 # vim /etc/bashrc                              #收集其他服务器的操作

前端日志探讨二

在前面一篇文章中我探讨了下在IE浏览器的情况下使用前端日志,但我们知道很多人不使用IE作为默认浏览器. 下面探讨下在高版本chorme浏览器里的日志存储和发送. 由于chorme浏览器为了安全问题在今年已经停止使用插件这种方式,导致现在不允许在chorme中使用插件来更改我们本地的文件这样的操作了.--(吐槽一下,禁用插件导致了我的报表打印功能无法使用了.原来的排版漂亮的报表现在无法再chorme上使用,头疼) 但是由于chorme是一款功能强大的浏览器,首先他为我们提供了一些高级特性.如我们现

centos6.5下安装配置ELK及收集nginx日志

Elasticsearch 是个开源分布式搜索引擎,它的特点有:分布式,零配置,自动发现,索引自动分片,索引副本机制,restful风格接口,多数据源,自动搜索负载等. Logstash 是一个完全开源的工具,他可以对你的日志进行收集.分析,并将其存储供以后使用(如,搜索) kibana 也是一个开源和免费的工具,他Kibana可以为 Logstash 和 ElasticSearch 提供的日志分析友好的 Web 界面,可以帮助您汇总.分析和搜索重要数据日志. 环境:192.168.50.119

syslog-ng+loganalyzer(非常详细配置文件)部署收集操作日志

一.syslog-ng 说明 二.syslog-ng 下载安装 三.syslog-ng 配置文件详细说明 四.配置syslog-ng收集操作日志 五.使用loganalyzer展示收集日志 1.syslog-ng说明 syslog-ng应用程序是一个灵活和高度可伸缩的系统日志应用程序创建集中的和可信的日志解决方案的理想选择.syslog-ng的主要特征概括如下: (1)可靠的日志传输:syslog-ng应用程序使您能够发送你的主机到远程服务器的日志消息使用最新的协议标准.不同服务器的日志可以收集

filebeat+logstash+elasticsearch收集haproxy日志

filebeat用于是日志收集,感觉和 flume相同,但是用go开发,性能比较好 在2.4版本中, 客户机部署logstash收集匹配日志,传输到 kafka,在用logstash 从消息队列中抓取日志存储到elasticsearch中. 但是在 5.5版本中,使用filebeat 收集日志,减少对客户机的性能影响, filebeat 收集日志 传输到 logstash的 5044端口, logstash接收日志,然后传输到es中 实验 filebeat ---- kafka ------lo