ENG-3263: new privacy center error page

[nreyes-dev]

Ticket ENG-3263

Description Of Changes

When the Privacy Center fails to render (e.g. a JS exception during boot), users currently see the unstyled react-error-boundary default and the raw exception message is exposed in the page. This PR replaces it with a branded error view that never leaks raw error details and reads its message from a new optional error_message config field, falling back to "The Privacy Center is currently unavailable. Please try again later." when unset.

A design wrinkle worth flagging (and why there are two "After" screenshots): branding info — logo, custom error message — comes from the same config that may itself have failed to load (validation errors, network issues, malformed payload). The error component reads config defensively via useAppSelector rather than useConfig (which throws on undefined state, and would cause an infinite error-boundary loop) and gracefully degrades to a plain card with the default message when no config is available.

Before

After (config loads)

Shows logo and custom error message

After (Config can't load)

No logo and error message fallback

Code Changes

• Added error_message: Optional[str] to the PrivacyCenterConfig Pydantic schema and mirrored it on the frontend Config and generated PrivacyCenterConfig types.
• Rewrote components/Error.tsx: branded layout, reads error_message and logo_path defensively via useAppSelector (so a missing config slice doesn't trigger a second error), drops the raw error.message block, and hides the logo bar via onError if the configured asset fails to load.
• Switched components/Providers.tsx from fallbackRender to FallbackComponent so hooks work inside the fallback (fallbackRender is a render function, not a component, so hook calls inside it throw).
• Deleted components/ErrorLayout.tsx (no remaining consumers).
• Added Jest tests for the error fallback (configured/default/empty messages, raw-error suppression, logo gating, reset wiring) and Pydantic round-trip tests for error_message.

Steps to Confirm

1. Start the Privacy Center locally (cd clients/privacy-center && npm run dev).
2. Force a render-time error — e.g. add throw new Error("test") at the top of the root page component.
3. Reload and confirm the branded error view renders (logo bar if logo_path is set, "Error" heading, default unavailable message, "Try again" button) and that no raw error text appears anywhere in the DOM.
4. Add "error_message": "Custom test message" to config/config.json, reload, and confirm the custom string replaces the default.
5. Block /logo.svg in DevTools (Network → Block request URL) and confirm the logo bar is hidden without breaking the card.
6. Click "Try again" and confirm the error boundary resets.
7. Run npm run typecheck and npx jest __tests__/components/Error.test.tsx; backend: pytest tests/ops/schemas/test_privacy_center_config.py.

Pre-Merge Checklist

• Issue requirements met
• All CI pipelines succeeded
• CHANGELOG.md updated
  • Add a db-migration This indicates that a change includes a database migration label to the entry if your change includes a DB migration
  • Add a high-risk This issue suggests changes that have a high-probability of breaking existing code label to the entry if your change includes a high-risk change (i.e. potential for performance impact or unexpected regression) that should be flagged
  • Updates unreleased work already in Changelog, no new entry necessary
• UX feedback:
  • All UX related changes have been reviewed by a designer
  • No UX review needed
• Followup issues:
  • Followup issues created
  • No followup issues
• Database migrations:
  • Ensure that your downrev is up to date with the latest revision on main
  • Ensure that your downgrade() migration is correct and works
    • If a downgrade migration is not possible for this change, please call this out in the PR description!
  • No migrations
• Documentation:
  • Documentation complete, PR opened in fidesdocs
  • Documentation issue created in fidesdocs
  • If there are any new client scopes created as part of the pull request, remember to update public-facing documentation that references our scope registry
• No documentation updates required

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Actions	Updated (UTC)
fides-plus-nightly	Ready	Preview, Comment	May 6, 2026 3:34pm

1 Skipped Deployment

Project	Deployment	Actions	Updated (UTC)
fides-privacy-center	Ignored		May 6, 2026 3:34pm

[codecov]

Codecov Report

✅ All modified and coverable lines are covered by tests.
✅ Project coverage is 85.19%. Comparing base (b077900) to head (63dfe48).
⚠️ Report is 8 commits behind head on main.

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #7998      +/-   ##
==========================================
+ Coverage   85.17%   85.19%   +0.01%     
==========================================
  Files         637      638       +1     
  Lines       41971    42011      +40     
  Branches     4934     4937       +3     
==========================================
+ Hits        35749    35791      +42     
+ Misses       5112     5111       -1     
+ Partials     1110     1109       -1     

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

🚀 New features to boost your workflow:

• ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
• 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

[github-actions]

Title	Lines	Statements	Branches	Functions
admin-ui		6.66% (3035/45534)	5.96% (1564/26219)	4.68% (629/13440)
fides-js		79.43% (2013/2534)	66.13% (1244/1881)	73.09% (345/472)
privacy-center		82.53% (364/441)	79.74% (189/237)	74.07% (60/81)

[nreyes-dev]

/code-review

[kruulik]

Looks good!

[adamsachs]

the minimal backed changes here seem fine, but I'll defer to a FE review on the privacy center changes specifically