sentry-javascript Cannot read properties of null (reading 'appendChild') on init with FeedbackIntegration

Is there an existing issue for this?

[X] I have checked for existing issues https://github.com/getsentry/sentry-javascript/issues
[X] I have reviewed the documentation https://docs.sentry.io/
[X] 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.2.1

Framework Version

No response

Link to Sentry event

No response

SDK Setup

Sentry.init({
    dsn: '',
    integrations: [
        Sentry.feedbackIntegration({}),
    ],
});

Steps to Reproduce

Initialise Sentry with a Feedback integtation:

Expected Result

Sentry initialized successfully

Actual Result

TypeError: Cannot read properties of null (reading 'appendChild')
    at _createShadow (index.js:551:23)
    at _createActor (index.js:649:22)
    at Object.setupOnce (index.js:674:9)
    at setupIntegration (integration.js:125:17)
    at eval (integration.js:96:7)
    at Array.forEach (<anonymous>)
    at setupIntegrations (integration.js:93:16)
    at BrowserClient._setupIntegrations (baseclient.js:396:92)
    at BrowserClient.init (baseclient.js:272:12)
    at initAndBind (sdk.js:44:10)
    at Module.init (sdk.js:175:61)
    at eval (site.js:5:1)
    at ./assets/javascript/site.js (site-bundle.js:1:273939)
    at __webpack_require__ (site-bundle.js:1:2585458)
    at site-bundle.js:1:2586060
    at site-bundle.js:1:2586172

The issue goes away if initialisation is done on document load/ready, but I don't see this being mentioned in the docs, so I thought this could be a bug.

May 17 '24 17:05 artemgordinskiy

Thanks for reporting @artemgordinskiy, we'll get this fixed.

May 17 '24 17:05 billyvg

I get a similar error (I think) when using the CDN. Shall I open a new issue? Here's the stack trace:

[Error] TypeError: null is not an object (evaluating 'qo.body.appendChild')
	j (bundle.tracing.replay.feedback.min.js:2:106826)
	z (bundle.tracing.replay.feedback.min.js:2:108664)
	setupOnce (bundle.tracing.replay.feedback.min.js:2:108879)
	Sr (bundle.tracing.replay.feedback.min.js:2:45224)
	(anonymous function) (bundle.tracing.replay.feedback.min.js:2:48417)
	forEach
	(anonymous function) (bundle.tracing.replay.feedback.min.js:2:48406)
	_t (bundle.tracing.replay.feedback.min.js:2:48430)
	init (bundle.tracing.replay.feedback.min.js:2:46931)
	(anonymous function) (bundle.tracing.replay.feedback.min.js:2:227637)
	(anonymous function) (bundle.tracing.replay.feedback.min.js:2:227640)

May 29 '24 15:05 brecke

@brecke No need to open a new issue, thanks for the report

May 29 '24 16:05 billyvg

I think in both cases (using @sentry/browser or the CDN file) the problem is the same, it's trying to inject html into the page before the <body> is ready.

The repro case i've got boils down to this:

<html>
  <head>
    <script
      src="https://browser.sentry-cdn.com/8.7.0/bundle.feedback.min.js"
      integrity="sha384-If5t0OtWMly236c4qvXxYalt8pOLHOj9qKZaXu/xDqMqJ5xmdMCwVwXP6dlPyALI"
      crossorigin="anonymous"
    ></script>
    <script>
      // window.sentryOnLoad = function() {
        Sentry.init({
          dsn: "https://[email protected]/4506072436572160",
          integrations: [ Sentry.feedbackIntegration() ],
        });
      // }
      </script>
  </head>
  <body>
    Hello world!
  </body>
</html>

If you uncomment the window.sentryOnLoad line (and the closing brace too!) then loading works better.

I'll update the SDK so it is better able to handle when sentryOnLoad isn't used.

May 30 '24 18:05 ryan953