Add example demonstrating the SupportError in the browser

packages/govuk-frontend-review/src/views/examples/javascript-errors/index.njk

@@ -0,0 +1,55 @@
+{% extends "layouts/layout.njk" %}
+
+{% from "govuk/components/back-link/macro.njk" import govukBackLink %}
+{% from "govuk/components/character-count/macro.njk" import govukCharacterCount %}
+
+{% block beforeContent %}
+  {{ govukBackLink({
+    href: "/"
+  }) }}
+{% endblock %}
+
+{% block content %}
+  <h1 class="govuk-heading-l">JavaScript errors</h1>
+  <p class="govuk-body-lead">
+    Open your <a class="govuk-link" href="https://developer.mozilla.org/en-US/docs/Web/API/console#see_also">brower's console</a>
+    to witness the error thrown in browsers where GOV.UK Frontend is not supported.
+  </p>
+  {{ govukCharacterCount({
+    label: {
+      text: "Any other comment"
+    },
+    id: "some-content",
+    name: "some-content"
+  })}}
+{% endblock %}
+
+{% block bodyEnd %}
+  <script type="module" src="/javascripts/govuk-frontend.min.js"></script>
+
+  <!-- SupportError -->
+  <script type="module">
+    // Calling `initAll` would result in errors being logged rather than thrown
+    import { CharacterCount } from '/javascripts/govuk-frontend.min.js'
+
+    // Simulate GOV.UK Frontend not being supported
+    document.body.classList.remove('govuk-frontend-supported')
+
+    const $element = document.querySelector('[data-module="govuk-character-count"]')
+
+    try {
+      // Instantiate the component directly so errors are thrown
+      new CharacterCount($element)
+      // Use `finally` to ensure we tidy up regardless of the error
+    } finally {
+      // Add back the class marking GOV.UK Frontend support for future examples
+      document.body.classList.add('govuk-frontend-supported')
+    }
+  </script>
+
+  <!--
+    Add examples of other types of errors in their own `<script>` tag.
+    This separates each error example, as well as isolate their code
+    from the errors thrown by the other `<script>` tags.
+  -->
+{% endblock %}