[BUG] Sentry front end 404 capture is not working as intended

[mrchrisadams]

Please choose the appropriate severity level accompanied by this report by removing the exess severity labels.

Describe the bug
A clear and concise description of what the bug is.

To Reproduce

Visit the provider portal:

https://app.greenweb.org/accounts/login/?next=/provider-portal/

Expected behavior
A clear and concise description of what you expected to happen.

We should be able to initialise the Sentry front end library

Actual behavior

We get an error in the logs along these lines in

Uncaught TypeError: can't access property "addEventListener", document.body is null
    <anonymous> https://app.greenweb.org/accounts/login/?next=/provider-portal/:44
[login:44:17](https://app.greenweb.org/accounts/login/?next=/provider-portal/)
TypeError: Sentry.browserTracingIntegration is not a function
    sentryOnLoad https://app.greenweb.org/accounts/login/?next=/provider-portal/:26
    O https://js.sentry-cdn.com/dd30eb65f140420688f813ab96721a1c.min.js:1
    O https://js.sentry-cdn.com/dd30eb65f140420688f813ab96721a1c.min.js:1

I think this caused by this code here, trying to access document.body when it's not loaded yet:

// Adding this code from Sentry's docs to capture resource loading errors.
// https://docs.sentry.io/platforms/javascript/troubleshooting/#capturing-resource-404s
document.body.addEventListener(
    "error",
    (event) => {
        if (!event.target) return;

        if (event.target.tagName === "IMG") {
            Sentry.captureMessage(
                `Failed to load image: ${event.target.src}`,
                "warning"
            );
        } else if (event.target.tagName === "LINK") {
            Sentry.captureMessage(
                `Failed to load css: ${event.target.href}`,
                "warning"
            );
        }
    },
    true // useCapture - necessary for resource loading errors
);

We're mainly using this to try catching an annoying issue when some css files are not reachable. For this reason, I don't using a a later event to listen would help. For example if we wrapped the code above in a function like initialiseSentryWithCheckingfor404s, to call on the DOMContentLoaded event, I think it might fire too late to catch the 404's we're trying to catch.

I'm referring to running some code like this

document.addEventListener('DOMContentLoaded', initialiseSentryWithCheckingfor404s));

Environment

I'm using Firefox 123b with no adblocker

[mrchrisadams]

@fershad I'm tagging you so you can see this, as I'll be referring to it in a support query with Sentry