fix(feedback): Wait for document to be ready before doing autoinject (#12294)

ryan953 · web-flow · commit b4332c1e9db9 · 2024-05-30T20:53:42.000Z
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
diff --git a/packages/feedback/src/core/integration.ts b/packages/feedback/src/core/integration.ts
@@ -276,7 +276,11 @@ export const buildFeedbackIntegration = ({
           return;
         }
 
-        _createActor().appendToDom();
+        if (DOCUMENT.readyState === 'loading') {
+          DOCUMENT.addEventListener('DOMContentLoaded', () => _createActor().appendToDom);
+        } else {
+          _createActor().appendToDom();
+        }
       },
 
       /**
