CSI.JS前端日志系统

最新推荐文章于 2024-08-28 07:49:03 发布

wade3po

最新推荐文章于 2024-08-28 07:49:03 发布

阅读量297

点赞数

文章标签：前端 javascript 前端框架

本文链接：https://blog.csdn.net/wade3po/article/details/124609206

版权

本文介绍了前端日志系统CSI.JS的使用，它能记录错误信息于localStorage，帮助快速定位线上问题。通过示例展示了如何引入和使用该库，并提及前端错误监控的基本方法，如window.onerror API。此外，还讨论了如何全面地实现前端错误监听，包括处理Promise错误和资源加载失败等场景。

摘要由CSDN通过智能技术生成

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

CSI.JS GitHub地址

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

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

npm的使用看看GitHub，如果是纯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, error) { … }