admall-log

options

| 参数 | 是否必传 | 作用 | | -------- | -------- | ----------------------------------------------------------------- | | api | 是 | 日志上传接口 | | database | 是 | IndexDB 数据库名称 | | table | 是 | IndexDB 表名称 | | debug | 否 | debug 模式, 默认值为 false, 开启时,会输出单次上传的数量及上传结果 |

logger 中依然使用了

Change Log

• 只负责单纯的日志上传功能, 具体要上传的数据, 从push函数中传入
• 上传的日志数据中, 工具里面添加了三个字段uuid(唯一ID), timestamp(时间戳) ,deviceId(设备ID, 设备指纹), 这三个字段也可以通过push中的参数覆盖
• 不再管理日志级别, 日志级别作为日志数据,由用户自行定义
• 不再输出每次日志的数据内容,
• 不再暴露出指定的日志实例, 日志实例的创建权交由引用该工具的项目负责

Vue Spa 引用示例

// plugins/logger.js

import AdmallLogger from "admall-logger";
import Vue from "vue";

const typeEnum = {
  LOG: 10,
  DEBUG: 20,
  ERROR: 30,
};

const loggerData = {
  eventId: "",
  platform: "AnZhuang-H5",
  device: "PC",
  userId: "",
  content: "",
};

const logService = new AdmallLogger({
  api: process.env.API_ORIGIN + "/admall-basics/api/logs/web/add",
  database: "anzhuang-h5",
  table: "logger",
  debug: true,
});

function logger(eventId, ...rest) {
  loggerData.type = typeEnum.LOG;
  loggerData.eventId = eventId;
  loggerData.content = JSON.stringify(rest);
  logService.push(loggerData);
}

logger.error = function (eventId, ...rest) {
  loggerData.type = typeEnum.ERROR;
  loggerData.eventId = eventId;
  loggerData.content = JSON.stringify(rest);
  logService.push(loggerData);
};

Vue.prototype.$logger = logger;

export default { logger };

用法:

// main.js
import "plugins/logger";

// xxx.vue
export default {
  mounted() {
    this.$logger("eventID", "content1", "content2等");
    this.$logger.error("eventID", "content1", "content2等");
  },
};

Nuxt 项目引用示例

// plugins/logger.js

import AdmallLogger from "admall-logger";

export default ({ context, inject }) => {
  const loggerData = {
    eventId: "",
    platform: "AnZhuang-H5",
    device: "PC",
    userId: "",
    content: "",
  };

  const logService = new AdmallLogger({
    api: process.env.API_ORIGIN + "/admall-basics/api/logs/web/add",
    database: "anzhuang-h5",
    table: "logger",
    debug: true,
  });

  function logger(eventId, ...rest) {
    loggerData.type = typeEnum.LOG;
    loggerData.eventId = eventId;
    loggerData.content = JSON.stringify(rest);
    logService.push(loggerData);
  }

  logger.error = function (eventId, ...rest) {
    loggerData.type = typeEnum.ERROR;
    loggerData.eventId = eventId;
    loggerData.content = JSON.stringify(rest);
    logService.push(loggerData);
  };
  inject("logger", logger);
};

// nuxt.config.js
export default {
  plugins:[
    {
      src:'~/plugins/logger',
      ssr: false // 暂不支持服务端渲染时发起日志记录请求
    }
  ]
}
// xxx.vue
export default {
  mounted(){
    this.$logger('eventID', 'content1', 'content2等')
    this.$logger.error('eventID', 'content1', 'content2等')
  }
}

添加自定义指令示例

// 创建自定义指令
Vue.directive("logger", {
  bind(el) {
    el.addEventListener("click", function (e) {
      e.stopPropagation();
      if (e.target) {
        logger.push("click", {
          target: getElementSelector(e.target),
          currentTarget: getElementSelector(e.currentTarget),
        });
      }
    });
  },
});

给点击事件添加日志示例

const logger = new LogService({
  // ...参数
});

// 获取点击事件的XPATH
function getElementSelector(el) {
  const { tagName, id, className } = el;
  let selector = tagName.toLowerCase();
  if (selector === "body") {
    return "";
  }
  if (id) {
    selector += `#${id}`;
  }
  if (className && typeof className === "string") {
    selector += "." + className.replace(/ /g, ".");
  }
  if (el.parentNode) {
    return getElementSelector(el.parentNode) + " " + selector;
  } else {
    return selector;
  }
}

// 对全局的点击事件做监听
window.addEventListener("click", (e) => {
  if (e.target) {
    logger.push("click", {
      target: getElementSelector(e.target),
      currentTarget: "window",
    });
  }
});