polish(core): better styling for error screens

[tannerdolby]

Pre-flight checklist

• I have read the Contributing Guidelines on pull requests.
• If this is a code change: I have written unit tests and/or added dogfooding pages to fully verify the new behavior.
• If this is a new API or substantial change: the PR has an accompanying issue (closes #0000) and the maintainers have approved on my working plan.

Motivation

The ErrorDisplay in its original state was a bit tough to digest when the text occupied 100% of the viewport width. It also overflowed the viewport at smaller screen heights due to the height: 50vh declaration. My proposed changes ensure the ErrorDisplay styling is a bit more responsive and resembles how the Docusaurus 404 pages look. Totally an optional change!

Before

After

Test Plan

Test links

Deploy preview: https://deploy-preview-8736--docusaurus-2.netlify.app/

Related issues/PRs

Somewhat related to conversation around improving error messages in #8696

[netlify]

✅ [V2]

Name	Link
🔨 Latest commit	4e8fc8e
🔍 Latest deploy log	https://app.netlify.com/sites/docusaurus-2/deploys/6409f0813e2e0500080c9dfe
😎 Deploy Preview	https://deploy-preview-8736--docusaurus-2.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site settings.

[github-actions]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 88	🟢 97	🟢 100	🟢 100	🟢 90	Report
/docs/installation	🟠 81	🟢 100	🟢 100	🟢 100	🟢 90	Report

[slorber]

Can you explain how did you do to get this error page exactly?

How can I easily test your PR using a preview link or a list of steps to perform?

When using the classic theme, this error fallback is not supposed to be used, see for yourself here click the "boom" button:

• Prod: https://docusaurus.io/docs/docusaurus-core#errorboundary
• PR: https://deploy-preview-8736--docusaurus-2.netlify.app/docs/docusaurus-core#errorboundary

So I wonder, how did you encounter a case where this wasn't the UI being displayed? Are you not using the classic theme?

[tannerdolby]

yeah sure thing! I was only able to encounter this page locally using the classic theme. Stumbled upon it when testing #8692. I'm not sure if this page is accessible in prod, I've only seen it locally.

1. In a fresh classic theme docusaurus project (I was using: https://github.com/tannerdolby/metagen-docs/blob/master/docusaurus.config.js)
2. Delete intro.md (recreating the error mentioned in the discussion above)
3. npm run start
4. see the page using ErrorDisplay

[slorber]

• In a fresh classic theme docusaurus project (I was using: tannerdolby/metagen-docs@master/docusaurus.config.js)
• Delete intro.md (recreating the error mentioned in the discussion above)
• npm run start
• see the page using ErrorDisplay

I see thanks.

The reason this page gets displayed is that the themed error screen also includes the theme layout, and the error is coming from that layout (navbar item failing) so the theme error screen also throws and we fallback to the more generic error page.

Will review/merge this PR soon as it remains a useful improvement.
But will still look for a better UX for most common layout errors in other extra PRs

[slorber]

Pushing a few extra changes. Preserving line breaks is useful for error message readability:

[slorber]

Also improved a bit the styling of the themed error page.
Similarly it was collapsing line breaks

[tannerdolby]

No problem! Thanks for the explanation and additional styling fixes. The themed error page looks quite a bit better, preserving the line breaks in the error message really makes a big difference for readability. Nice!