前端工程记录

[TracerLee]

记录或者摘录一些前端工程相关的知识。

[TracerLee]

统计与监控

来自fouber

统计和监控一般分为两大类：『业务统计』和『性能监控』

前者是业务指标，后者是技术指标

业务统计我们一般都是统计用户行为，点击、路径追踪、落地页、滚屏高度等，这部分应该没啥可说的，最多是可以实现一个小框架，然后约定页面上有某种特殊标签的元素，捕获其上事件，自动上报，这样就不用针对每个元素去自定义了，比如我们上约定元素如果有 data-stat 标记的元素被点击就要上报，上报的信息也都写在元素的属性中，这样开发过程就相对简化下来，在需要统计的地方给元素加上这些属性就好了。

技术指标就有很多内容，包括『T0时间』、『T1时间』、『首屏时间』、『可交互时间』，如果你是单页面应用，可能还会关注『页面切换时间』，我们团队在海外的项目，由于当地网络环境实在太差了，差不多是我们5、6年前的移动网络情况，所以我们还监控了页面的『到达率/折损率』，就是在页面的html代码的前中后三个地方分别打点，判断用户在哪个位置离开。最后就是『JS报错监控』，其实js报错的误报率挺高的（浏览器插件报错都可能被捕获到），千奇百怪，所以有点报错不用担心，主要是监控那些高频错误，js报错的收集就是window.onerror了，这些大家应该都做的差不多。另外还有一类日志，属于前端安全，主要是监控非本网站js脚本注入，可以看 这里

日志上报用 new Image().src=xxx ，不赘述。

此外，保留服务器访问日志（这个一般运维都会做），必要的时候可以通过写脚本分析访问日志来追查问题，这也是非常重要的问题分析和定位手段。

总的来说：

基础设施需要一个『日志存储和离线计算的平台』，可以自己搞，用应该ga也行，因为量比较大，前端要折腾可能还需要其他角色的配合。
前端写一个『日志框架』，识别有特定属性的元素，对其进行用户行为日志上报，并提供接口，方便在js中上报日志
统计『T0/T1时间』、『首屏展现时间』、『用户可交互时间』、『JS报错监控』、『脚本注入监控』(可选)、如果是单页面应用还有『页面切换时间』、如果产品运行环境的网络非常差，还有『页面到达率/折损率』
保留服务器访问日志，必要时可以下载之后本地写脚本慢慢分析
最后还需要一个『统计数据展示平台』，所谓的报表平台，有标准的数据展示平台，好像ga的那个分析后台，还有一些特色的，比如我们运营同学希望能在页面上可视化标记出用户点击数据，这类很早以前在百度的时候也有人实践过，类似的还有点击热力图等
整套东西差不多就这些吧，可深入的细节还很多，总之大数据时代不搞搞小数据真的没法出去吹牛逼。

个人觉得统计与监控也是前端工程的重要组成部分，必须好好搞

[TracerLee]

gulp简单配置

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'])

[TracerLee]

ESlint 配置

• ES8
• globals
• jsx

需要装全局 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
    }
}

[TracerLee]

持续集成相关

Gitlab Runner

在指定账户下运行 Runner

gitlab-runner uninstall
gitlab-runner install --working-directory /home/www/ --user www
gitlab-runner stop
gitlab-runner start