前端项目监控 Srcipt Error报错

69 阅读1分钟

问题

监控代码如下:

  window.addEventListener('error', e => {
      if (linkNet) return;
      // const target = e.target;
      e.stopImmediatePropagation();
      const target = e.srcElement ? e.srcElement : e.targe
      //收集错误信息
      let errorMsg = {
      project: target.localName ? `教师端-${target.localName}` : '', // 错源名称。比如图片这里就是'img'
      time: Date.now(),
      userID: user?.uuid || '未登录',
      msg: e.message || target.baseURI,

      // 直接上报
      if (process.env.REACT_APP_ENV === 'development') return;
      pushError(errorMsg);
  
  }, true

最近项目在国外用户登录,经常会报Script error的错误, 国内却没发现此问题。

原因: 这是由于浏览器基于安全考虑故意隐藏了其它域JS文件抛出的具体错误信息。这样可以有效避免敏感信息无意中被第三方(不受控制的)脚本捕获到,因此,浏览器只允许同域下的脚本捕获具体的错误信息。


解决办法

  1. 给script标签增加 crossorigin 属性,让浏览器允许页面请求资源。

  2. 给静态资源响应头增加允许跨域标记,让服务器允许资源返回。

服务器的HTTP响应头增加 Access-Control-Allow-Origin: * 或者 Access-Control-Allow-Origin: def.com

我的问题

本人项目中问题主要是引入了阿里云图库Symbol,解决方法暂时只能把图标下载到本地,不用Symbol导入图标库。

当网站请求并执行一个托管在第三方域名下的脚本时,就可能遇到该错误。最常见的情形是使用CDN托管JS资源。

可以参考下(help.aliyun.com/document_de…