前端日志上报

参考并优化MonitorWeb 代码

使用方式

初始化

在网页加入代码即可：

    var monitor = document.createElement("script");
    var analysisWeb = null;

    // 加载库文件
    monitor.src = "./dist/index.js";
    document.body.appendChild(monitor);
    var debug = true;
    monitor.onload = function () {
        // 初始化
        analysisWeb = new AnalysisWeb({
            // debug 打印日志
            debug: debug,
            appid: 'ainote',
            appName: '爱标客',
            url: '',
            // 自动记录网络请求
            logRequest: true,
            // 自动记录点击事件
            logClick: true,
            // 记录错误信息
            logError: true,
            // 记录请求数据
            logRequestData: true,
        });
        
        // 注册用户
        analysisWeb.setUser('test-user');
    }

自定义埋点

例:

/**
 * 自定义埋点
 * @param pointName 埋点名称
 * @param udmap 自定义埋点数据
 */
analysisWeb.onEvent(pointName: String, udmap: object)

记录时长

例:

  /**
   * 记录加载时间日志（手动调用），比如记录页面加载时间
   * @param typeName 时间类型
   * @param time 耗时
   */
  analysisWeb.timeEvent(typeName:string, time: number) ;

手动记录error

一般在框架内部错误被拦截,无法被全局捕获时, 需使用框架自身的捕获报错的方法来将捕获到的异常信息传入上报队列

如vue有config.errorHandler, react有EerrorBoundary和unstable_handleError的方法;

当然, 也可在try catch中使用.

| 参数 | 类型 | 是否必传 | 描述及默认值 | |:------|:------:|:-------:|:-------:| | error | Object | true | 错误信息 |

// 在main.js中引入后, 自动注册为全局变量
import { AnalysisWeb } from 'analysis-web'

// 将创建的实例赋给vue原型中方便调用
Vue.prototype.$analysisWeb = new AnalysisWeb(
    {
        // debug 打印日志
        debug: debug,
        appid: 'ainote',
        appName: '爱标客',
        url: '', // 日志上传服务地址
        // 自动记录网络请求
        logRequest: true,
        // 自动记录点击事件
        logClick: true,
        // 记录错误信息
        logError: true,
        // 记录请求数据
        logRequestData: true,
    }
)

// 在vue实例的config.errorHandler方法中, 将完整错误信息传入catchError等待上报
Vue.config.errorHandler = (err, vm, info) => {
  Vue.prototype.$analysisWeb.catchError(err)
}

服务端开发

默认的日志传入实现如下, 日志通过url参数传递：${this.config.url}?log=${strLog}&appid=${this.config.appid}

因此实现一个http接口，接受log和appid即可。

export default class Reporter {
 config: AnalysisConfig;

 constructor(config: AnalysisConfig) {
  this.config = config;
 }
 sendPoint(log: EventLog) {
  let strLog = JSON.stringify(log);
  if (this.config.debug) {
   console.log(strLog)
  }
  let img = new Image()
  img.width = 1
  img.height = 1
  img.src = `${this.config.url}?log=${strLog}&appid=${this.config.appid}`
  img.onload = () => {
   img = null
  }
 }
};

同时，也提供自定义上传方式，比如需要上传日志到公司的idata，可以通过customReporter 自定义上传方式。

    analysisWeb.customReporter({
        sendPoint(log) {
            if (debug) {
                console.log(log);
            }
            Object.keys(log).forEach(function (key) {
                log[key] = log[key] + '';
            });
            IFlyCollector.onEvent('ainote', log, "ainote");
        }
    })