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.

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

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

Merged
merged 4 commits into from
Sep 18, 2024

Conversation

Lms24
Copy link
Member

@Lms24 Lms24 commented Sep 18, 2024

This PR makes our lazyLoadIntegration a bit more robust when trying to find the parent element to inject the script tag of the integration CDN bundle. It looks like some browsers don't automatically set document.body if the html page doesn't contain a <body> tag. Unfortunately, I couldn't reproduce this with Chrome, FF or Safari, so my running theory is that this is rather an exotic browser.

Anyway, for now the order of looking up parent elements is:

  1. document.body
  2. document.head
  3. document.currentScript.parentElement

Unfortunately, I couldn't find a way to test these branches since neither chromium (integration tests) nor JSDOM (unit tests) allow unsetting document.body|head. I think we should be fine with leaving this specific change untested but I can also spend some more time to try and figure out some way to test this...

closes #13707

@Lms24 Lms24 self-assigned this Sep 18, 2024
@Lms24 Lms24 requested a review from andreiborza September 18, 2024 10:28
if (parent) {
parent.appendChild(script);
} else {
logger.error(`Could not find parent element to insert lazy-loaded ${name} script`);
Copy link
Member Author

@Lms24 Lms24 Sep 18, 2024

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I opted to only log an error and not throw here because this likely is an edge case behavior which our users wouldn't test against. So I'd rather let lazyLoadIntegration never resolve/reject than throwing/rejecting a promise in an effort to "fail silently". Happy to change if reviewers have different opinions.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think I'd rather not do that, because users code may then pend forever, which is probably harder to debug than an error in this case? 🤔 But no strong feelings...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I guess it comes down to how SDK consumers use the API. If they don't use it in a blocking way (i.e. let other program code depend on the integration being loaded), we should be good. But sure, they can also just await it and have important logic come afterwards... I'll revert to throwing an error.

@Lms24 Lms24 requested a review from mydea September 18, 2024 10:36
Copy link
Contributor

github-actions bot commented Sep 18, 2024

size-limit report 📦

Path Size % Change Change
@sentry/browser 22.52 KB - -
@sentry/browser - with treeshaking flags 21.3 KB - -
@sentry/browser (incl. Tracing) 34.8 KB - -
@sentry/browser (incl. Tracing, Replay) 71.26 KB - -
@sentry/browser (incl. Tracing, Replay) - with treeshaking flags 61.7 KB - -
@sentry/browser (incl. Tracing, Replay with Canvas) 75.61 KB - -
@sentry/browser (incl. Tracing, Replay, Feedback) 88.39 KB +0.07% +57 B 🔺
@sentry/browser (incl. Tracing, Replay, Feedback, metrics) 90.23 KB +0.07% +57 B 🔺
@sentry/browser (incl. metrics) 26.83 KB - -
@sentry/browser (incl. Feedback) 39.66 KB +0.14% +56 B 🔺
@sentry/browser (incl. sendFeedback) 27.19 KB - -
@sentry/browser (incl. FeedbackAsync) 31.96 KB +0.18% +57 B 🔺
@sentry/react 25.28 KB - -
@sentry/react (incl. Tracing) 37.77 KB - -
@sentry/vue 26.72 KB - -
@sentry/vue (incl. Tracing) 36.67 KB - -
@sentry/svelte 22.66 KB - -
CDN Bundle 23.83 KB +0.23% +54 B 🔺
CDN Bundle (incl. Tracing) 36.56 KB +0.16% +57 B 🔺
CDN Bundle (incl. Tracing, Replay) 71.02 KB +0.08% +56 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) 76.33 KB +0.08% +61 B 🔺
CDN Bundle - uncompressed 69.81 KB +0.23% +159 B 🔺
CDN Bundle (incl. Tracing) - uncompressed 108.44 KB +0.15% +159 B 🔺
CDN Bundle (incl. Tracing, Replay) - uncompressed 220.21 KB +0.08% +159 B 🔺
CDN Bundle (incl. Tracing, Replay, Feedback) - uncompressed 233.43 KB +0.07% +159 B 🔺
@sentry/nextjs (client) 37.53 KB - -
@sentry/sveltekit (client) 35.37 KB - -
@sentry/node 121.06 KB - -
@sentry/node - without tracing 93.34 KB - -
@sentry/aws-serverless 103.05 KB - -

View base workflow run

@Lms24 Lms24 changed the title fix(browser): Try multiple options for lazyLoagIntegration script parent element lookup fix(browser): Try multiple options for lazyLoadIntegration script parent element lookup Sep 18, 2024
@@ -68,7 +69,14 @@ export async function lazyLoadIntegration(
script.addEventListener('error', reject);
});

WINDOW.document.body.appendChild(script);
const currentScript = WINDOW.document.currentScript;
const parent = (currentScript && currentScript.parentElement) || WINDOW.document.body || WINDOW.document.head;
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

l: Not 100% sure, but I think I would flip this around and do the currentScript stuff at the end rather then the beginning? so body || head || currentScript? 🤔 Not sure though and probably does not matter, maybe it's just because I don't really know/knew currentScript so I feel less comfortable around it 😅

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

sure, no strong opinions either. Will turn it around :)

@Lms24 Lms24 merged commit 03eb680 into develop Sep 18, 2024
125 checks passed
@Lms24 Lms24 deleted the lms/fix-browser-lazyLoadIntegration branch September 18, 2024 12:55
alexandresoro pushed a commit to alexandresoro/ouca that referenced this pull request Sep 23, 2024
This PR contains the following updates:

| Package | Type | Update | Change |
|---|---|---|---|
| [@sentry/node](https://github.com/getsentry/sentry-javascript/tree/master/packages/node) ([source](https://github.com/getsentry/sentry-javascript)) | dependencies | minor | [`8.30.0` -> `8.31.0`](https://renovatebot.com/diffs/npm/@sentry%2fnode/8.30.0/8.31.0) |
| [@sentry/react](https://github.com/getsentry/sentry-javascript/tree/master/packages/react) ([source](https://github.com/getsentry/sentry-javascript)) | dependencies | minor | [`8.30.0` -> `8.31.0`](https://renovatebot.com/diffs/npm/@sentry%2freact/8.30.0/8.31.0) |

---

### Release Notes

<details>
<summary>getsentry/sentry-javascript (@&#8203;sentry/node)</summary>

### [`v8.31.0`](https://github.com/getsentry/sentry-javascript/blob/HEAD/CHANGELOG.md#8310)

[Compare Source](getsentry/sentry-javascript@8.30.0...8.31.0)

##### Important Changes

-   **feat(node): Add `dataloader` integration ([#&#8203;13664](getsentry/sentry-javascript#13664

This release adds a new integration for the [`dataloader` package](https://www.npmjs.com/package/dataloader). The Node
SDK (and all SDKs that depend on it) will now automatically instrument `dataloader` instances. You can also add it
manually:

```js
Sentry.init({
  integrations: [Sentry.dataloaderIntegration()],
});
```

##### Other Changes

-   feat(browser): Add navigation `activationStart` timestamp to pageload span ([#&#8203;13658](getsentry/sentry-javascript#13658))
-   feat(gatsby): Add optional `deleteSourcemapsAfterUpload` ([#&#8203;13610](getsentry/sentry-javascript#13610))
-   feat(nextjs): Give app router prefetch requests a `http.server.prefetch` op ([#&#8203;13600](getsentry/sentry-javascript#13600))
-   feat(nextjs): Improve Next.js serverside span data quality ([#&#8203;13652](getsentry/sentry-javascript#13652))
-   feat(node): Add `disableInstrumentationWarnings` option ([#&#8203;13693](getsentry/sentry-javascript#13693))
-   feat(nuxt): Adding `experimental_basicServerTracing` option to Nuxt module ([#&#8203;13643](getsentry/sentry-javascript#13643))
-   feat(nuxt): Improve logs about adding Node option 'import' ([#&#8203;13726](getsentry/sentry-javascript#13726))
-   feat(replay): Add `onError` callback + other small improvements to debugging ([#&#8203;13721](getsentry/sentry-javascript#13721))
-   feat(replay): Add experimental option to allow for a checkout every 6 minutes ([#&#8203;13069](getsentry/sentry-javascript#13069))
-   feat(wasm): Unconditionally parse instruction addresses ([#&#8203;13655](getsentry/sentry-javascript#13655))
-   fix: Ensure all logs are wrapped with `consoleSandbox` ([#&#8203;13690](getsentry/sentry-javascript#13690))
-   fix(browser): Try multiple options for `lazyLoadIntegration` script parent element lookup ([#&#8203;13717](getsentry/sentry-javascript#13717))
-   fix(feedback): Actor color applies to feedback icon ([#&#8203;13702](getsentry/sentry-javascript#13702))
-   fix(feedback): Fix form width on mobile devices ([#&#8203;13068](getsentry/sentry-javascript#13068))
-   fix(nestjs): Preserve original function name on `SentryTraced` functions ([#&#8203;13684](getsentry/sentry-javascript#13684))
-   fix(node): Don't overwrite local variables for re-thrown errors ([#&#8203;13644](getsentry/sentry-javascript#13644))
-   fix(normalize): Treat Infinity as NaN both are non-serializable numbers ([#&#8203;13406](getsentry/sentry-javascript#13406))
-   fix(nuxt): Use correct server output file path ([#&#8203;13725](getsentry/sentry-javascript#13725))
-   fix(opentelemetry): Always use active span in `Propagator.inject` ([#&#8203;13381](getsentry/sentry-javascript#13381))
-   fix(replay): Fixes potential out-of-order segments ([#&#8203;13609](getsentry/sentry-javascript#13609))

Work in this release was contributed by [@&#8203;KyGuy2002](https://github.com/KyGuy2002), [@&#8203;artzhookov](https://github.com/artzhookov), and [@&#8203;julianCast](https://github.com/julianCast). Thank you for your contributions!

</details>

---

### Configuration

📅 **Schedule**: Branch creation - At any time (no schedule defined), Automerge - At any time (no schedule defined).

🚦 **Automerge**: Disabled by config. Please merge this manually once you are satisfied.

♻ **Rebasing**: Whenever PR becomes conflicted, or you tick the rebase/retry checkbox.

🔕 **Ignore**: Close this PR and you won't be reminded about these updates again.

---

 - [ ] <!-- rebase-check -->If you want to rebase/retry this PR, check this box

---

This PR has been generated by [Renovate Bot](https://github.com/renovatebot/renovate).
<!--renovate-debug:eyJjcmVhdGVkSW5WZXIiOiIzOC45My41IiwidXBkYXRlZEluVmVyIjoiMzguOTMuNSIsInRhcmdldEJyYW5jaCI6Im1haW4iLCJsYWJlbHMiOlsiZGVwZW5kZW5jaWVzIl19-->

Reviewed-on: https://git.tristess.app/alexandresoro/ouca/pulls/149
Reviewed-by: Alexandre Soro <[email protected]>
Co-authored-by: renovate <[email protected]>
Co-committed-by: renovate <[email protected]>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
2 participants