js监控错误提示方法总结

通过挂在window对象上的onerror方法，可以很方便的监听js代码的报错信息，下面就一起体验下吧。

准备工作

• 页面列表显示

<ul class="error"></ul>

.error {
	color: #f00;
}

• 设置错误信息

这样做是保存报错信息，可以随时访问，不至于刷新页面后丢失信息。

function setError () {  
	let errorList = localStorage.getItem('errorList');
	if (!errorList ||
	errorList == null) {
		localStorage.setItem('errorList', JSON.stringify({'error': []}));
	}
}

• 显示错误信息

function showList () {
	let errorList = localStorage.getItem('errorList');
	errorList = JSON.parse(errorList);
	if (!errorList || errorList.length === 0) return false;
	let errorStr = '';
	let error = document.querySelector('.error');
	for (const item of errorList) {
		errorStr += `
			<li>${item}</li>
		`
	}
	error.innerHTML = errorStr;
}

• 清除错误信息

function clearError () {  
	localStorage.removeItem('errorList');
	let error = document.querySelector('.error');
	error.innerHTML = '';
}

监听js报错

当我们监听到js的报错后，获取本地存储的信息，然后把报错信息添加一下，然后再显示到页面上面。

setError();

window.onerror = function (e) {
	if (e) {
		let errorList = localStorage.getItem('errorList');
		errorList = JSON.parse(errorList);
		errorList.error.push(e);
		localStorage.setItem('errorList', JSON.stringify({'error': errorList.error}));
		showList();
	}
}

• 刷新后无报错，但是本地存储还是要显示到页面中。

showList();

• 清除错误

function clearError () {  
	localStorage.removeItem('errorList');
	let error = document.querySelector('.error');
	error.innerHTML = '';
}

实战演练

• 错误信息

consol.log(111);
aler(111);

• 页面显示

当我们修复好第一个以后，会显示第二个错误。

• 清除页面信息

当我们不想显示一大堆信息，可以清空页面报错信息的。

clearError():

好了，以上就是简单的页面js错误监控系统的搭建过程。