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

feat(sveltekit): Add partial instrumentation for client-side fetch #7626

Merged
merged 1 commit into from
Apr 5, 2023

Conversation

Lms24
Copy link
Member

@Lms24 Lms24 commented Mar 27, 2023

This PR adds partial instrumentation to the client-side fetch passed to the universal load functions. It enables distributed traces of fetch calls happening inside a load function.

Limitation: fetch requests made by SvelteKit (e.g. to call server-only load functions) are not touched by this instrumentation because we cannot access the Kit-internal fetch function at this time. Opened an issue on the SvelteKit repo to find a solution for this.

Anyway, here's a fancy screenshot of a successful trace:

image

My guess is that sveltejs/kit#9542 and sveltejs/kit#9530 are gonna take a little while longer to be resolved. I'd say, we add this in for the moment so that we at least get these traces connected. We should take it out/adjust whenever we have handleLoad or handleFetch available.

ref: #7413

@Lms24 Lms24 changed the title feat(sveltekit): Add instrumentation for client-side fetch feat(sveltekit): Add partial instrumentation for client-side fetch Mar 27, 2023
@github-actions
Copy link
Contributor

github-actions bot commented Mar 27, 2023

size-limit report 📦

Path Size
@sentry/browser - ES5 CDN Bundle (gzipped + minified) 20.74 KB (+0.06% 🔺)
@sentry/browser - ES5 CDN Bundle (minified) 64.77 KB (+0.03% 🔺)
@sentry/browser - ES6 CDN Bundle (gzipped + minified) 19.3 KB (+0.07% 🔺)
@sentry/browser - ES6 CDN Bundle (minified) 57.25 KB (+0.03% 🔺)
@sentry/browser - Webpack (gzipped + minified) 20.85 KB (+0.06% 🔺)
@sentry/browser - Webpack (minified) 68.21 KB (+0.03% 🔺)
@sentry/react - Webpack (gzipped + minified) 20.88 KB (+0.06% 🔺)
@sentry/nextjs Client - Webpack (gzipped + minified) 48.7 KB (+0.03% 🔺)
@sentry/browser + @sentry/tracing - ES5 CDN Bundle (gzipped + minified) 28.32 KB (+0.05% 🔺)
@sentry/browser + @sentry/tracing - ES6 CDN Bundle (gzipped + minified) 26.54 KB (+0.05% 🔺)
@sentry/replay ES6 CDN Bundle (gzipped + minified) 44.88 KB (+0.01% 🔺)
@sentry/replay - Webpack (gzipped + minified) 38.86 KB (0%)
@sentry/browser + @sentry/tracing + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 63.59 KB (+0.02% 🔺)
@sentry/browser + @sentry/replay - ES6 CDN Bundle (gzipped + minified) 56.63 KB (+0.03% 🔺)

@Lms24 Lms24 force-pushed the lms/sveltekit-patch-client-load-fetch branch 2 times, most recently from 51eca27 to ab20d0b Compare March 31, 2023 10:36
packages/utils/src/url.ts Fixed Show fixed Hide fixed
packages/utils/src/url.ts Fixed Show fixed Hide fixed
@Lms24 Lms24 force-pushed the lms/sveltekit-patch-client-load-fetch branch 2 times, most recently from ea8a521 to df10ac4 Compare April 3, 2023 12:48
...(urlObject.hash && { 'http.hash': urlObject.hash.substring(1) }),
};

// TODO: extract this to a util function (and use it in breadcrumbs integration as well)
Copy link
Member Author

Choose a reason for hiding this comment

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

Will do this in a separate PR as this spans multiple packages

packages/sveltekit/test/client/load.test.ts Outdated Show resolved Hide resolved
(host &&
host
// Always filter out authority
.replace(/^.*@/, '[filtered]:[filtered]@')
Copy link
Member Author

@Lms24 Lms24 Apr 3, 2023

Choose a reason for hiding this comment

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

This ain't pretty, I know... turns out finding a proper authority regex that isn't ReDos vulnerable is very hard. I think we can leave this as is for now and maybe revisit whenever we sanitize URLs everywhere on the browser side.
(I'd argue that this function should nevertheless be a good base we can reuse later on).

@Lms24 Lms24 marked this pull request as ready for review April 3, 2023 14:23
@Lms24 Lms24 requested a review from AbhiPrasad April 3, 2023 14:24
@Lms24 Lms24 force-pushed the lms/sveltekit-patch-client-load-fetch branch from 7cafcd7 to 5f05517 Compare April 4, 2023 11:41
@Lms24 Lms24 requested review from mydea and AbhiPrasad April 4, 2023 14:56
Copy link
Member

@AbhiPrasad AbhiPrasad left a comment

Choose a reason for hiding this comment

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

:shipit:

properly sanitize url, add url data

apply data to breadcrumbs

cleanup

set span status

add tests

sorry

fix authority url

"fix" authority regex again

cleanup

move addTracingHeadersToFetchRequest back to tracing-internal

cleanup

apply suggestions

re-activate request object test

adjust types after exporting
@Lms24 Lms24 force-pushed the lms/sveltekit-patch-client-load-fetch branch from b7ce245 to 0314949 Compare April 5, 2023 11:23
@Lms24 Lms24 merged commit 105dcf1 into develop Apr 5, 2023
58 checks passed
@Lms24 Lms24 deleted the lms/sveltekit-patch-client-load-fetch branch April 5, 2023 11:44
@Lms24 Lms24 self-assigned this Apr 5, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

None yet

3 participants