专栏首页前端之心解决 "Script Error" 的另类思路
原创

解决 "Script Error" 的另类思路

前端的同学如果用 window.onerror 事件做过监控,应该知道,跨域的脚本会给出 "Script Error." 提示,拿不到具体的错误信息和堆栈信息。

这里读者可以跟我一起做一个实验,来深入了解这个事情。先做一下实验准备:

app.js

创建一个 Node APP,只做静态服务器,提供两个端口用于做跨域实验。

const express = require('express');

const app = express();

app.use(express.static('./public'));

app.listen(3000);
app.listen(4000);

public/index.html

创建一个静态页面,监听 window.onerror 事件,并且输出事件的堆栈。同时分别加载两个域的 JS 文件。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title>Script Error Test</title>
  <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
  <button id="btn-3000">3000</button>
  <button id="btn-4000">4000</button>
  <div>
    <pre id="info"></pre>
  </div>
</body>
<script>
window.addEventListener('error', evt => {
  const info = evt.error ? evt.error.stack : evt.message;
  document.querySelector('#info').textContent = info;
});
</script>
<script src="http://127.0.0.1:3000/at3000.js"></script>
<script src="http://127.0.0.1:4000/at4000.js"></script>
</html>

public/at3000.js

创建一个在 3000 端口执行的脚本,监听 3000 按钮的点击事件,并且抛出一个异常:

const btn3k = document.querySelector('#btn-3000');
btn3k.addEventListener('click', () => {
  throw new Error('Fail 3000');
});

public/at4000.js

同样的,创建一个在 4000 端口执行的脚本:

const btn4k = document.querySelector('#btn-4000');
btn4k.addEventListener('click', () => {
  throw new Error('Fail 4000');
});

复现 Script Error

这个时候,我们启动 Node APP:node app.js,然后访问 http://127.0.0.1:3000

分别点击按钮 3000 和 4000,我们发现,同域下面的 3000 按钮点击后,异常消息可以捕获到。而跨域的 4000 按钮,只有一个 Script Error。

点击 3000 按钮
点击 4000 按钮

我们复现了 "Script Error."!

有同学举手,我知道,只要加一个跨域头就可以了!

Access-Control-Allow-Origin

没错,我们可以给静态文件服务器加上跨域协议头:

app.use(express.static('./public', {
  setHeaders(res) {
    res.set('access-control-allow-origin', res.req.get('origin'));
    res.set('access-control-allow-credentials', 'true');
  }
}));

同时,加载 JS 的时候,加上跨域声明:

<script src="http://127.0.0.1:4000/at4000.js" crossorigin="anonymous"></script>

这样,无论 3000 还是 4000 按钮,我们点击都能获得异常信息。

但是,这个方案有两个致命的弱点:

  • 如果 JS 声明了 crossorigin="anonymous" 但是响应头没有正确,JS 会直接无法执行
  • 我们并不总是有静态服务器的配置权限,跨域头不是想加就能加
声明了 crossorigin 但是没有响应跨域头的 JS

另类思路

如果我告诉你,可以不加跨域头,只是在 JS 文件加载之前加载一个「特别的」JS,一样可以达到目的,你信不信?

<script src="http://127.0.0.1:3000/inject-event-target.js"></script>
<script src="http://127.0.0.1:3000/at3000.js"></script>
<script src="http://127.0.0.1:4000/at4000.js"></script>

这个神奇的 inject-event-target.js 可以让我们在没有跨域头的情况下,拿到 4000 按钮事件处理器的执行异常信息。

点击 3000
点击 4000

如果你觉得神奇,请点赞后,继续往下阅读。这个魔法 JS,其实也很简单:

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);
}

原理也非笔者原创,而是从这篇文章学习而来。

简单解释一下:

  • 改写了 EventTarget 的 addEventListener 方法;
  • 对传入的 listener 进行包装,返回包装过的 listener,对其执行进行 try-catch;
  • 浏览器不会对 try-catch 起来的异常进行跨域拦截,所以 catch 到的时候,是有堆栈信息的;
  • 重新 throw 出来异常的时候,执行的是同域代码,所以 window.onerror 捕获的时候不会丢失堆栈信息;

实际上,利用包装 addEventListener,我们还可以达到「扩展堆栈」的效果:

堆栈扩展效果

我们不仅知道异常堆栈,而且还知道导致该异常的事件处理器,是在何处添加进去的。实现这个效果,也很简单:

 (() => {
   const originAddEventListener = EventTarget.prototype.addEventListener;
   EventTarget.prototype.addEventListener = function (type, listener, options) {
+    // 捕获添加事件时的堆栈
+    const addStack = new Error(`Event (${type})`).stack;
     const wrappedListener = function (...args) {
       try {
         return listener.apply(this, args);
       }
       catch (err) {
+        // 异常发生时,扩展堆栈
+        err.stack += '\n' + addStack;
         throw err;
       }
     }
     return originAddEventListener.call(this, type, wrappedListener, options);
   }
 })();

同样的道理,我们也可以对 setTimeout、setInterval、requestAnimationFrame 甚至 XMLHttpRequest 做这样的拦截,得到一些我们本来得不到的信息。

实验到此结束,完整源码也可以在这里下载到:

最后

喜欢本文的,请不要吝啬点赞转发,特别喜欢的,欢迎给我打赏😍。

同时欢迎在评论区和我讨论。

订阅我们的专栏「前端之心」,每周都会有干货。

原创声明,本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。

如有侵权,请联系 cloudcommunity@tencent.com 删除。

登录 后参与评论
0 条评论

相关文章

  • 分页解决方案 之 数据访问函数库——另类的思路、另类的写法,造就了不一样的发展道路。

        如何访问数据库?一个老掉牙的问题,方法多了去了,什么直接使用ado.net、使用SQLHelp、使用微软的企业库、使用ORM、使用LinQ to SQL...

    用户1174620
  • 前端 JavaScript 错误分析实践

    在平日的工作中前端 badjs 是一个比较常见的问题, badjs 除了我们自身业务 js 脚本里比较明显的报错外还有依赖其他资源的一些报错,对于自身业务 js...

    WecTeam
  • PHP代码层防护与绕过

      在一些网站通常会在公用文件引入全局防护代码进行SQL注入、XSS跨站脚本等漏洞的防御,在一定程度上对网站安全防护还是比较有效的。

    Bypass
  • 如何优雅处理前端异常?

    对于 JS 而言,我们面对的仅仅只是异常,异常的出现不会直接导致 JS 引擎崩溃,最多只会使当前执行的任务终止。

    grain先森
  • 如何优雅处理前端异常?

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    Nealyang
  • 【1023】**政-解决问题的思路

    在控制弹窗是否渲染的时候出了问题,点击修改信息按钮,所有列表中的的弹窗都渲染出来了

    web前端教室
  • 如何优雅处理前端异常?(史上最全前端异常处理方案)

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    前端迷
  • 如何用正确的姿势去高效的解决前端异常,用实践造就答案

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    挨踢小子部落阁
  • 如何优雅处理前端的异常?

    前端一直是距离用户最近的一层,随着产品的日益完善,我们会更加注重用户体验,而前端异常却如鲠在喉,甚是烦人。

    桃翁
  • 66. Django解决跨域问题

    在业务开发的过程中,一般存在旧项目是使用Django模板开发的,这种并未前后端分离,这时候新来了一些需求,需要后面的app模块 具备 前后端分离 的 跨域API...

    Devops海洋的渔夫
  • 你知道自己的代码在线上有多少问题吗?

    笔者负责的是京喜的前端某业务,长期受到大量异常的困扰,又常常找不到原因。有时异常一下暴涨,又降了回去,定位不到问题,深受其扰。经过长时间的沉淀,分析总结出了一套...

    WecTeam
  • MAC上使用Android Studio 3.0的Gradle问题小解

    2017-06-11 by Liuqingwen | Tags: Android Gradle | Hits

    IT自学不成才
  • 关于javascript错误捕获

    ``` javascript的出错我们应该都很熟悉,例如`xxx undefined`,`SyntaxError`等。 我们team将出现错误的javas...

    IMWeb前端团队
  • 关于javascript错误捕获

    function define(){ ... } var a = define; define = function(){ try{ ...

    IMWeb前端团队
  • 防止重复发送Ajax请求问题

    在工作中有很多场景需要通过Ajax请求发送数据,像是注册、登录、提交用户反馈等。用户在点击了“确认”按钮之后有可能一段时间内没有收到反馈页面无任何反应,然后就接...

    前端开发博客
  • "Manifest merger failed"问题的解决思路

    日志上可以看出来有两个字段冲突了,并且给出了提示,这里直接加上就好了,两个字段的话中间用逗号分隔

    坑吭吭
  • 常见的python问题解决思路

    日常项目中,在使用python优化测试工具时,小编遇到了一些较常见的问题,现借此机会和大家分享下这些问题及相关的处理思路。

    用户5521279

扫码关注云+社区

领取腾讯云代金券