LogPlugin of Chimee

实现日志输出及打点上报逻辑，可用于异常跟踪等。本插件继承自popup插件实现具备相应功能函数。

默认菜单基本用法

使用默认日志输出，不做定制或修改。 
  1. import myLog from 'chimee-plugin-log';
  2. Chimee.install(myLog);
  3. const chimee = new Chimee({
  4.   wrapper: '#wrapper',
  5.   plugins: [myLog.name]
  6. });
  7. // 打开日志输出
  8. chimee[myLog.name].open();
  9. // 关闭日志输出
  10. chimee[myLog.name].close();
提示：打开后才开始有日志输出到textarea中，所以如果想看完整日志，可以选择“下次自动打开”，然后保证下一次开启页面后能从初始化开始自动输出日志。

效果示例：

日志 - 图1

打点上报

通常我们需要将关键环节的日志信息上传到服务端，以生成观看报表、异常报表等数据分析内容。你可以参考以下代码配置实现日志上报。 
  1. import myLog from 'chimee-plugin-log';
  2. Chimee.install(myLog);
  3. const chimee = new Chimee({
  4.   wrapper: '#wrapper',
  5.   plugins: [{
  6.     name: myLog.name,
  7.     // 告诉插件你有一个可以接受日志上报的服务端接口
  8.     logPostUrl: 'https://myDomain.xx/log_push'
  9.   }]
  10. });

这样默认的关键环节将自动上报日志到服务端，除了相应时长数据，包含以下基本数据信息：

  1. ref - location.href
  2. pro - location.protocol
  3. box - chimeeConfig.box
  4. type - chimeeConfig.type
  5. src - chimeeConfig.src
  6. uid - 插件内部计算产生
  7. ver - chimee 版本
  8. evt - 日志名称
  9. _t - 时间戳
  10. _r - 随机数

目前系统插件默认会执行打点上报的环节包含：loadstart canplay ended playing pause waiting timeout error destroy。其中的超时事件 timeout 对应默认等待载入时长 logPlugin.timeoutDelay，默认值为30000毫秒。

如果你想增加其他事件环节的打点，可以像下面这样实现：

  1. import myLog from 'chimee-plugin-log';
  2. Chimee.install(myLog);
  3. const chimee = new Chimee({
  4.   wrapper: '#wrapper',
  5.   plugins: [{
  6.     name: myLog.name,
  7.     // 告诉插件你有一个可以接受日志上报的服务端接口
  8.     logPostUrl: 'https://myDomain.xx/log_push',
  9.     events: {
  10.       play: () => {
  11.         this.sendLog('日志名称', { src: this.src, 'myData': '想要上报的数据' });
  12.       }
  13.     }
  14.   }]
  15. });

如果你需要对输出或上报的打点数据进行加工，可以像下面这样实现：

  1. import myLog from 'chimee-plugin-log';
  2. Chimee.install(myLog);
  3. const chimee = new Chimee({
  4.   wrapper: '#wrapper',
  5.   plugins: [{
  6.     name: myLog.name,
  7.     // 告诉插件你有一个可以接受日志上报的服务端接口
  8.     logPostUrl: 'https://myDomain.xx/log_push',
  9.     methods: {
  10.       // 自定义loadstart环节输出日志包含的数据格式
  11.       write_loadstart_log: (evt, logData) => {
  12.         return Object.assign(logData, {
  13.           src: this.src,
  14.           'myData': '想要输出的数据'
  15.         });
  16.       },
  17.       // 自定义loadstart环节上报日志包含的数据格式
  18.       send_loadstart_log: (evt, logData) => {
  19.         return Object.assign(logData, {
  20.           src: this.src,
  21.           'myData': '想要上报的数据'
  22.         });
  23.       }
  24.     }
  25.   }]
  26. });

希望您用着方便，有相应问题请随时反馈。