Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Cannot read properties of null (reading 'appendChild') on init with FeedbackIntegration #12112

Closed
3 tasks done
artemgordinskiy opened this issue May 17, 2024 · 4 comments · Fixed by #12294
Closed
3 tasks done

Cannot read properties of null (reading 'appendChild') on init with FeedbackIntegration #12112

artemgordinskiy opened this issue May 17, 2024 · 4 comments · Fixed by #12294
Assignees
@ryan953
Labels
Package: browser Package: feedback Type: Bug

Comments

@artemgordinskiy
Copy link

Is there an existing issue for this?

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

  1. 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.
@billyvg
Copy link
Member

billyvg commented May 17, 2024

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

@brecke
Copy link

brecke commented May 29, 2024

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)

@billyvg
Copy link
Member

billyvg commented May 29, 2024

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

@ryan953
Copy link
Member

ryan953 commented May 30, 2024 •
edited

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://9b88555f533ab26d4dfbd4eb52514484@o19635.ingest.us.sentry.io/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.

@ryan953 ryan953 mentioned this issue May 30, 2024
Merged
@ryan953 ryan953 self-assigned this May 30, 2024
ryan953 added a commit that referenced this issue May 30, 2024
@ryan953
fix(feedback): Wait for document to be ready before doing autoinject (#…
b4332c1 
…12294)

The error that folks are getting is something like this: `[Error]
TypeError: null is not an object (evaluating 'qo.body.appendChild')`

The problem seems to be that we're trying to inject the button into the
html before the `<body>` is ready. Using async `<script defer>` or
`<script async>` would probably help, but none of our snippets have
that, and it would also defer error observers and everything else.

What we can do for users it have the feedback integration wait before
inserting the button + styles!
This is a great reference:
https://developer.mozilla.org/en-US/docs/Web/API/Document/DOMContentLoaded_event

Fixes #12112
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees

@ryan953 ryan953

Labels
Package: browser Package: feedback Type: Bug
Projects
GitHub Issues with 👀 3
Archived in project
Milestone
No milestone
Development

Successfully merging a pull request may close this issue.

fix(feedback): Wait for document to be ready before doing autoinject getsentry/sentry-javascript
5 participants
@brecke @billyvg @ryan953 @artemgordinskiy @AbhiPrasad