前端监控组件

主要用于前端性能指标、错误日志、劫持信息上报，也可以自定义上报数据。

监控任务看起来就是几个埋点，但其重要性却不容小觑。

• 错误日志收集可以有效监控代码BUG，在大量用户反馈之前拿到错误现场，可以更快地解决问题，避免因为定位问题打扰用户。
• 性能指标上报可以有效监控代码质量，是后续优化的基础和标杆。
• 劫持信息上报可以有效把握网站安全现状，为后续的安全策略提供场景指导。

所以，安全监控组件还是值得拥有~ ：）

接入成本

• 58用户，只需要在后台申请一个ID就可以了
• 其他用户，需要后端实现上报收集的接口以及对数据的处理

使用

建议使用模块引入的方式使用，如果是全局引入，可能因为跨域问题拿不到异常报错的堆栈信息。

• npm包引用

  # 安装模块
  # @sea https://www.npmjs.com/package/fe-monitor
  npm i -S fe-monitor

  // ES6 使用方式
  import Monitor from 'fe-monitor';
  
  // cmd 使用方式
  // let Monitor = require('fe-monitor');

• 全局引用

如果业务代码非j1.58cdn.com.cn域，需要把文件拷贝到业务代码所在的域下， 否则错误日志拿不到错误的详细堆栈，原因移步注意事项

  <script src="//j1.58cdn.com.cn/git/monitor/index.min.js"></script>

  const Monitor = window.FeMonitor;

• 模块加载器引用

  // cmd 使用方式（如seajs）
  let Monitor = require('dist/index.min.js');

  // amd 使用方式(如requirejs)
  requirejs(['dist/index.min.js'], function(Monitor) {
    // TODO
  });

• 调用

  // 项目ID，用于后端展示区分（可选，默认使用MONITOR_ANONYMOUS）
  // 需要在后台系统申请才能看到数据（@sea http://collectlog.58.com/）
  const OPT_PROJECT_ID = 'OPT_PROJECT_ID';

  // 上报地址，58用户可不填写
  // 其他用户根据自己后台服务填写
  const OPT_REPORT_URL = 'report_url';
  
  // 域名白名单(仅支持顶级域名)，用于内容注入、劫持检测
  // 默认使用页面域名对应顶级域
  // 比如ai.58.com顶级域为58.com
  // collection.58.com顶级域也为58.com
  // 所以collection.58.com会被认为是同域，不会上报
  const OPT_WHITE_LIST = [
    '58cdn.com.cn'
  ];
  
  const OPTIONS = {
    projectID: OPT_PROJECT_ID,
    reportUrl: OPT_REPORT_URL,
    whitelist: OPT_WHITE_LIST
  };
  
  // 普通使用模式
  const monitor = new Monitor(OPTIONS);
  
  // 单例使用模式（推荐）
  const INSTANCE = Monitor.getInstance(OPTIONS);
  
  // 使用全部功能的调用方式
  INSTANCE.init();
  
  // 单独使用错误上报
  INSTANCE.errorReport();
  
  // 单独使用性能上报
  INSTANCE.performanceReport();
  
  // 单独使用CSP事件上报
  INSTANCE.cspReport();
  
  // 单独使用代码注入上报
  INSTANCE.injectionReport();
  
  // 个性化日志上报
  INSTANCE.report('type', 'object');
  
  // 获取性能指标
  INSTANCE.getPerformance((indicators) => {
    console.log(indicators);
  });

上报数据

• 错误日志上报数据格式：

  let errorData = {
    category: 'project_id',
    type: 'error',
    data: JSON.stringify({
      errmsg: 'Uncaught TypeError: window.fn is not a function',
      uri: 'http://localhost:8082/js/app.js',
      line: 3528,
      column: 8,
      obj: {},
      pageUrl: '当前页面地址'
    })
  };

  // 最终请求URL: http://collectlog.58.com/log?category=project_id&type=error&data=%7B%220%22%3A%22Uncaught%20TypeError%3A%20window.fn%20is%20not%20a%20function%22%2C%221%22%3A%22http%3A%2F%2Flocalhost%3A8082%2Fjs%2Fapp.js%22%2C%222%22%3A3528%2C%223%22%3A8%2C%224%22%3A%7B%7D%7D&t=1510639937193

• 性能指标上报数据格式：

  let performanceData = {
    category: 'project_id',
    type: 'performance',
    data: JSON.stringify({
      dns: 0,
      tcp: 0,
      ttfb: 4,
      firstPaintTime: 260,
      domReady: 1132,
      load: 1148,
      slowResources: [
        {duration: 200, name: './index.js'}
      ],
      pageUrl: '当前页面地址'
    })
  };

• CSP事件上报

  let cspData = {
    category: 'project_id',
    type: 'csp',
    data: JSON.stringify({
      documentURI: '当前页面地址',
      referrer: '当前页面referrer',
      blockedURI: '被拦截的地址',
      violatedDirective: '违反的策略',
      originalPolicy: '页面CSP策略',
      pageUrl: '当前页面地址'
    })
  };

• 内容注入事件上报

  let injectionData = {
    category: 'project_id',
    type: 'injection',
    data: JSON.stringify({
      type: 'script|iframe',
      urls: [],
      pageUrl: '当前页面地址'
    })
 };

兼容性

通过设置img.src的方式发起请求，所以不要上报过多的数据，可能会被截断。
IE8-不支持错误上报，性能参数主要通过performance.timing和performance.getEntries接口计算而来，不支持此接口的浏览器只会计算load和domReady两个指标，其他指标为空。