Using "Loader Script" create a lot eventos of TypeError: null is not an object (evaluating 'co.document.body.appendChild') #13707

jwv · 2024-09-17T20:44:26Z

Is there an existing issue for this?

I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
I have reviewed the documentation https://docs.sentry.io/
I am using the latest SDK release https://github.com/getsentry/sentry-javascript/releases

How do you use Sentry?

Sentry Saas (sentry.io)

Which SDK are you using?

@sentry/browser

SDK Version

8.30.0

Framework Version

No response

Link to Sentry event

https://fptic.sentry.io/issues/5739481656/?project=4504650871209984
https://fptic.sentry.io/issues/5738977641/?project=4504650871209984
https://fptic.sentry.io/issues/5739065410/?project=4504650871209984
https://fptic.sentry.io/issues/5739243469/?project=4504650871209984

Reproduction Example/SDK Setup

<script>
    window.sentryOnLoad = function () {
        Sentry.init({
            release: "[email protected]",
            tracesSampleRate: 0.5,
            maxBreadcrumbs: 50,
            sendDefaultPii: true, // debug
            initialScope: {
                user: {"logged":false},
            },
            ignoreErrors: [
                'gCrWeb',
                'Non-Error exception captured',
                'Non-Error promise rejection captured',
                'Event `ErrorEvent` captured as exception with message `Script error.`',
                "Can't find variable: _0x",
                "chrome-extension",
            ],
            denyUrls: [
                /google-analytics\.com/i,
                /www\.googletagmanager\.com/i,
                /graph\.facebook\.com/i,
                // Chrome extensions
                /extension/i,
                /extensions\//i,
                /^chrome:\/\//i,
                // Safari
                /webkit-masked-url/i,
            ],
        });

        Sentry.lazyLoadIntegration("captureConsoleIntegration").then(
            (integration) => {
                Sentry.addIntegration(integration({
                    levels: ['warn', 'error', 'debug', 'assert']
                }));
            },
        );

        Sentry.lazyLoadIntegration("httpClientIntegration").then(
            (integration) => {
                Sentry.addIntegration(integration());
            },
        );

        Sentry.lazyLoadIntegration("contextLinesIntegration").then(
            (integration) => {
                Sentry.addIntegration(integration());
            },
        );
    };
</script>

Steps to Reproduce

Using "Loader Script" with only "Enable Performance Monitoring" enabled.

This configuration will create a lot of events on sentry about:
TypeError: null is not an object (evaluating 'co.document.body.appendChild')
File: https://browser.sentry-cdn.com/8.30.0/bundle.tracing.min.js

Expected Result

No events created.

Actual Result

TypeError: null is not an object (evaluating 'co.document.body.appendChild')

andreiborza · 2024-09-18T02:04:50Z

Hello @jwv thanks for writing in.

I tried this out locally with the following file and couldn't reproduce:

<!DOCTYPE html>
<html lang="en">
<head>
    <script>
        window.sentryOnLoad = function () {
            Sentry.init({
                dsn: <redacted>
                release: "[email protected]",
                tracesSampleRate: 0.5,
                maxBreadcrumbs: 50,
                sendDefaultPii: true, // debug
                initialScope: {
                    user: {"logged": false},
                },
                ignoreErrors: [
                    'gCrWeb',
                    'Non-Error exception captured',
                    'Non-Error promise rejection captured',
                    'Event `ErrorEvent` captured as exception with message `Script error.`',
                    "Can't find variable: _0x",
                    "chrome-extension",
                ],
                denyUrls: [
                    /google-analytics\.com/i,
                    /www\.googletagmanager\.com/i,
                    /graph\.facebook\.com/i,
                    // Chrome extensions
                    /extension/i,
                    /extensions\//i,
                    /^chrome:\/\//i,
                    // Safari
                    /webkit-masked-url/i,
                ],
            });

            Sentry.lazyLoadIntegration("captureConsoleIntegration").then(
                (integration) => {
                    Sentry.addIntegration(integration({
                        levels: ['warn', 'error', 'debug', 'assert']
                    }));
                },
            );

            Sentry.lazyLoadIntegration("httpClientIntegration").then(
                (integration) => {
                    Sentry.addIntegration(integration());
                },
            );

            Sentry.lazyLoadIntegration("contextLinesIntegration").then(
                (integration) => {
                    Sentry.addIntegration(integration());
                },
            );
        };
    </script>
    <script src="https://js.sentry-cdn.com/<redacted>.min.js" crossorigin="anonymous"></script>
</head>
<body>
Hello World
<br/>
<button onclick="breaktheworld()">Break the world</button>
</body>
</html>

Running it via npx serve.

Do you have a minimal reproduction repo or stackblitz?

jwv · 2024-09-18T07:09:41Z

Hello @andreiborza thanks for take some time to analyze the problem.

I also can't reproduce this problem either, appears to be some combination of OS, Browser and Internet connection.

Did you take the time to review the events I sent you in the links?

Later i will create stackblitz and try to debug this events.

It's not a big problem because i can always filtered out this events.

Thank you again.

andreiborza · 2024-09-18T07:20:15Z

@jwv I had a look at the events but couldn't really tell what the issue is from there sorry.

Lms24 · 2024-09-18T09:10:36Z

Hey, I took a quick look and realistically, the only way how this could happen is that document.body is undefined/null. I tried reproducing this by serving an html page without a <body> element but it looks like browsers automatically create one if there's none.

So my running theory is that some "exotic" browser doesn't automatically add a body element 🤔

This very likely originates from lazyLoadIntegration where we inject a script tag into the document body (source to load the integration CDN bundle.

We could/should guard this, or use a similar mechanism as in our loader script to work around this. I'll take a look if we can fix this easily.

sentry-javascript/packages/browser/test/loader.js

Lines 65 to 101 in e1783a6

    
           var _currentScriptTag = _document.scripts[0]; 
        
           var _newScriptTag = _document.createElement(_script); 
        
           _newScriptTag.src = _sdkBundleUrl; 
        
           _newScriptTag.crossOrigin = 'anonymous'; 
        
           // Once our SDK is loaded 
        
           _newScriptTag.addEventListener('load', function() { 
        
             try { 
        
               // Restore onerror/onunhandledrejection handlers 
        
               _window[_onerror] = _oldOnerror; 
        
               _window[_onunhandledrejection] = _oldOnunhandledrejection; 
        
               // Add loader as SDK source 
        
               _window.SENTRY_SDK_SOURCE = 'loader'; 
        
               var SDK = _window[_namespace]; 
        
               var oldInit = SDK.init; 
        
               // Configure it using provided DSN and config object 
        
               SDK.init = function(options) { 
        
                 var target = _config; 
        
                 for (var key in options) { 
        
                   if (Object.prototype.hasOwnProperty.call(options, key)) { 
        
                     target[key] = options[key]; 
        
                   } 
        
                 } 
        
                 oldInit(target); 
        
               }; 
        
               sdkLoaded(callbacks, SDK); 
        
             } catch (o_O) { 
        
               console.error(o_O); 
        
             } 
        
           }); 
        
           _currentScriptTag.parentNode.insertBefore(_newScriptTag, _currentScriptTag);

AbhiPrasad · 2024-09-23T13:10:55Z

This was released with https://github.com/getsentry/sentry-javascript/releases/tag/8.31.0 - thanks for the GH issue @jwv!

getsantry bot added the Waiting for: Product Owner label Sep 17, 2024

getsantry bot added this to GitHub Issues with 👀 3 Sep 17, 2024

getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 3 Sep 17, 2024

github-actions bot added the Package: browser Issues related to the Sentry Browser SDK label Sep 17, 2024

getsantry bot removed the Waiting for: Product Owner label Sep 18, 2024

getsantry bot removed the status in GitHub Issues with 👀 3 Sep 18, 2024

getsantry bot added the Waiting for: Product Owner label Sep 18, 2024

getsantry bot moved this to Waiting for: Product Owner in GitHub Issues with 👀 3 Sep 18, 2024

getsantry bot removed the Waiting for: Product Owner label Sep 18, 2024

getsantry bot removed the status in GitHub Issues with 👀 3 Sep 18, 2024

Lms24 mentioned this issue Sep 18, 2024

fix(browser): Try multiple options for lazyLoadIntegration script parent element lookup #13717

Merged

Lms24 closed this as completed in #13717 Sep 18, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Using "Loader Script" create a lot eventos of TypeError: null is not an object (evaluating 'co.document.body.appendChild') #13707

Using "Loader Script" create a lot eventos of TypeError: null is not an object (evaluating 'co.document.body.appendChild') #13707

jwv commented Sep 17, 2024 •

edited

Loading

andreiborza commented Sep 18, 2024 •

edited

Loading

jwv commented Sep 18, 2024

andreiborza commented Sep 18, 2024

Lms24 commented Sep 18, 2024 •

edited

Loading

AbhiPrasad commented Sep 23, 2024

Using "Loader Script" create a lot eventos of TypeError: null is not an object (evaluating 'co.document.body.appendChild') #13707

Using "Loader Script" create a lot eventos of TypeError: null is not an object (evaluating 'co.document.body.appendChild') #13707

Comments

jwv commented Sep 17, 2024 • edited Loading

Is there an existing issue for this?

How do you use Sentry?

Which SDK are you using?

SDK Version

Framework Version

Link to Sentry event

Reproduction Example/SDK Setup

Steps to Reproduce

Expected Result

Actual Result

andreiborza commented Sep 18, 2024 • edited Loading

jwv commented Sep 18, 2024

andreiborza commented Sep 18, 2024

Lms24 commented Sep 18, 2024 • edited Loading

AbhiPrasad commented Sep 23, 2024

jwv commented Sep 17, 2024 •

edited

Loading

andreiborza commented Sep 18, 2024 •

edited

Loading

Lms24 commented Sep 18, 2024 •

edited

Loading