element error refector

packages/govuk-frontend/src/govuk/common/index.mjs

@@ -280,6 +280,18 @@ function isObject(option) {
   return !!option && typeof option === 'object' && !isArray(option)
 }
 
+/**
+ * Format error message
+ *
+ * @internal
+ * @param {CompatibleClass} Component - Component that threw the error
+ * @param {string} message - Error message
+ * @returns {string} - Formatted error message
+ */
+export function formatErrorMessage(Component, message) {
+  return `${Component.moduleName}:${message}`
+}
+
 /**
  * Schema for component config
  *
@@ -308,3 +320,15 @@ function isObject(option) {
  * @typedef {keyof ObjectNested} NestedKey
  * @typedef {{ [key: string]: string | boolean | number | ObjectNested | undefined }} ObjectNested
  */
+
+/* eslint-disable jsdoc/valid-types --
+ * `{new(...args: any[] ): object}` is not recognised as valid
+ * https://github.com/gajus/eslint-plugin-jsdoc/issues/145#issuecomment-1308722878
+ * https://github.com/jsdoc-type-pratt-parser/jsdoc-type-pratt-parser/issues/131
+ **/
+
+/**
+ * @typedef {{new (...args: any[]): any, defaults?: object, moduleName: string}} CompatibleClass
+ */
+
+/* eslint-enable jsdoc/valid-types */

packages/govuk-frontend/src/govuk/errors/index.mjs

@@ -1,3 +1,5 @@
+import { formatErrorMessage } from './../common/index.mjs'
+
 /**
  * GOV.UK Frontend error
  *
@@ -75,25 +77,25 @@ export class ElementError extends GOVUKFrontendError {
   /**
    * @internal
    * @param {string | ElementErrorOptions} messageOrOptions - Element error message or options
+   * @param {import('../init.mjs').CompatibleClass} Component - Component that threw Error
    */
-  constructor(messageOrOptions) {
+  constructor(messageOrOptions, Component) {
     let message = typeof messageOrOptions === 'string' ? messageOrOptions : ''
 
     // Build message from options
     if (typeof messageOrOptions === 'object') {
-      const { componentName, identifier, element, expectedType } =
-        messageOrOptions
+      const { identifier, element, expectedType } = messageOrOptions
 
       // Add prefix and identifier
-      message = `${componentName}: ${identifier}`
+      message = identifier
 
       // Append reason
       message += element
         ? ` is not of type ${expectedType ?? 'HTMLElement'}`
         : ' not found'
     }
 
-    super(message)
+    super(formatErrorMessage(Component, message))
   }
 }
 
@@ -129,3 +131,5 @@ export class InitError extends GOVUKFrontendError {
  * @property {Element | null} [element] - The element in error
  * @property {string} [expectedType] - The type that was expected for the identifier
  */
+
+/** @type {import('./../common/index.mjs').CompatibleClass} */