feat(sanity): refine error UI

[juice49]

Description

This branch introduces UI refinements to the StudioErrorBoundary component. The aim is to make this error UI less intimidating for users.

• Hides error stack in production builds (this remains in development builds).
• Adds copy explaining that an error occurred.
• Adds "Copy error details" action.
• Subtle UI refinements.
  • Removes red tint.
  • Adds spacing.
  • Centres content.

Additionally, the "Copy error details" action has been added to the document list error UI.

Global error

Before

After (production build)

After (development build)

Document list error

Before

After

What to review

• Is the new copy okay?
• StudioErrorBoundary is rendered outside of LocaleProvider, and therefore the text cannot be internationalised. Is that okay?
  • For the same reason, ErrorActions (which is now used inside document lists), cannot be internationalised (the retry button in document lists was previously internationalised). Is that okay?

Testing

• Added unit tests for error serialization.
• Triggered global errors by disconnecting network, and by throwing error from custom Studio layout component.
• Triggered document list errors by disconnecting network, and by configuring document list with invalid GROQ filter expression.

Notes for release

• The global error UI has been refined so that it is clearer to users and less visually distressing.
• The global error UI now only displays the stack trace in development builds.
• A "Copy error details" action has been added to the global error UI and the document list error UI. This allows users to easily share the error stack trace with developers.
• Please note that these new strings cannot be internationalized because the global error UI is rendered outside of the locale provider.

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
page-building-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 8:52am
performance-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 8:52am
test-compiled-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 8:52am
test-next-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 8:52am
test-studio	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Sep 24, 2024 8:52am

1 Skipped Deployment

Name	Status	Preview	Comments	Updated (UTC)
studio-workshop	⬜️ Ignored (Inspect)	Visit Preview		Sep 24, 2024 8:52am

[github-actions]

No changes to documentation

[github-actions]

Component Testing Report Updated Sep 24, 2024 8:56 AM (UTC)

✅ All Tests Passed -- expand for details

File	Status	Duration	Passed	Skipped	Failed
comments/CommentInput.spec.tsx	✅ Passed (Inspect)	47s	15	0	0
formBuilder/ArrayInput.spec.tsx	✅ Passed (Inspect)	9s	3	0	0
formBuilder/inputs/PortableText/Annotations.spec.tsx	✅ Passed (Inspect)	31s	6	0	0
formBuilder/inputs/PortableText/copyPaste/CopyPaste.spec.tsx	✅ Passed (Inspect)	37s	11	7	0
formBuilder/inputs/PortableText/copyPaste/CopyPasteFields.spec.tsx	✅ Passed (Inspect)	0s	0	12	0
formBuilder/inputs/PortableText/Decorators.spec.tsx	✅ Passed (Inspect)	18s	6	0	0
formBuilder/inputs/PortableText/DisableFocusAndUnset.spec.tsx	✅ Passed (Inspect)	10s	3	0	0
formBuilder/inputs/PortableText/DragAndDrop.spec.tsx	✅ Passed (Inspect)	3m 0s	0	0	0
formBuilder/inputs/PortableText/FocusTracking.spec.tsx	✅ Passed (Inspect)	46s	15	0	0
formBuilder/inputs/PortableText/Input.spec.tsx	✅ Passed (Inspect)	1m 47s	21	0	0
formBuilder/inputs/PortableText/ObjectBlock.spec.tsx	✅ Passed (Inspect)	1m 17s	18	0	0
formBuilder/inputs/PortableText/PresenceCursors.spec.tsx	✅ Passed (Inspect)	9s	3	9	0
formBuilder/inputs/PortableText/RangeDecoration.spec.tsx	✅ Passed (Inspect)	27s	9	0	0
formBuilder/inputs/PortableText/Styles.spec.tsx	✅ Passed (Inspect)	18s	6	0	0
formBuilder/inputs/PortableText/Toolbar.spec.tsx	✅ Passed (Inspect)	37s	12	0	0
formBuilder/tree-editing/TreeEditing.spec.tsx	✅ Passed (Inspect)	0s	0	3	0
formBuilder/tree-editing/TreeEditingNestedObjects.spec.tsx	✅ Passed (Inspect)	0s	0	3	0

[cngonzalez]

This looks reasonable to me, and a great addition! Just one minor nit.

[RitaDias]

🚀