Undefined Variables and Load Order

Hello,

I’ve just started using Zaraz and I have a question about load order. For example, I am trying to set up a Sentry.io tool in Zaraz.

It is a custom html block action and it looks like this:

<script
  src="https://browser.sentry-cdn.com/6.16.1/bundle.tracing.min.js"
  async
></script>
<script>
Sentry.init({
  dsn: "xxxxx",
  integrations: [new Sentry.Integrations.BrowserTracing()],
  tracesSampleRate: 1.0,
});
</script>

However, when my page loads I get ReferenceError: Sentry is not defined. How do I remedy this? Is there a load order in Zaraz that I’m not aware of?

Where did you get this snippet from? I don’t think it makes sense. You’re loading the first script asynchronously but expecting it to be fully loaded one line after

I get the same result even if I remove the async. Is there something else I should do?

It seems like Zaraz is actually adding the async behavior automatically. A simple solution would be to wrap your Sentry.init call like this:

  window.sentryOnLoad = function () {
    Sentry.init({
      // add custom config here
    });
  };

The first will load and will call this function once it’s ready, which should fix the above issue.