公司引入了skywalking来观测接口链路,前端项目引入了skywalking-client-js,使用过程中发现了一些Bug,特此记录。
-
src/errors/ajax.ts
image.png
这里监听接口报错后上报responseText
但是如果response是ArrayBuffer或者Blob类型,取responseText就会报错
解决办法是判断下response的类型,如果是ArrayBuffer或者Blob类型,上报其他值 -
src/trace/interceptors/fetch.ts
image.png
这里监听fetch请求
在重写fetch传参的时候判断了object Request类型的参数直接取url,实际使用中还遇到了object Object类型,这时走到else逻辑里代码会报错
解决办法是将
if (Object.prototype.toString.call(args[0]) === '[object Request]')
换成if (['[object Object]', '[object Request]'].includes(Object.prototype.toString.call(args[0])))
image.png
这一点xhr也存在
添加header是为了匹配后端链路
实际使用中有些三方库调用的跨域请求加了header后就报错,这里我们判断了跨域请求不添加header,毕竟不是我们的接口我们后端也匹配不了,没有意义
endpoint取的是pagePath,如果pagePath设置的是location.href,如果特别长,会报一个header超长的错误,这个不算skywalking的bug,也记录一下。解决方法就是截取一段,比如不要参数,把参数当做tag报上来