首页 > 其他分享 >js 封装日志上传模块,实现异常日志的上报

js 封装日志上传模块,实现异常日志的上报

时间:2024-08-27 16:08:33浏览次数:9  
标签:function 封装 img args js error var 日志

封装定义日志上传模块,实现异常日志的上报,包含触发方式:

1、主动调取方法上报

2、覆盖原生console.error实现,收集所有console.error打印的日志

3、window注册绑定error事件,触发 window.addEventListener('error',

/**
 * 客户端日志上传模块,实现异常日志的上报
 * 使用时在HTML文档<head>的最前面通过<script>标签引入即可
 * 项目各自修改对应的log.png的存放位置
 */
(function () {
  var errorLog = console.error;
  var LOG_URL = '//' + document.location.host + '/img/log.png?d='; //可以配置的服务端日志采集接口,暂时使用固定图片代替 document.location.host '127.0.0.1:3009/'

  function logImg(s) {
    var img = new Image(1, 1);
    img.src = s;
    img.onerror = function (err) {
      console.log(err);
      img = null;
      errorLog('[ERROR]日志上报失败', s);
    };
    img.onload = function () {
      img = null;
    };
  }
  function sendSvrLog() {
    var args = [].slice.call(arguments, 0);
    var ans = [];
    for (var i = 0, len = args.length; i < len; i++) {
      ans.push(typeof args[i] === 'string' ? args[i] : (args[i].stack || JSON.stringify(args[i])));
    }
    var msg = ans.join('\n').replace(/[\t\r\n<]/g, ' ');
    for (var i = 0; i < msg.length; i += 4000) {
      logImg(LOG_URL + Date.now() + ':' + (i + 1) + ':' + msg.slice(i, i + 4000));
    }
  }

  console.error = function () {  //覆盖原生console.error实现,收集所有console.error打印的日志.
    errorLog.apply(console, arguments);
    sendSvrLog.apply(null, arguments);
  };
  window._sendSvrLog = function (e) {
    console.log(e);
    sendSvrLog(e.stack);
  };
  //window.onerror = sendSvrLog;
  if ('addEventListener' in window) {
    window.addEventListener('error', function (e) {
      console.log(e);
      sendSvrLog(e.message || e.error.stack);
    });
  } else {
    window.onerror = function (e) {
      console.log(e);
      sendSvrLog(e.message || e.stack);
    };
  }
})();

  

标签:function,封装,img,args,js,error,var,日志
From: https://www.cnblogs.com/litterjoan/p/18382882

相关文章

  • 安装nvm,并通过nvm安装nodejs
    转载请注明出处:1.安装nvm打开终端,然后运行以下命令来下载并安装nvm:curl-o-https://raw.githubusercontent.com/nvm-sh/nvm/v0.39.1/install.sh|bash              或者使用wget:wget-qO-https://raw.githubusercontent.com/nvm-......
  • .NET Core 处理 WebAPI JSON 返回烦人的null为空
    前言   项目开发中不管是前台还是后台都会遇到烦人的null,数据库表中字段允许空值,则代码实体类中对应的字段类型为可空类型Nullable<>,如int?,DateTime?,null值字段序列化返回的值都为null,前台对应字段赋值需要做null值判断,怎么才能全局把null替换为空。    本文分享Web......
  • threeJs 修改TransformControls的显示位置
    有的时候模型的原点不是自身中心而是在场景的[0,0,0]位置这个时候想要让TransformControls的位置显示在模型的中心目前找的的处理方式是修改源码找到updateMatrixWorld方法updateMatrixWorld(){...for(leti=0;i<handles.length;i++){ ... if(this......
  • PyExecJs包的使用
    pyexecjs是一个用Python来执行JavaScript代码的工具库。一、pyexecjs:pyexecjs是一个用Python来执行JavaScript代码的工具库,该库支持多种JavaScript运行时环境,如Node.js、PhantomJS、SlimerJS等,允许开发者在Python中无缝地调用和执行JavaScript代码。二、常见使用场景:在Web爬......
  • quill-editor 富文本 组件封装并实现自定义上传图片
    基于quill-editor封装一个富文本组件,并实现自定义上传图片以及视频1.下载quill-editor npminstallvue-quill-editor--save2.对插件进行自定义改造(自定义字体大小选择,自定义标题,以及自定义工具栏功能) <template><divclass="edtior-box"><quill-editor......
  • 基于nodejs的本地文件增删改查的工具代码
    一、代码封装这是一个使用node.js实现的对本地文件进行增删改查的工具代码封装,其中代码结尾包含了使用方法示例,具体封装代码如下://jsonTool.jsconstfs=require('fs');constpath=require('path');//定义JSON文件的路径constfilePath=path.join(__dirname,'........
  • XAMPP 的日志文件通常包含详细的错误信息如何查看
    通用解决步骤查看日志文件描述:XAMPP的日志文件通常包含详细的错误信息。解决方法:打开XAMPP安装目录下的 logs 文件夹。查看Apache和MySQL的日志文件。重启服务描述:有时候简单的重启服务就可以解决一些临时性的问题。解决方法:使用XAMPP控制面板重启......
  • 【YOLO系列】YOLO 数据集格式与训练日志
    目录一、YOLO数据集格式二、YOLO训练日志一、YOLO数据集格式YOLO算法的标注格式主要使用.txt文件来存储图像中物体的标注信息。每个图像都有一个对应的.txt文件,文件中的每行表示一个物体的标注,包括物体的类别索引和边界框(boundingbox)的坐标。以下是YOLO标注格式的......
  • Node.js的事件机制
    Node.js的事件机制 Node核心思想:1.异步非阻塞;2.单线程;3.事件驱动;在目前的web应用中,客户端和服务器端之间有些交互可以认为是基于事件的,那么AJAX就是页面及时响应的关键。每次发送一个请求时(不管请求的数据多么小),都会在网络里走一个来回。服务器必须针对这个......
  • nodeJS中的事件机制
    events模块是node的核心模块,几乎所有常用的node模块都继承了events模块,比如http、fs等。本文将详细介绍nodeJS中的事件机制EventEmitter多数Node.js核心API都是采用惯用的异步事件驱动架构,其中某些类型的对象(称为触发器)会周期性地触发命名事件来调用函数对象(监听器)。例......