Catch errors when modules initialised

- wraps the initialisation of modules on a page with a try/catch block, so that if an error occurs in one module initialisation continues to the next without aborting and breaking all of the JS that follows

CHANGELOG.md

@@ -7,6 +7,10 @@
   useful summary for people upgrading their application, not a replication
   of the commit log.
 
+## Unreleased
+
+* Catch errors when modules initialised ([PR #3190](https://github.com/alphagov/govuk_publishing_components/pull/3190))
+
 ## 34.4.2
 
 * Load modules after analytics has loaded ([PR #3187](https://github.com/alphagov/govuk_publishing_components/pull/3187))

app/assets/javascripts/govuk_publishing_components/modules.js

@@ -38,8 +38,13 @@
           if (typeof GOVUK.Modules[moduleName] === 'function' && !started) {
             // Vanilla JavaScript GOV.UK Modules and GOV.UK Frontend Modules
             if (GOVUK.Modules[moduleName].prototype.init) {
-              new GOVUK.Modules[moduleName](element).init()
-              element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
+              try {
+                new GOVUK.Modules[moduleName](element).init()
+                element.setAttribute('data-' + moduleNames[j] + '-module-started', true)
+              } catch (e) {
+                // if there's a problem with the module, catch the error to allow other modules to start
+                console.error('Error starting ' + moduleName + ' component JS: ' + e.message, window.location)
+              }
             }
           }
         }

spec/javascripts/govuk_publishing_components/modules.spec.js

@@ -121,6 +121,16 @@ describe('GOVUK Modules', function () {
       }
       GOVUK.Modules.TestCookieDependencyModule = TestCookieDependencyModule
 
+      // module with a deliberate error in it
+      function TestErrorModule (element) {
+        this.element = element
+      }
+      TestErrorModule.prototype.init = function () {
+        throw new Error('This is a deliberate error')
+        callbackGemFrontendModule(this.element) // eslint-disable-line no-unreachable
+      }
+      GOVUK.Modules.TestErrorModule = TestErrorModule
+
       container = $('<div></div>')
     })
 
@@ -129,6 +139,7 @@ describe('GOVUK Modules', function () {
       delete GOVUK.Modules.GemTestAlertFrontendModule
       delete GOVUK.Modules.TestAlertPublishingAndFrontendModule
       delete GOVUK.Modules.TestCookieDependencyModule
+      delete GOVUK.Modules.TestErrorModule
 
       container.remove()
     })
@@ -209,5 +220,16 @@ describe('GOVUK Modules', function () {
       window.GOVUK.triggerEvent(window, 'cookie-consent')
       expect(callbackFrontendModule.calls.count()).toBe(2)
     })
+
+    it('detects errors in modules and continues without failing', function () {
+      var module1 = $('<div data-module="test-error-module"></div>')
+      var module2 = $('<div data-module="gem-test-alert-frontend-module"></div>')
+      container.append(module1)
+      container.append(module2)
+      $('body').append(container)
+
+      GOVUK.modules.start(container[0])
+      expect(callbackGemFrontendModule.calls.count()).toBe(1)
+    })
   })
 })