做了那么多项目,后端的日志系统是必须的,前端的日志系统倒是从来没做过。
如果有机会,倒是很想试试,今天分享一个前端的报错插件CSI.JS,测试工程师字符题就是重建犯罪现场。

CSI.JS GitHub地址

CSI.JS简介:
CSI.JS是一个前端日志系统,它将错误信息记录于本地localStogitlabrage中。无任何依赖、无入侵性。使用非常简单,很容易引入你的系统中,而且不会造成任何影响。 它可以帮你快速重建犯罪现场。

看起来监控安装流程是不错,而且给出的例子是可以让客户截图给客服,确实对线上一些bug起到快速排查的作用。

npm的使用看看Gi字符tHub,如果是纯js引入的只有提供es的:

<body>
    <h3 class="title">csijs前端日志系统,测试网页地址</h3>
    <div class="show">
      <div id="btn-error" class="btn">制造错误</div>
      <div id="btn-report" class="btn">发送日志</div>
    </div>
</body>
<script type="module">
    import CSI from '../dist/csijs.es.js';
    const csi = new CSI({
      feID: 'csijs',
      report: (lines) => {
        console.log('### 自定义上报', lines);
      }
    });
    console.log('### csi ', csi);
    const btnError = document.getElementById('btn-error');
    const btnReport = document.getElementById('btn-report');
    btnError.addEventListener('click', () => {
      test(123);
    });
    btnReport.addEventListener('click', () => {
      csi.report();
    });
</script>

最早之前分享过 前端性能监控API-performance,如果真的从头开始做自己的,确实是可以尝试一下。

而前端的错误监控其实也挺简单,用window.onerror这个API就能完成:
window.onerror = function(message, source, lineno, colno, errogithubr) { … }

  • message:错误信息(字符串)。可用于HTML onerror=””处理程序中的event。
  • source:发测试仪生错误的脚本URL(字符串)
  • lineno:发生错误的行号(字符型变量数字)
  • colno:发生监控安装流程错误的列号(数字)
  • error:E监控摄像头品牌排行rror对象(对象)监控摄像头

当然,要把giti轮胎错误监听做好,肯定不是这么容易,得考虑什么场景下window.onerror无法监听到,得使用console.error。
或者是捕捉Promi测试英文se的reject使用window.onunhandledrejection,如果是资源监控摄像头品牌排行加载失败得使用element.onerror等等。

当然,如果要求不是很高,找个像CSI.JS这种的直接使用,elementanimation肯定是最简单的。

欢迎关注订阅号 codelementary是什么意思ing个人笔记 有视频和前端pdf书籍资源分享