使用defer加载Sentry CDN时初始化报错的最优解决方法

核心问题原因 #

defer属性的脚本会在DOM解析完成后按顺序执行，但你当前的初始化脚本是无defer的内联脚本，会在解析到它的时候立即执行——这时候Sentry的CDN脚本还没加载完成，自然会抛出Sentry is not defined的错误。同时还要保证Sentry初始化在其他带defer的业务脚本之前完成，不然会丢失这些脚本的报错信息。

最优方案选择 #

方案1：给初始化脚本添加defer并紧跟Sentry脚本 #

这是最简单直接的方案，利用defer脚本的执行顺序规则：

• 把初始化逻辑写成内联脚本并添加defer，或者放到单独JS文件后加defer，必须放在Sentry CDN脚本的后面。

示例代码：

<script defer
        src="https://browser.sentry-cdn.com/7.42.0/bundle.tracing.replay.min.js"
        integrity="sha384-1l6jGKe2vLyGsLU9U92iHngOrra5b0R13LKJan+gGw9ZdY7iK2ayrwusH0QaMjWI"
        crossorigin="anonymous">
</script>

<script defer>
Sentry.init({
  dsn: "https://sentryPublicKey@o410200.ingest.sentry.io/123456",
  release: "{{ SENTRY.dsn }}",
  integrations: [new Sentry.BrowserTracing()],
  tracesSampleRate: {{ SENTRY.traces_sample_rate }},
});
</script>

<!-- 其他带defer的业务脚本放在后面 -->
<script defer src="your-app-script.js"></script>

这样浏览器会按顺序加载所有defer脚本，等DOM解析完后先执行Sentry脚本，再执行初始化脚本，最后执行后面的业务脚本，完全不会丢失报错。

方案2：监听Sentry脚本的加载完成事件 #

如果不想依赖defer的顺序（比如需要更精确的控制），可以给Sentry脚本添加id，然后监听它的load事件，在回调里执行初始化：

示例代码：

<script defer
        id="sentry-script"
        src="https://browser.sentry-cdn.com/7.42.0/bundle.tracing.replay.min.js"
        integrity="sha384-1l6jGKe2vLyGsLU9U92iHngOrra5b0R13LKJan+gGw9ZdY7iK2ayrwusH0QaMjWI"
        crossorigin="anonymous">
</script>

<script>
document.getElementById('sentry-script').addEventListener('load', function() {
  Sentry.init({
    dsn: "https://sentryPublicKey@o410200.ingest.sentry.io/123456",
    release: "{{ SENTRY.dsn }}",
    integrations: [new Sentry.BrowserTracing()],
    tracesSampleRate: {{ SENTRY.traces_sample_rate }},
  });
});
</script>

<!-- 其他带defer的业务脚本 -->

这个方案能确保初始化逻辑只在Sentry加载完成后执行，不过要注意：如果Sentry加载失败，回调不会触发，建议可以加个error事件监听做降级处理。

方案对比 #

• 方案1是官方推荐的简化方式，代码更简洁，完全符合defer的执行逻辑，能保证Sentry初始化在业务脚本前完成，不会丢失报错。
• 方案2适合需要额外加载状态处理的场景，比如加载失败时的提示，但代码稍复杂。

总结 #

优先选择方案1：给初始化脚本添加defer并紧跟Sentry CDN脚本，既简单又能完美解决问题，同时保证不会丢失其他defer脚本的错误信息。

内容的提问来源于stack exchange，提问作者garyj