Skip to content

feat: add recoverable dashboard error states - #287

Merged
TFT444 merged 2 commits into
OWASP:devfrom
SHAURYAKSHARMA24:feat/281-dashboard-error-states
Aug 23, 2026
Merged

TFT444 merged 2 commits into
OWASP:devfrom
SHAURYAKSHARMA24:feat/281-dashboard-error-states

Conversation

@SHAURYAKSHARMA24

@SHAURYAKSHARMA24 SHAURYAKSHARMA24 commented Aug 18, 2026 •

Copy link
Copy Markdown
Collaborator

What does this PR do?

Adds recoverable loading, error, empty, and populated states to the data-driven dashboard pages.

Discovery, Prioritization, Detailed Scan, Compliance, Drift, and Monitoring now use a small shared usePageData hook for their initial request lifecycle. Failed loads render a reusable inline error panel with a Try again action; retry returns to the loader and can resolve to populated, empty, or another error state without reloading the browser.

The hook ignores stale results after unmount and prevents repeated clicks from starting duplicate concurrent loads. Its cleanup-aware initial scheduling also prevents React Strict Mode effect replay from launching a duplicate initial request. Compliance derives its active framework after a successful load rather than writing component state from inside an async loader. Detailed Scan no longer treats an empty findings array as “still loading”; a successful zero-findings response displays a dedicated empty state. Existing page-specific empty states remain in use where appropriate.

The error panel uses role="alert", an assertive live region, semantic headings, and a keyboard-accessible button. It displays page-specific safe copy rather than raw exception details.

This PR is independently based on current dev and does not depend on #282. Its request callbacks remain compatible with the timeout/cancellation API proposed there, but no stacked branch or automatic retry policy is introduced here.

Type of change

  • New scan rule
  • Remediation playbook
  • Bug fix
  • Dashboard/front-end work
  • API endpoint
  • Documentation
  • Compliance mapping

Rule details (if applicable)

Not applicable.

Testing

  • Tested against a real Azure free trial subscription (not applicable to load-state handling)
  • Returns correct JSON output
  • All GitHub CI and security checks pass
  • No hardcoded credentials or secrets

Executed from frontend/:

  • node src/hooks/usePageData.test.mjs — 8 load-state and retry tests passed
  • node src/utils/aiApi.test.mjs — 9 existing AI settings tests passed
  • npm run test:a11y — passed
  • npm run test:i18n — passed
  • npm run lint — passed with zero warnings
  • npm run build — passed

Focused tests cover initial loading, populated success, successful empty data, rejected requests, retry to populated success, retry to empty success, rapid duplicate retry prevention, stale completion suppression after unmount, and React Strict Mode effect replay.

Related issue

Closes #281

Checklist

  • Every commit includes a DCO Signed-off-by trailer (git commit -s; see docs/dco.md)
  • My code follows the rule template in CONTRIBUTING.md (not applicable; no scan rule)
  • I added or updated the matching CLI playbook (not applicable)
  • I added or updated all four compliance framework mappings (not applicable)
  • I have not committed any real Azure credentials
  • My branch name follows the convention: feat/description

Signed-off-by: Shaurya K Sharma <shauryaksharma24@gmail.com>
@SHAURYAKSHARMA24 SHAURYAKSHARMA24 self-assigned this Aug 18, 2026
Signed-off-by: Shaurya K Sharma <shauryaksharma24@gmail.com>
@SHAURYAKSHARMA24
SHAURYAKSHARMA24 marked this pull request as ready for review August 18, 2026 16:09

@TFT444 TFT444 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Solid implementation. The stale-result suppression via request-ID counter is the right approach, and the queueMicrotask guard correctly prevents React Strict Mode double-fire. The eight hook tests cover the failure paths I would have asked about. Approving.

@ritiksah141 ritiksah141 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Looks good to me.

@TFT444 TFT444 left a comment

Copy link
Copy Markdown
Collaborator

Choose a reason for hiding this comment

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

Solid implementation. The stale-result suppression via request-ID counter is the right approach, and the queueMicrotask guard correctly prevents React Strict Mode double-fire. The eight hook tests cover the failure paths I would have asked about. Approving.

@TFT444

TFT444 commented Aug 23, 2026

Copy link
Copy Markdown
Collaborator

Good to go, both sides approve and meet all the requirements. Merging into dev now. Thank you.

@TFT444
TFT444 merged commit 42ce6b5 into OWASP:dev Aug 23, 2026
20 checks passed
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.

feat: add recoverable error states to data-driven dashboard pages

3 participants