0

I have an AEM page with multiple components, these components have a .js file with a function that encloses all the client side logic. We then call that function inside the component's HTML:

<script>
    window.bootstrap_component(function() {
        init_component_name();
    });
</script>

As stated before init_component_name is the name of a function that encompasses all the logic we need:

function init_component_name() {
    //DO STUFF
}

The wrapper bootstrap_component fuction is defined in the shared head.html of all our pages as:

<script>
    window.bootstrap_component = function (handler) {
        if (typeof handler === 'function') {
            if (document.readyState === "complete" || document.readyState === "loaded" || document.readyState === "interactive") {
                handler();
            } else {
                document.addEventListener("DOMContentLoaded", function() {
                    handler();
                });
            }
        }
    }
</script>

This works okay and we don't have any actual issues but we recently started using Bugsnag for error monitoring and reporting and we're getting reports for almost every component saying ReferenceError on page so/and/so init_component_name() is not defined.

The reason I think this is happening is because the init_component_name() function is not declared within the script tag and because this, function(init_component_name) has been attached to the window object it is executing fine and you don't see any console errors.

If I am correct would modifying those scripts tags to be like this work?

<script>
    window.bootstrap_component(function() {
        window.init_component_name();
    })
</script>

A colleague of mine wants to add a timeout to the init_component_name functions of like 1ms but it rubs me the wrong way. Is there a more sensible approach?

Barmar
  • 741,623
  • 53
  • 500
  • 612
JPM
  • 93
  • 5
  • It shouldn't be necessary to add `window.`. The `window` object is the top-level scope for all variables. – Barmar Jan 13 '21 at 18:23
  • If the code works normally and fails when you use Bugsnag, it sounds like a Bugsnag problem. – Barmar Jan 13 '21 at 18:24

1 Answers1

2

If I am correct would modifying those scripts tags to be like this work?

window.bootstrap_component(function() {
    window.init_component_name();
})

Yes, but you then have the problem that you're writing multiple data to the global namespace, window, which isn't ideal. What if another third-party script decides to override it?

Ideally you'd have a single namespace and put everything on there, and write only that namespace to window.

window.something = {};
something.bootstrap_component = { //...

and

something.init_component_name = () => {
    //DO STUFF
}

Or better still, use modules (though that will need some light code refactoring).

Don't do the timeout hack. It's really, really horrible; what if scripts take longer than a second to load for some reason? You're also forcing your UI to wait a second, often unnecessarily. This hack tends to feature where chronology and scope has not been thought out properly.

Mitya
  • 33,629
  • 9
  • 60
  • 107
  • I like the possible solutions, too bad this project didn't start with modules back when it was small. As of now is quite massive. – JPM Jan 13 '21 at 22:44