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
Merged
Changes from 3 commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 9 additions & 1 deletion packages/browser/src/utils/lazyLoadIntegration.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { SDK_VERSION, getClient } from '@sentry/core';
import type { IntegrationFn } from '@sentry/types';
import { logger } from '@sentry/utils';
import type { BrowserClient } from '../client';
import { WINDOW } from '../helpers';

Expand Down Expand Up @@ -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 :)


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.

}

try {
await waitForLoad;
Expand Down
Loading