前端错误日志

268 阅读3分钟

错误类型

语法错误

一般语法错误和特殊语法错误

image.png

image.png

类型错误

image.png

引用错误

变量未声明

image.png

网络请求错误

image.png

资源加载错误

image.png

image.png

收集错误

` // 常规运行时错误,可以捕获

try { console.log(notdefined); } catch(e) { console.log('捕获到异常:', e); }

// 语法错误,不能捕获 ❌

try { const notdefined, } catch(e) { console.log('捕获到异常:', e); }

// 异步错误,不能捕获 ❌

try { setTimeout(() => { console.log(notdefined); }, 0) } catch(e) { console.log('捕获到异常:',e); }

`

` window.addEventListener( "error", (error) => { if (error.message) { console.log(error.message, "s"); } else { console.log("资源加载错误"); } }, true ); // 可以捕获 // 图片加载失败 // console.log(b); //引用错误 // var sss = undefined; // console.log(sss.a); //类型错误 // JSON.parse(""); //语法错误 // 捕获不到 // setTimeout(() => { // console.log(b); //异步错误 // }, 2000); // new Promise(() => { // a; // });

	// // try catch的使用
	// // 常规运行时错误,可以捕获 ✅
	// try {
	//   console.log(notdefined);
	// } catch(e) {
	//   console.log('捕获到异常:', e);
	// }

	// // 语法错误,  var notdefined ,不能捕获❌
	// try {
	// //   JSON.parse('') //可以
	// } catch(e) {
	//   console.log('捕获到异常:', e);
	// }

	// // 异步错误,不能捕获 ❌
	// try {
	//   setTimeout(() => {
	//     console.log(notdefined22);
	//   }, 0)
	// } catch(e) {
	//   console.log('捕获到异常:',e);
	// }
	// // 捕获不到promise中的错误 ❌
	// try {
	// 	new Promise((resolve, reject) => {
	// 		JSON.parse("");
	// 		resolve();
	// 	});
	// } catch (err) {
	// 	console.error("in try catch", err);
	// }
	// try/catch不能捕获async包裹的错误
	const getJSON = async () => {
		// throw new Error("inner error");
		JSON.parse('')
	};
	try {
		// 捕获不到
	await getJSON();
	} catch (err) {
		console.log("outer", err);
	}`

需求:记录项目上线以后产生的日志,由后端对日志级别进行控制,重要错误日志进行邮件发送

  • ALL 最低等级的,用于打开所有日志记录。

  • TRACE designates finer-grained informational events than the DEBUG.Since:1.2.12,很低的日志级别,一般不会使用。

  • DEBUG 指出细粒度信息事件对调试应用程序是非常有帮助的,主要用于开发过程中打印一些运行信息。

  • INFO 消息在粗粒度级别上突出强调应用程序的运行过程。打印一些你感兴趣的或者重要的信息,这个可以用于生产环境中输出程序运行的一些重要信息,但是不能滥用,避免打印过多的日志。

  • WARN 表明会出现潜在错误的情形,有些信息不是错误信息,但是也要给程序员的一些提示。

  • ERROR 指出虽然发生错误事件,但仍然不影响系统的继续运行。打印错误和异常信息,如果不想输出太多的日志,可以使用这个级别。

  • FATAL 指出每个严重的错误事件将会导致应用程序的退出。这个级别比较高了。重大错误,这种级别你可以直接停止程序了。

  • OFF 最高等级的,用于关闭所有日志记录。

记录一下写代码过程中出现的小错误

一开始是拿到接口用postman测试一开始是400(注释什么的不可以有),修正参数格式之后还是怎么测试都是500(后台才知道是请求时间中间的空格问题,下面的才是正确的,但是太细微了,但是完全没看出来,救命~~~)

image.png

因为忽略了参数格式会让结果不正确,(content直接带了一个对象没有转成JSON串)后来写接口错误日志那块,就一直反复在调用保存错日志的这个接口

juejin.cn/post/717207…