Skip to content

Conversation

@molly-moen
Copy link
Contributor

@molly-moen molly-moen commented Feb 11, 2026

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
Screenshot 2026-02-11 at 11 54 23 AM

Links

Testing story

Tested locally.

PR Creation Checklist:

  • Tests provide adequate coverage
  • Privacy impacts have been documented
  • Security impacts have been documented
  • Code is well-commented
  • New features are translatable or updates will not break translations
  • Relevant documentation has been added or updated
  • User impact is well-understood and desirable
  • Follow-up work items (including potential tech debt) are tracked and linked

@molly-moen molly-moen marked this pull request as ready for review February 11, 2026 20:42
@molly-moen molly-moen requested a review from a team February 11, 2026 20:42
Copy link
Contributor

@fisher-alice fisher-alice left a comment

Choose a reason for hiding this comment

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

Looks good!

Copy link
Contributor

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?

Copy link
Contributor Author

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) {
Copy link
Contributor

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?

Copy link
Contributor Author

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
Copy link
Contributor

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);
Copy link
Contributor

Choose a reason for hiding this comment

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

Tidy!

@molly-moen molly-moen merged commit a351e27 into staging Feb 12, 2026
5 checks passed
@molly-moen molly-moen deleted the molly/networks-tab branch February 12, 2026 16:41
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.

2 participants