做了那么多项目，后端的日志系统是必须的，前端的日志系统倒是从来没做过。 如果有机会，倒是很想试试，今天分享一个前端的报错插件CSI.JS，标题就是重建犯罪现场。
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) { ... }
- message：错误信息（字符串）。可用于HTML onerror=""处理程序中的event。
- source：发生错误的脚本URL（字符串）
- lineno：发生错误的行号（数字）
- colno：发生错误的列号（数字）
- error：Error对象（对象）
当然，要把错误监听做好，肯定不是这么容易，得考虑什么场景下window.onerror无法监听到，得使用console.error。
或者是捕捉Promise的reject使用window.onunhandledrejection，如果是资源加载失败得使用element.onerror等等。
当然，如果要求不是很高，找个像CSI.JS这种的直接使用，肯定是最简单的。
欢迎关注订阅号 coding个人笔记 有视频和前端pdf书籍资源分享
