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
alphagov · Jan 16, 2023 · 8fe38a7 · 8fe38a7
1 parent d006ea8
commit 8fe38a7
Show file tree

Hide file tree

Showing 2 changed files with 28 additions and 2 deletions.
diff --git a/app/assets/javascripts/govuk_publishing_components/modules.js b/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, don't start it
+                console.error('Error starting ' + moduleName + ' component JS: ' + e.message, window.location)
+              }
             }
           }
         }

diff --git a/spec/javascripts/govuk_publishing_components/modules.spec.js b/spec/javascripts/govuk_publishing_components/modules.spec.js
@@ -121,6 +121,15 @@ 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')
+      }
+      GOVUK.Modules.TestErrorModule = TestErrorModule
+
       container = $('<div></div>')
     })
 
@@ -129,6 +138,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 +219,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).toHaveBeenCalled()
+    })
   })
 })