• 前端监控报错之script error


    在前端监控逐渐完善的今天,页面中错误日志的上报可以说对我们的日常工作带来了极大的帮助。

    而使用 window.onerror 事件来捕获 js 脚本中的错误信息是重要的手段 。

    但是对于跨域的资源 ,onerror 事件通常会上报 "Script error"

    由于这并不是 JavaScript 的 bug,所以浏览器出于安全考虑,会主动隐藏其他域下 js 抛出的具体错误信息,但是 onerror 事件可不管你这么多,就是直接上报 ,在不做过滤的情况下,你会在监控平台中看到特别的"Script error"错误日志。

    而解决这个问题的一个办法之一就是在跨域资源的 script 标签中添加 crossorigin 属性

    例如页面域名

    my.com

    加载了跨域js脚本

    <script src="user.com/index.js"></script>

    这是在没有添加 crossorigin 属性的情况下,如果 user.com/index.js 中抛出了错误,在 my.com 页面中通过 onerror 事件是捕获不到具体错误信息的 ,只会捕获到 Script error 错误。

    加载了具有 crossorigin 属性的跨域 js 脚本。

    <script src="user.com/index.js" crossorigin ></script>

    这样就可以获取到 user.com/index.js 中的具体错误信息了。

    但是 crossorigin 属性并不是无脑加的!

    我们先来看下 MDN 中对 crossorigin 的解释:

    在HTML5中,一些 HTML 元素提供了对 CORS 的支持, 例如 <audio><img><link><script> 和 <video> 均有一个跨域属性 (crossOrigin property),它允许你配置元素获取数据的 CORS 请求。

    这些属性是枚举的,并具有以下可能的值:

    原文链接:

    https://developer.mozilla.org/zh-CN/docs/Web/HTML/Attributes/crossorigin

    https://blog.csdn.net/gtLBTNq9mr3/article/details/121505974?utm_medium=distribute.pc_aggpage_search_result.none-task-blog-2~aggregatepage~first_rank_ecpm_v1~rank_v31_ecpm-2-121505974.pc_agg_new_rank&utm_term=crossorigin%E5%B1%9E%E6%80%A7%E8%AE%BE%E7%BD%AE&spm=1000.2123.3001.4430 

  • 相关阅读:
    欧拉服务器安装虚拟机(根据open欧拉教程编写vnc)
    Pytest生成html测试报告
    FastAPI8路径参数和数值校验
    pytest不在终端执行的方式
    Hypertext Transfer Protocol (HTTP/1.1): Semantics and Content
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
    JAVA日报
  • 原文地址:https://www.cnblogs.com/momo798/p/16202235.html
Copyright © 2020-2023  润新知