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

XHR Capture #552

Open
ucjonathan opened this issue Apr 29, 2021 · 7 comments · May be fixed by #1105
Open

XHR Capture #552

ucjonathan opened this issue Apr 29, 2021 · 7 comments · May be fixed by #1105
Labels
feature request Things want to be added

Comments

@ucjonathan
Copy link

I'm sorry that I don't know typescript yet to more deeply contribute to the project. In an effort to help with the groundwork to capture the XHR calls I've written the following gist:

https://gist.github.com/ucjonathan/9adc68ee74b331f6da5e0a13e1652dac

This is a vanilla JS piece of code that will collect the XHR request/response details into an object and then trigger an event that can be listened to. I've mode provisions in the code to:

  1. Allow for a custom function to perform redaction on the log record before further processing (masking of sensitive data that could be in the request/response.
  2. Allow for a custom function to suppress a particular capture. You don't really want to capture the XHR call you're making to store the events that RRWeb is collecting on your server. That would create a nasty feedback loop.

I'm hopeful that this code could be used as the foundation to start adding that XHR capture support as a new event type similar to what was done with the console logging.

@jyork03
Copy link

jyork03 commented Apr 29, 2021

I like this idea too. I took the liberty to port the script that @ucjonathan posted above into typescript:

xhr-capture.ts

Hopefully this helps with the implementation.

@Yuyz0112
Copy link
Member

Yuyz0112 commented May 9, 2021

If anyone has already started a PR on this, please ping me. Thanks!

@ucjonathan
Copy link
Author

I haven't done anything further with it.

@jyork03
Copy link

jyork03 commented May 10, 2021

I haven't started anything new either

@ucjonathan
Copy link
Author

I haven't spent any time looking at how the fetch API can be captured, but this Stackoverflow article seems to offer some ideas.

https://stackoverflow.com/questions/45425169/intercept-fetch-api-requests-and-responses-in-javascript

@Yuyz0112
Copy link
Member

A complex but solid implementation: https://github.com/Netflix/pollyjs

I don't think we will integrate polly.js, but its implementation looks battle-tested.

@ucjonathan
Copy link
Author

ucjonathan commented May 12, 2021 via email

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Things want to be added
Projects
None yet
Development

Successfully merging a pull request may close this issue.

4 participants