# 前端数据采集
# 概述
采集web站点的前端页面操作信息和nginx服务器日志，用于统计分析web应用的会话数、浏览量、访问时长、web服务的成功次数、失败次数等信息，为管理者呈现web站点的运行情况及为后续的优化提供依据和支撑
# 针对人员
- 数据开发工程师
- 业务开发人员
# 本内容你将获得
- 如何采集前端页面操作信息
- 如何采集nginx服务器日志
# 采集前端页面操作信息
# 部署采集前端操作信息工具包
在components目录下增加采集代码包
在vue工程的components目录中，部署采集前端界面操作信息的js程序包
目录摘要
└───vue前端工程
└──────src
└──────components
└─────────websdk #采集web前端操作信息工具包
└────────────config.js #配置文件
└────────────tracker.js #跟踪器
└────────────utils.js #跟踪器工具类的集成包
配置说明：
- 本示例为采集vue前端框架的项目
- 在config.js中配置web的应用名称、接收采集信息的接口API地址
- 在tracker.js中可配置监听所有的button按钮操作、页面加载自动上报、页面history变化自动上报、页面hash变化自动上报等
- 在tracker.js中可配置监听的鼠标事件等
- 在tracker.js中可开启约定拥有属性值为'tracker-key'的dom的点击事件自动上报。开启后，可采集dom元素拥有属性值为'tracker-key'的点击事件
- 在tracker.js中，通过XMLHttpRequest发送消息到接收消息接口API。在项目开发阶段，发送消息时，可设置向浏览器控制台打印信息，在项目上线时，设置不再向浏览器控制台打印信息
# 在main.js挂载tracker实例
在vue工程的main.js中引入tracker.js，并挂载tracker实例
#省略若干行
import Tracker from '@/components/websdk/tracker.js'; #
#省略若干行
Vue.prototype.tracker = new Tracker()
#省略若干行
# 在config.js中配置后端接口
export default {
appid : '****', #应用名称
serverUrl: 'http://ip:端口/接口名称', #接收采集工具包发送数据的后端接口API
serverTimeout: '6000',
version: '1.0.0'
}
项目运行后，在浏览器控制台可看到采集前端的操作信息，数据格式如下
{
"appid":"案件管理",
"architecture":"64",
"browserEngine":"Blink",
"browserLang":"zh-CN",
"browserType":"Chrome",
"browserVersion":"86.0.4240.198",
"cookie":"caseManager_a87746e0-609b-11ed-a1d9-b58d3b0b9fd6",
"eventId":"innerHistoryChange",
"eventTime":"1668045802878",
"eventType":"pushState",
"host":"localhost:1025",
"hostname":"localhost",
"localCityID":"",
"localIP":"",
"origin":"http://IP地址:端口",
"osType":"Windows",
"osVersion":"10",
"pathname":"/caseProcessingSchedule/list",
"port":"1025",
"protocol":"http:",
"referrer":"",
"title":"涉案物品",
"ua":"Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/86.0.4240.198 Safari/537.36",
"url":"http://IP地址:端口/caseProcessingSchedule/list",
"uuid":"a87746e0-609b-11ed-a1d9-b58d3b0b9fd6"
}
# 验证
在hive数据仓库，可看到采集的前端数据已入库
hive> select * from ods_data_hub limit 2 ;
OK
20221104150419508 20221104150419508_0_0 deviceID:b6c34800-5b61-11ed-961e-db76b0ef4e07,eventTime:2022-11-04 11:02:53,eventId:innerHistoryChange,eventType:pushState,url:ip 2022110411
20221104150419508 20221104150419508_0_1 deviceID:b6c34800-5b61-11ed-961e-db76b0ef4e07,eventTime:2022-11-04 11:02:50,eventId:innerHistoryChange,eventType:replaceState,url:ip
Time taken: 1.405 seconds, Fetched: 2 row(s)
hive>
# 采集nginx服务器日志
# 配置nginx日志格式
在nginx服务器的配置文件中，新增json数据格式并设置访问日志采用json数据格式。摘要如下：
http {
#省略若干行
log_format log_json '{"time_iso8601": "$time_iso8601",'
'"time_local": "$time_local",'
'"remote_addr": "$remote_addr",'
'"remote_port": "$remote_port",'
'"remote_user": "$remote_user",'
'"request": "$request",'
'"request_body": "$request_body",'
'"request_body_file": "$request_body_file",'
'"request_completion": "$request_completion",'
'"request_filename": "$request_filename",'
'"request_length": "$request_length",'
'"request_method": "$request_method",'
'"request_time": "$request_time",'
'"request_uri": "$request_uri",'
'"https": "$https",'
'"status": "$status",'
'"body_bytes_sent": "$body_bytes_sent",'
'"bytes_sent": "$bytes_sent",'
'"http_user_agent": "$http_user_agent",'
'"http_referer": "$http_referer",'
'"http_cookie": "$http_cookie",'
'"server_addr": "$server_addr",'
'"server_name": "$server_name",'
'"server_port": "$server_port",'
'"server_protocol": "$server_protocol",'
'"http_host": "$http_host",'
'"host": "$host",'
'"hostname": "$hostname",'
'"is_args": "$is_args",'
'"args": "$args",'
'"arg_name": "$arg_name",'
'"uri": "$uri",'
' }';
access_log /var/log/nginx/access.log log_json;
#省略若干行
}
# 发送nginx日志到后端服务
部署Filebeat工具，读取nginx服务器产生的json格式日志文件，将数据发送到后端服务
filebeat_nginx.yml配置如下：
filebeat.modules:
- module: nginx
access:
enabled: true
var.paths: ["/var/nginx-log/log/access.log"]
error:
enabled: true
var.paths: ["/var/nginx-log/log/error.log"]
#----------------------------------Kafka output--------------------------------#
output.kafka:
# initial brokers for reading cluster metadata
hosts: [IP:端口"]
# message topic selection + partitioning
topic: 'test_log'
partition.round_robin:
reachable_only: false
required_acks: 1
compression: gzip
max_message_bytes: 1000000
codec.format:
string: '%{[message]}'
Filebeat运行后，将实时收集nginx产生的日志
# 验证
在hive数据仓库，可看到采集的前端数据已入库
hive>select * from ods_web_nginx_log limit 2;
OK
20221104150419918 20221104150419918_0_0 time_iso8601:2022-11-04 15:32:08,remote_addr:ip ,http_x_forwarded_for:-,request_uri:/static/js/chunk-UI.1e0a3897.js,http_referer:ip
20221104150419918 20221104150419918_0_1 time_iso8601:2022-11-04 15:32:08,remote_addr:ip,http_x_forwarded_for:-,request_uri:/static/js/chunk-libs.c228d0f6.js,http_referer:ip
Time taken: 0.211 seconds, Fetched: 2 row(s)
hive>
# 其它
- 无