首页 卡盟列表 辅助资讯 卡盟教程 DNF辅助 卡盟公告 绝地求生卡盟 CF卡盟 DNF卡盟 王者荣耀 英雄联盟 CSGO卡盟 和平精英 Apex英雄卡盟 逆战卡盟 原神卡盟 金铲铲之战卡盟 永劫无间卡盟 卡盟排行榜 生死狙击2

当前页面的脚本发生错误 一篇讲透自研的前端错误监控

11/27 21:21:36 来源网站：268辅助卡盟网

但error boundaries并不会捕捉以下错误：React事件处理，异步代码，error boundaries自己抛出的错误。

跨域问题

一般情况，如果出现 Script error 这样的错误，基本上可以确定是出现了跨域问题。

如果当前投放页面和云端JS所在不同域名，如果云端JS出现错误，window.onerror会出现Script Error。通过以下两种方法能给予解决。

<script src="http://yun.tuia.cn/test.js" crossorigin></script>

const script = document.createElement('script');
script.crossOrigin = 'anonymous';
script.src = 'http://yun.tuia.cn/test.js';
document.body.appendChild(script); 




  Test page <span style="color: rgb(198, 120, 221);line-height: 26px;">in</span> http://test.com

<body>
  <script src="https://yun.dui88.com/tuia/cdn/remote/testerror.js"></script>
  <script> window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  }

  try {
    foo(); // 调用testerror.js中定义的foo方法
  } catch (e) {
    throw e;
  } </script>

 

会发现如果不加try catch，console.log就会打印script error。加上try catch就能捕获到。

我们捋一下场景，一般调用远端js，有下列三种常见情况。

调用方法场景

可以通过封装一个函数，能装饰原方法，使得其能被try/catch。

 


  Test page <span style="color: rgb(198, 120, 221);line-height: 26px;">in</span> http://test.com

<body>
  <script src="https://yun.dui88.com/tuia/cdn/remote/testerror.js"></script>
  <script> window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  }

  function wrapErrors(fn) {
    // don't wrap function more than once
    if (!fn.__wrapped__) {
      fn.__wrapped__ = function () {
        try {
          return fn.apply(this, arguments);
        } catch (e) {
          throw e; // re-throw the error
        }
      };
    }

    return fn.__wrapped__;
  }

  wrapErrors(foo)() </script>

 

大家可以尝试去掉wrapErrors感受下。

事件场景

可以劫持原生方法。

当前页面的脚本发生错误_gocom打开oa提示 当前网页的脚本发生错误_当前页的脚本发生错误怎么办

 


  Test page <span style="color: rgb(198, 120, 221);line-height: 26px;">in</span> http://test.com

<body>
  <script> const originAddEventListener = EventTarget.prototype.addEventListener;
    EventTarget.prototype.addEventListener = function (type, listener, options) {
      const wrappedListener = function (...args) {
        try {
          return listener.apply(this, args);
        }
        catch (err) {
          throw err;
        }
      }
      return originAddEventListener.call(this, type, wrappedListener, options);
    } </script>
  "height: 9999px;">http://test.com

  <script src="https://yun.dui88.com/tuia/cdn/remote/error_scroll.js"></script>
  <script> window.onerror = function (message, url, line, column, error) {
    console.log(message, url, line, column, error);
  } </script>

 

<23456>

卡盟推荐

更多>

相关资讯

更多>

相关教程

更多>
关于我们 产品介绍 隐私政策 客服中心 家长监护工程 用户协议 服务协议 充值中心 用户纠纷处理方式
九爱卡盟，专业的游戏数字点卡销售平台

公司名称：浙江九七八网络科技有限责任公司

公司地址：甘肃省临夏县土桥镇万倾园文化广场23号

皖ICP备2022012643号
0930-3550888 周一至周五 9:00-18:00
当前页面的脚本发生错误 一篇讲透自研的前端错误监控