客户说网页打开白屏了，怎么办？（前端异常日志收集）

testbird 发布于2019-08-22 18:01 / 2913人阅读

摘要：前言前段时间做项目的时候，发布功能的时候，本地是好的，测试是好的，正式也是好的，但是客户打开正式的时候白屏了，把软件删除了，重新打开了又好了，但是不能总是让用户去删除软件又重新下。所以弄了一个简单的前段监控。

前言

前段时间做项目的时候，发布功能的时候，本地是好的，测试是好的，正式也是好的，但是客户打开正式的时候白屏了，把软件删除了，重新打开了又好了，但是不能总是让用户去删除软件又重新下。所以弄了一个简单的前段监控。

window提供了一个监听页面错误的方法，具体代码如下

window.onerror = (errorMessage, scriptURI, lineNo, columnNo, error) => {
sendError({ errorMessage, scriptURI, lineNo, columnNo, error,hash:location.href}); //发送ajax
};

参数

errorMessage 异常信息

scriptURI 异常文件路径

lineNo 异常行号

columnNo 异常列号

error 异常堆栈信息

hash 当前页面链接

还可以根据需求添加更多信息，比如当前时间，浏览器版本，电脑类型（window or mac）浏览器类型（谷歌 ie 之类），还可以记录是pc或者移动端，移动端又可以增加手机类型，手机网络，来排查问题是出自哪里。

优化(性能考虑)

前端报错有可能会一直报错，然后一直在发送请求给后端，然后就会浪费大量带宽，所以我们可以先放在本地，然后页面注销的时候把之前收集的消息全部一次性发送给后端,具体代码如下:

window.onerror = function(errorMessage, scriptURI, lineNo, columnNo, error) {
  console.log("errorMessage: " + errorMessage); // 异常信息
  console.log("scriptURI: " + scriptURI); // 异常文件路径
  console.log("lineNo: " + lineNo); // 异常行号
  console.log("columnNo: " + columnNo); // 异常列号
  console.log("error: " + error); // 异常堆栈信息
  let errorInfo = {
    errorMessage,
    scriptURI,
    lineNo,
    columnNo,
    error,
    time: new Date(),
  };
  if (localStorage.getItem("errorLog")) {   //检查本地是否有错误日志
    let errorLog = JSON.parse(localStorage.getItem("errorLog")); 
    errorLog.push(errorInfo);
  } else {
    localStorage.setItem("errorLog", JSON.stringify([errorInfo])); 
  }
};

window.addEventListener(  //在页面注销时候检查是否有错误日志，如果有上传
  "unload",
  () => {
    if (localStorage.getItem("errorLog")) { //
      localStorage.removeItem("errorLog")
      //ajax 上传
    }
  },
  false
);

后言

这样一个监控页面错误日志的功能就起来了,代码地址

GPU云服务器云服务器日志收集、云服务器网页打不开怎么办集群日志收集 elk日志收集

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/95407.html

Node.js + ELK 日志规范

摘要：日志规范一般前端开发同学，对日志其实不太敏感，毕竟前端大多数情况下，不太关心日志。本文主要梳理了目前我们团队在开发中日志方面存在的问题，以及通过统一日志规范，希望达到什么样的效果。日志格式字段日志格式统一采用，便于解析处理。nodejs 日志规范一般前端开发同学，对日志其实不太敏感，毕竟前端大多数情况下，不太关心日志。即使有，也可能调用一些第三方的统计，比如百度统计或者别的等。在 Node...

tuomao 2019-05-23 13:53 评论0 收藏0
朱晔的互联网架构实践心得S1E4：简单好用的监控六兄弟

摘要：还可以初步判断出问题的原因是异常导致还是突增的压力所致。通过面板配置的服务调用量和业务进出量，排除上下游问题，定位出问题的模块。这里所说的六兄弟只指ELK套件（ElasticSearch+Logstash+Kibana）以及TIG套件（Telegraf+InfluxDb+Grafana）。 showImg(https://segmentfault.com/img/bVbhS81?w=...

xiaoxiaozi 2019-06-24 18:10 评论0 收藏0
前端异常监控-看这篇就够了

摘要：前端异常监控如果是移除的流程，那么编程就一定是将放进去的流程。过滤掉运行时错误上报加载错误事件捕获异常最新的规范中定义了事件用于全局捕获对象没有处理器时异常情况。前端异常监控如果debug是移除bug的流程，那么编程就一定是将bug放进去的流程。如果没有用户反馈问题，那就代表我们的产品棒棒哒，对不对？主要内容 Web规范中相关前端异常异常按照捕获方式分类异常的捕获方式日志...

Aklman 2019-08-23 12:59 评论0 收藏0