记录使用skywalking-client-js的Bug

396 阅读1分钟

公司引入了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报上来