0.1.5 • Published 1 year ago

@tbjy/tbdx-logger v0.1.5

Weekly downloads
-
License
ISC
Repository
gitlab
Last release
1 year ago

tbdx-logger

前言

淘宝大学 - 前端日志 支持 web 端,小程序端,内部自动化采集客户端设备,访问页面地址等信息。

sls 平台

在阿里云 sls 平台,创建 projectlogstore。 具体参考:https://yuque.antfin-inc.com/ll36/bzwoow/goguxb

logger 对象注释

/**
 * 记录日志
 * @param {object} init 初始化(可重复调用,后面覆盖前面) option:{
 *  url:'', //sls的url
 *  debug:false, //是否开启调试状态
 *  throttle:{delay:1000,count:1}, // 1s内最多发送3条(防止死循环爆表)
 *  defaultData, // 设置固定参数,后续日志会自动带上
 *  output: [], //关键字移除,不发送log,选填
 *  beforeSend: (data) => data, //发送之前对数据进行处理(如果返回的data为空则不再发送),选填
 * }
 * @param {object} setDefault 设置固定参数 覆盖 init 的 defaultData
 * @param {object} clearDefault 清除固定参数
 * @param {object} info|error|warn|debugger 发送日志 第一个参数 data:{msg:'',remark:''}; 第二个参数 ext:{rate:0.2}
 * @param {string|Error} info|error|warn|debugger 发送日志 第一个参数 data:'xxx' 'xxx'会自动拼接成{msg:'xxx'}; 第二个参数 ext:{rate:0.2}
 * @param {object} pageShow 记录进入页面 data:{url:'',query:''};url(可选),当前页面地址,默认读取;query(可选),当前页面参数,会拼接到url后面
 * @param {object} pageHide 记录离开页面
 */

自动采集信息

PC

key描述
pageUrl页面地址
pageReferrer上一页面地址
pageOrigin页面域名
clientUa浏览器 UA
clientBrowser浏览器型号(Chrome,Safari)
clientVersion浏览器版本号
clientPlat客户端平台(PC,Mobile)

小程序

key描述
pageUrl页面地址
pageReferrer上一页面地址
clientPlatform客户端平台(iOS)
clientModel设备型号(iPhone12,1)
clientSystem设备系统版本(13.1.3)
clientVersion客户端版本号(9.1.1)

调用参考

PC

/**
 * 初始化
 * index 入口 index.js
**/
/** other code **/
logger.init({
  url: 'https://tbdx-haoxue-assets.cn-hangzhou.log.aliyuncs.com/logstores/taobao_miniapp/track?APIVersion=0.6.0',
  debug: true, // 控制台打印信息
  throttle: { delay: 1000, count: 3 }, // 1s内最多发送3条(防止死循环爆表)
  output: [
    '令牌过期',
  ],
  beforeSend: (data) => data
});
/** other code **/

/**
 * 初始化
 * 母版页 BasicLayout
**/
/** other code **/
  componentDidMount() {
      getUserInfo().then((res) => {
        const { userInfo } = this.props;
        if (res.success && res.data) {
          res = res.data;
          /** other code **/
          // 初始化写入登录人信息
          logger.setDefault({
            uid: res.userId,
            tbUid: res.externalUid,
            nick: res.userName, //  姓名
          });
          // 或者
          // logger.init({
          //   defaultData: {
          //     uid: res.userId,
          //     tbUid: res.externalUid,
          //     nick: res.userName, //  姓名
          //   },
          // });
        }
      }).catch((err) => {
        console.error(err);
      });
    };
  }
/** other code **/

/**
 * 发送日志
 * utils fetch.js
**/
/** other code **/
  .catch(err=>{
    logger.warn({
      position: 'util/fetch->fail',
      msgType: 'fetch_fail',
      requestUrl: url,
      requestData: JSON.stringify(data),
      msg: err || '请求失败',
    });
  })
/** other code **/

PC示意图

小程序

/**
 * 初始化
 * 小程序入口 app.js
**/
import logger from '@ali/tbdx-logger';
App({
  /** other code **/
  onLaunch(options) {
    // 获取用户信息
    this.getUserInfo().then(res=>{
      // 日志初始化
      logger.init({
        url:'https://tbdx-haoxue-assets.cn-hangzhou.log.aliyuncs.com/logstores/taobao_miniapp/track?APIVersion=0.6.0',
        defaultData:{
          nick: res ? res.externalNick : 'nologin',
          uid: res ? res.externalUid : '0',
          env,
          miniVersion
        },
        debug:false
      });
    }).catch(err => {
      // 发送警告日志
      logger.warn({
        position: 'app->onLaunch',
        msgType: 'getUserInfo',
        msg: err
      });
    });
    // 日志初始化
    logger.init({url:'https://tbdx-haoxue-assets.cn-hangzhou.log.aliyuncs.com/logstores/taobao_miniapp/track?APIVersion=0.6.0'});
    this.getMiniAppSystemInfo();
  },
  /** other code **/
}

/**
 * 发送日志
 * 页面跳转失败 util/business.js/togglePageResult
**/
import logger from '@ali/tbdx-logger';

export function togglePageResult(visable = true, options = {}) {
  const { title = '', brief = '', remark = '' } = options;
  /** other code **/
  const param = {
    position: 'util/business->togglePageResult',
    msgType: 'togglePageResult',
    msg: `页面错误 ==> title:${title},content:${brief}`,
    remark
  }
  // 记录日志
  logger.error(param);

  // // 记录日志(带扩展参数:采样率)
  // logger.error(param,{rate:0.5}); // 10% 的概率正式上传服务器
  /** other code **/
}

小程序示意图

更新

2019 年 11 月 07 日 10:39:47 v0.0.1:

小程序已测试通过(通过 my.request 发送请求)

2019 年 11 月 08 日 19:37:44 v0.0.5:

内置节流可通过 init 设置 throttle,控制节流;PC 已测试通过(通过内置 jsonp 发送请求)

2019 年 11 月 15 日 15:46:54 v0.0.6:

新增 setDefault 方法,设置固定参数,可代替 init({defaultData:{xxx:xxxx}})

2019 年 11 月 27 日 15:11:32 v0.0.10:

新增 clearDefault 方法,清除原有设定的默认参数。 fixBug:init({defaultData:{xxx:xxxx}})setDefault 会覆盖原来的 option.defaultData,原有的参数无法保留,该版本已修复。

2020 年 05 月 15 日 15:47:16 v0.0.11:

新增 logger.info , logger.warn , logger.error , logger.debug 新增第二个参数 object 类型,目前支持传入 {rate:0.1} (采样率 10%) 调用函数,真正上传服务器的概率为 10% 场景:大量重复的信息日志,必要但不重要,可以采用该方法减少上传频率。

2020 年 07 月 31 日 14:23:33 v0.0.12:

新增 logger.pageShow , logger.pageHide 记录用户报错时,最近访问的 3 个页面和每个页面停留时长,方便还原用户报错场景。 npm.io

使用方式:进入页面时候调用 logger.pageShow(),离开是调用 logger.pageHide();

  • 使用技巧:
  1. 单页面应用(SPA)PC 和 H5 的项目,可以在 logger 初始化时,加入 tracker:true,如 logger.init({url:'xxx',tracker:true,debug:false}),该组件会自动监听 hashChange,记录访问路径,无需再调用 logger.pageShow() 和 logger.pageHide() ;当然也可取消监听,自行调用 pageShow 和 pageHide。
  2. 小程序多页面应用,需要到每个页面 js 部分的 onShow 和 onHide 地方调用 pageShow 和 pageHide,会很麻烦;可以利用修饰器模式,将每个页面配置当做参数,传入修饰器,修饰器内拦截 onShow 和 onHide 等生命周期,插入公用业务逻辑,如 SPM 统计,日志等等。

2020年 12 月 11 日 16:07:01 v0.0.16:

新增 logger.info , logger.warn , logger.error , logger.debug 新增第二个参数 object 类型,新增支持传入 {maxLength:1000} (msg最大的字符 1000,默认500) 场景:针对少量特殊 msg 过长;注意,可能会超过 get 请求允许的最大长度,需要自行测试。

2021年 06 月 2 日 11:37:25 v0.0.17: 增加 output 数组,对于不需要记录的关键词进行匹配排除 增加 beforeSend 方法,该方法会在send之前执行,将data返回出去,可以进行二次加工后再发送日志

2023年03月23日11:45:07 sypl v0.1.4 适配移动端H5,增加UA获取的设备字段 分别发布,内/外网,需修改package.json 中 "name": "@tbjy/tbdx-logger", "version": "0.1.4", "publishConfig"

0.1.4

1 year ago

0.1.5

1 year ago

0.1.3

2 years ago

0.1.2

2 years ago

0.1.1

2 years ago

0.1.0

2 years ago