Open TracerLee opened 8 years ago
来自fouber
统计和监控一般分为两大类:『业务统计』和『性能监控』
前者是业务指标,后者是技术指标
业务统计我们一般都是统计用户行为,点击、路径追踪、落地页、滚屏高度等,这部分应该没啥可说的,最多是可以实现一个小框架,然后约定页面上有某种特殊标签的元素,捕获其上事件,自动上报,这样就不用针对每个元素去自定义了,比如我们上约定元素如果有 data-stat 标记的元素被点击就要上报,上报的信息也都写在元素的属性中,这样开发过程就相对简化下来,在需要统计的地方给元素加上这些属性就好了。
技术指标就有很多内容,包括『T0时间』、『T1时间』、『首屏时间』、『可交互时间』,如果你是单页面应用,可能还会关注『页面切换时间』,我们团队在海外的项目,由于当地网络环境实在太差了,差不多是我们5、6年前的移动网络情况,所以我们还监控了页面的『到达率/折损率』,就是在页面的html代码的前中后三个地方分别打点,判断用户在哪个位置离开。最后就是『JS报错监控』,其实js报错的误报率挺高的(浏览器插件报错都可能被捕获到),千奇百怪,所以有点报错不用担心,主要是监控那些高频错误,js报错的收集就是window.onerror了,这些大家应该都做的差不多。另外还有一类日志,属于前端安全,主要是监控非本网站js脚本注入,可以看 这里
日志上报用 new Image().src=xxx ,不赘述。
此外,保留服务器访问日志(这个一般运维都会做),必要的时候可以通过写脚本分析访问日志来追查问题,这也是非常重要的问题分析和定位手段。
总的来说:
基础设施需要一个『日志存储和离线计算的平台』,可以自己搞,用应该ga也行,因为量比较大,前端要折腾可能还需要其他角色的配合。 前端写一个『日志框架』,识别有特定属性的元素,对其进行用户行为日志上报,并提供接口,方便在js中上报日志 统计『T0/T1时间』、『首屏展现时间』、『用户可交互时间』、『JS报错监控』、『脚本注入监控』(可选)、如果是单页面应用还有『页面切换时间』、如果产品运行环境的网络非常差,还有『页面到达率/折损率』 保留服务器访问日志,必要时可以下载之后本地写脚本慢慢分析 最后还需要一个『统计数据展示平台』,所谓的报表平台,有标准的数据展示平台,好像ga的那个分析后台,还有一些特色的,比如我们运营同学希望能在页面上可视化标记出用户点击数据,这类很早以前在百度的时候也有人实践过,类似的还有点击热力图等 整套东西差不多就这些吧,可深入的细节还很多,总之大数据时代不搞搞小数据真的没法出去吹牛逼。
个人觉得统计与监控也是前端工程的重要组成部分,必须好好搞
var gulp = require('gulp')
var uglify = require('gulp-uglify')
var pump = require('pump')
var concat = require('gulp-concat')
var cleanCSS = require('gulp-clean-css')
var imagemin = require('gulp-imagemin')
gulp.task('compress', function (cb) {
pump([
gulp.src('dev/js/*.js'),
uglify(),
concat('main.min.js'),
gulp.dest('src/js/')
]),
cb
})
gulp.task('cleanCSS', function (cb) {
pump([
gulp.src(['dev/css/*.css']),
cleanCSS(),
concat('main.min.css'),
gulp.dest('src/css')
]),
cb
})
gulp.task('imagemin', function (cb) {
pump([
gulp.src(['dev/img/*.png']),
imagemin(),
gulp.dest('src/img')
]),
cb
})
gulp.task('build', ['compress', 'cleanCSS', 'imagemin'])
需要装全局 ESLint
和 本地 babel-eslint
{
"env": {
"browser": true,
"es6": true
},
"extends": "eslint:recommended",
"parserOptions": {
"ecmaVersion": 8,
"parser": "babel-eslint",
"ecmaFeatures": {
"jsx": true
},
"sourceType": "module"
},
"rules": {
"indent": [
"error",
4
],
"linebreak-style": [
"error",
"unix"
],
"quotes": [
"error",
"single"
],
"semi": [
"error",
"never"
]
},
"globals": {
"Vue": true
}
}
gitlab-runner uninstall
gitlab-runner install --working-directory /home/www/ --user www
gitlab-runner stop
gitlab-runner start
记录或者摘录一些前端工程相关的知识。