【干货】js实现前端错误自动上报功能

在pc和移动端中在线上发生前端错误难以查看错误，特别是在用户真机移动端中难以定位错误，为了更好解决线上问题，所以需要对前端发生报错信息进行收集上报，然后通过后端的接口传递错误给记录下来。

以下主要分为资源加载错误和运行时错误
监听代码错误然后调用请求上报方法传递错误信息和设备信息：

  window.onerror = function (
    errorMessage,
    scriptURI,
    lineNumber,
    columnNumber,
    errorObj
  ) {
    reportException({
      exceptionmsg: errorMessage,
      appinfo: window.navigator.userAgent,
      phoneinfo:
        document.documentElement.clientWidth +
        "x" +
        document.documentElement.clientHeight,
      deviceinfo: scriptURI + " line:" + lineNumber,
    });
    //无法监听资源加载异常
  };

监听资源类错误，上报前过滤掉一些其它错误

  window.addEventListener(
    "error",
   function (event) {
     //过滤掉监听的代码逻辑错误
     let target = event.target || event.srcElement;
     let isElementTarget =
       target instanceof HTMLScriptElement ||
       target instanceof HTMLLinkElement ||
       target instanceof HTMLImageElement;
     if (!isElementTarget) return false;
      ...
   },
    true
  );

最后通过接口把错误信息传递给后端
完整代码：

(function collectException() {//前端错误收集上报
  window.addEventListener(
    "error",
   function (event) {
     //过滤掉监听的代码逻辑错误
     let target = event.target || event.srcElement;
     let isElementTarget =
       target instanceof HTMLScriptElement ||
       target instanceof HTMLLinkElement ||
       target instanceof HTMLImageElement;
     if (!isElementTarget) return false;
     reportException({
       exceptionmsg: event.type,
       appinfo: window.navigator.userAgent,
       phoneinfo:
         document.documentElement.clientWidth +
         "x" +
         document.documentElement.clientHeight,
       deviceinfo: event.target.src,
     });
   },
    true
  );
  window.onerror = function (
    errorMessage,
    scriptURI,
    lineNumber,
    columnNumber,
    errorObj
  ) {
    reportException({
      exceptionmsg: errorMessage,
      appinfo: window.navigator.userAgent,
      phoneinfo:
        document.documentElement.clientWidth +
        "x" +
        document.documentElement.clientHeight,
      deviceinfo: scriptURI + " line:" + lineNumber,
    });
    //无法监听资源加载异常
  };

  function reportException(info) {
    $.ajax({
      type: "POST",
      url: "ip/bug/add",
      contentType: "application/json",
      dataType: "json",
      data: JSON.stringify(info),
      success: function (reponse) {},
      error: function (e) {
        console.log("错误上报失败/bug/add");
      },
    });
  }
})();