Add example demonstrating the SupportError in the browser

[romaricpascal]

Little follow up on #4030 to add an example for JavaScript errors to the review app. As we add more errors, we may reshape this example to show multiple kinds of errors or add extra examples for the other kinds of errors.

The example uses a CharacterCount component to trigger the errors as the component should be able to emit all the types of errors we raise, especially the one for invalid configuration that it is the only one to throw.

Note: The name of the error appears clearly in the logs. Its class name is mangled in the stacktrace (n), but I don't think that's a massive issue given:

• the name of the error is clearly apparent
• the component raising the error is clear (Accordion)
• sourcemaps show the full sources

I've opened a separate issue to discuss mangling as I think it's worth its own little exploration to keep things maintainable as we add new classes, helpers...

[github-actions]

Uh oh! @romaricpascal, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

Uh oh! @romaricpascal, the image you shared is missing helpful alt text. Check your pull request body.

Alt text is an invisible description that helps screen readers describe images to blind or low-vision users. If you are using markdown to display images, add your alt text inside the brackets of the markdown image.

Learn more about alt text at Basic writing and formatting syntax: images on GitHub Docs.

[github-actions]

📋 Stats

File sizes

File	Size
dist/govuk-frontend-4.6.0.min.css	118.07 KiB
dist/govuk-frontend-4.6.0.min.js	47.1 KiB
dist/govuk-frontend-ie8-4.6.0.min.css	79.27 KiB
packages/govuk-frontend/dist/govuk/all.bundle.js	72.34 KiB
packages/govuk-frontend/dist/govuk/all.bundle.mjs	67.95 KiB
packages/govuk-frontend/dist/govuk/all.mjs	4 KiB
packages/govuk-frontend/dist/govuk/govuk-frontend-component.mjs	359 B
packages/govuk-frontend/dist/govuk/govuk-frontend.min.js	34.28 KiB
packages/govuk-frontend/dist/govuk/i18n.mjs	5.83 KiB

Modules

File	Size
all.mjs	64.5 KiB
components/accordion/accordion.mjs	20.86 KiB
components/button/button.mjs	3.67 KiB
components/character-count/character-count.mjs	20.46 KiB
components/checkboxes/checkboxes.mjs	4.37 KiB
components/error-summary/error-summary.mjs	4.96 KiB
components/exit-this-page/exit-this-page.mjs	15.42 KiB
components/header/header.mjs	2.3 KiB
components/notification-banner/notification-banner.mjs	3.5 KiB
components/radios/radios.mjs	3.37 KiB
components/skip-link/skip-link.mjs	2.12 KiB
components/tabs/tabs.mjs	8.04 KiB

View stats and visualisations on the review app

---

Action run for febbc72

[romaricpascal]

Looks like I need to rebase onto main

[colinrotherham]

Do we have try/finally support in our supported browsers?

Or even try-without-catch for future browser testing?

[romaricpascal]

I'm not aware of any support issue with try blocks when running synchronous code. It's a feature that's been there since pretty much the start. Using it without catch was there as early as ES5 in the specs as well (maybe even earlier, but I did not find specs for ES3 quickly)

It's a different matter for asynchronous code, though, as Promise.finally landed more recently, so that's where we'll need to be a bit more cautious. Regarding catch, the more recent development is the ability to omit grabbing the (error), for when you don't want to do anything with it (the "Optional catch binding" in the MDN support table), is that what you refer to by "try-without-catch"?

[colinrotherham]

…is that what you refer to by "try-without-catch"?

Yeah that's the one https://caniuse.com/mdn-javascript_statements_try_catch_optional_catch_binding

Got a bit of a gap from <script type="module"> to try...catch: Optional catch binding

Best adding an empty catch and running the tidy up below

[romaricpascal]

Lack of a catch clause has been well supported since ES5, so we're good here. The optional catch binding is about omitting the "argument" after catch. Here's a screenshot of the page in Chrome 61 (that doesn't support Optional catch binding):

• the error is logged in the console (showing the component was instantiated with the govuk-frontend-supported class removed)
• the govuk-frontend-supported class is on the <body> (after having been added back in the finally block)

[colinrotherham]

That's good enough for me. Thanks for testing it @romaricpascal