-
Notifications
You must be signed in to change notification settings - Fork 526
Web lab 2 network tab: store request data in redux #70744
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
Conversation
fisher-alice
left a comment
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Looks good!
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
While here, do we still need updateLinksToNonHtmlFiles?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
we don't, but I'll handle that separately.
| ) => { | ||
| const {id, response} = action.payload; | ||
| const request = state.requests.find(r => r.id === id); | ||
| if (request) { |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Should we log if we return a response which doesn't have a corresponding request?
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
We'll handle that in the network tab (display an appropriate error).
| url: event.request.url, | ||
| body: bodyText, | ||
| status: response ? response.status : undefined, | ||
| timeElapsed: performanceEndTime |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Nice!
| const doc = parser.parseFromString(file.contents, 'text/html'); | ||
| const urlSuffix = folder ? `${folder}/` : ''; | ||
| addBaseTagToDocument(doc, `${window.location.origin}/${urlSuffix}`); | ||
| addCSPViolationListenerToDocument(doc); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Tidy!
This is part 1 of getting a network tab in web lab 2 set up. In this PR I am storing all request/response data intercepted by the service worker in redux. In addition, I inject a event handler into student html to be notified of content security policy failures (for example, a student trying to access an API outside of the allow list). These failures never make it to the service worker (they are intercepted before a fetch), so they need to be tracked elsewhere.
The data gets sent from the service worker/event handler via a broadcast channel, similar to how our other communication from the service worker occurs. The inner preview reads the message and sends a message up to the html preview component. This component can then write to our redux store, which the future network tab will read from. On level change we clear the list.
There's no visual change here, but here's an example of the data we are logging

Links
Testing story
Tested locally.
PR Creation Checklist: