Skip to content

Latest commit

 

History

History
71 lines (52 loc) · 2.43 KB

06.精读JavaScript错误堆栈处理.md

File metadata and controls

71 lines (52 loc) · 2.43 KB
Raw

JavaScript-Errors-and-Stack-Traces

  • JS 通过 Error 对象和 Stack Traces 提供有价值的错误堆栈方便开发者调试，服务端开发，开发者将有价值的错误信息打印到服务器日志中，但是客户端很难重现用户环境下的报错，所以错误监控应用一直都有人在做。甚至每个互联网大厂都有自己的一套前端监控方案(平台)

了解 Stack

  • 调用某函数时，先创建其执行上下文，并压入执行栈中，执行完毕后，执行上下文标记指针往下移，执行上下文被销毁(弹出栈)。

  • 简单代码执行

function c() {
	try {
		var bar = baz
		throw new Error() 
	} catch (e) {
		console.log(e.stack)
	}
}

function b() {
	c()
}
function a() {
	b()
}
a()
  • 执行报错堆栈展示
ReferenceError: baz is not defined
    at c (<anonymous>:3:13)
    at b (<anonymous>:11:2)
    at a (<anonymous>:14:2)
    at <anonymous>:16:1

认知 Error 对象

  • 组成: message: 错误信息; name: 错误名称; name: message

  • 拓展工具 sentry: stack traces(集成 TraceKit)

captureStackTrace: 截取有意义的错误堆栈, 并统计上报，有助于排查问题

  • 工具: Chai.js power-assert

抛出 Error 对象的正确姿势

  • Nodejs 推荐的异常处理方式
  • 区分操作异常和开发者的失误
  • 操作异常应该被处理
  • 操作异常两种处理方式: 同步(try... catch) 和 异步(callback, event-emitter),选其一即可
  • 函数定义应该用文档写清楚参数类型(TS 目前大火的原因)和可能会发生的合理失败，以及错误是以同步还是异步的方式进行传递的
  • 缺少参数或参数无效发生就应该 throw new Error

异步(promise)环境下错误处理方式

  • 在 Promise 内部使用 reject 处理错误，而不要直接调用 throw Error

监控客户端 Error 报错

  • try...catch 无法捕捉语法错误和全局的异常事件，甚至在古老的浏览器下还有性能影响

  • 还有一种捕捉异常的方法，为 window.onerror ，由于是全局捕捉，所以浏览器插件中的 js 异常也会捕捉到，另外一个问题是浏览器跨域问题，js 和页面不同域时会将异常内容隐藏， 只能获取一个 Script Error 信息，可以这样解决：

1. 在应用的<script>标签添加crossorigin属性
2. 在js所在的cdn服务器上添加 Access-control-allow-origin: * HTTP 头
(通常现在的跨域都是后端大爷干的活了)