我有一个错误处理类,它使用window.addEventListener("error", (event)
侦听错误,将错误添加到类对象中的数组字段,然后在window.addEventListener('beforeunload', (event)
触发时将收集到的错误发送到API端点。我需要在其他代码运行之前激活它,以便捕获错误。我的单元测试确认类的行为符合预期。我认为可以内联所有代码,但我的偏好是将模块作为一个单独的文件,如果可能的话,一点额外的延迟不是问题。我想需要一个更有js经验的人来澄清这里的可能性,并解释如何实现我的目标,因为我觉得我陷入了知识不足的泥潭。
问题是,由于<script type='module' src='ErrorReporter.js">
本质上是异步的,并且会自动添加defer
属性,因此即使它是页面<head>
中的第一个<script>
标记,它也会在其他一些代码运行之后才运行,因此会错过在错误报告侦听器激活之前执行的代码中抛出的任何错误。
我试过了
- 将其作为模块加载到script标记中,然后使用内联
<script>
调用它。 - 在内联脚本中使用import语句。
- 创建一个异步函数来动态加载模块。
- 这些主题的变化。
由于各种原因,所有这些方法都未能捕获一些错误。也许我处理问题的方式不对,有一个更好的解决方案来监控我的应用程序的错误,我对js还很陌生。一个理想的解决方案是能够在window.addEventListener('beforeunload', (event)
触发时读取浏览器收集的错误,但这似乎是不可能的。
1条答案
按热度按时间f0ofjuux1#
除非你真的需要将脚本作为一个模块(
<script>
标签中的type=module
)加载,否则你可以不加载,脚本将在浏览器开始构建DOM之前加载并运行。如果您确实需要在脚本中执行import
,那么可能需要首先运行的脚本部分可以从模块中分离出来,成为一个单独的迷你脚本。如果这不可能,那么也许可以导入某种“权宜之计”的迷你脚本(同步导入,也就是说,不作为一个模块,也不使用“defer”等),它设置了主脚本最终加载时将实现的实际工具的基本版本
最后,需要说明的是,这不是我的专业领域,我认为可以通过服务器端的“bundler”工具来解决这种情况,这些工具可以提前跟踪所有的
import
和export
关系,并将所有解决的关系放在一起,然后将其作为一个单一的老式脚本导入。