前端监控 - 异常篇

1. 首先确定需要做的事情，生成用户唯一的凭证（放在缓存中，同时兼容外部传参）

/* uid生成方法 兼容的在初始化时处理 */
export function generateTmpUid () : string {
    return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
        var r = Math.random()*16|0, v = c == 'x' ? r : (r&0x3|0x8);
        return v.toString(16);
    });
}

2. 获取当前的环境信息，当前的页面地址（可用于统计pv/uv等）、屏幕宽高、用户点击事件（暂时不管、放在行为监控一起），此处可以得到用户点击何处产生的异常

页面标题: document.title
来源页面: document.referrer
当前页面: document.url
当前语言: navigator.language
屏幕宽度: window.innerWidth
屏幕高度: window.innerHeight
下载网速: navigator.connection.downlink
网络类型: navigator.connection.effectiveType

3. 错误监听方法，window.onerror + console重写(同一需要兼容外部传入异常信息，兼容vue、react等)

window.onerror = (message, source, line, column, error) => {
    // 此处将 错误信息封装 拼接成 解析时所需要的格式 上报到服务器
    let msg = ``
    // 暂存到缓存中 根据项目流量选择上报方式 前期可全部上报 reportedDate(msg)
}

/* 定义错误数据 {type: 'error', message: 'xxxx'} */
console.error = (function (originalConsole) {
    return function () {
        if (arguments[0].hasOwnProperty('type')) {
            reportedDate(arguments[0].message)
        }
        originalConsole(arguments[0])
     }
})(console.error)

4. 异常上报方法（异常上报方案）

/* 优先sendBeacon, 没有时再使用img src属性 原因：性能问题 */
export function reportedDate (data: string) : void {
    if (!navigator.sendBeacon) {
        let img: any = new Image()
        img.onload = img.onerror = function () {
            img = null
        }
        img.src = `${data}`
    } else {
        navigator.sendBeacon('', data)
    }
}
// 备注：上报方案在，完整的代码中处理，按照异常数据类型，采用不同的上报方案，致命错误类型上报到报警接口，非致命错误上报到日志接口，等待事件处理

5. nginx配置，shell脚本编写（日志备份，删除过期日志）

server {
    listen       80;
    server_name  log.xxxx.com;
    root /www/log.xxxx.com;

    #charset koi8-r;
    #access_log off;

    location / {
     return 404;
    }

    location = /log.gif {
      default_type  image/gif;
      #access_log on;
      access_log  /log/log.xxxx.com/log.xxxx.com.log  log.xxxx.com;

      # 这种请求一般不缓存
      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";

      #echo 'hello log server';
      # 一般独立记录日志的请求，都会返回一张 1×1 的空白gif图
      #empty_gif;
    }
}

.sh  备份脚本
#!/bin/bash
base_path=/www/log/log.xxxx.com/ #日志文件目录
log_name=log.xxxx.com.log #日志文件名
log_path_y=$(date -d yesterday '+%Y' )
log_path_md=$(date -d yesterday '+%m%d')
log_path_hms=$(date -d yesterday '+%H%M%S')
mv $base_path$log_name /www/log/backups/$log_path_md-$log_name #移动日志
touch $base_path$log_name #生成新日志文件
kill -USR1 `cat /etc/nginx/log/nginx.pid` #nginx重读配置文件

脚本启动命令
crontab -e
0 0 * * * sh /home/sh/runlog.sh

完整项目在完善好之后上传到github