[WebLab 2 Console] Adds error bundling#71916
Conversation
There was a problem hiding this comment.
Pull request overview
This PR updates the WebLab 2 debug console to deduplicate repeated console errors by grouping them (with a count) and keeping the most recently re-triggered error group at the bottom, reducing console spam while preserving accessibility.
Changes:
- Add grouping metadata (
groupKey,count) to console log entries and update the Redux reducer to increment/move grouped entries. - Update the Console UI to display a repeat count badge and include repeat count in screenreader labels.
- Add SCSS styles for the new “log meta” layout (count badge + timestamp).
Reviewed changes
Copilot reviewed 3 out of 3 changed files in this pull request and generated 4 comments.
| File | Description |
|---|---|
| apps/src/weblab2/redux/consoleRedux.ts | Adds grouping key/count to console entries and updates reducer to dedupe + reorder recurring groups. |
| apps/src/weblab2/debugPanel/Console.tsx | Renders repeat count badge and updates aria-labels to announce repetition count for accessibility. |
| apps/src/weblab2/debugPanel/console.module.scss | Styles the new metadata row next to timestamps (count badge layout). |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
|
|
||
| // Strips trailing filenames from messages like "Image not found: cat.png" | ||
| // so that resource errors with different filenames are grouped together. | ||
| const getGroupKey = (level: ConsoleLogLevel, message: string) => { |
There was a problem hiding this comment.
should we group these together? I would want to see different errors for different images not loading.
There was a problem hiding this comment.
I was torn on this- I want to be able to catch repeated errors if I keep having typos when trying to insert the same image. But I wasn't sure how to do that but not end up in this state. I can keep noodling!
The errors load every time the preview refreshes, which can lead to an overwhelming pace of error messages. This bundles the output by error type so that there is an error count.
Error deduplication: repeated errors of the same type are grouped into a single entry with an incrementing count badge rather than flooding the console. Errors with different filenames but the same root cause (e.g. multiple "Image not found" errors) are grouped together
Recency ordering: when a grouped error recurs, its entry moves to the bottom of the console so logs always reflect most-recent-occurrence order
Ensured they are still keyboard navigable and the error count is included in the screenreader label:
Before:
Screen.Recording.2026-04-03.at.2.53.37.PM.mov
After:
Screen.Recording.2026-04-03.at.3.19.54.PM.mov
Links
Testing story
Deployment notes
Privacy and security