Replace raw 'throw new Error' calls in client code to use project ClientScriptError class

Author: webstackdev

.vscode/settings.json

@@ -60,6 +60,7 @@
     "MTTR",
     "nanostores",
     "navigations",
+    "Neue",
     "Niklas",
     "noabbr",
     "octocat",
@@ -104,6 +105,7 @@
     "vmax",
     "vtbot",
     "WHATWG",
+    "wordprocessingml",
     "wscript",
     "youtu",
     "yoyo",

src/components/Carousel/__tests__/client.spec.ts

@@ -289,7 +289,7 @@ describe('CarouselManager', () => {
       // Mock EmblaCarousel to throw an error
       const EmblaCarousel = (await import('embla-carousel')).default
       vi.mocked(EmblaCarousel).mockImplementation(() => {
-        throw new Error('Mock initialization error')
+        throw new TestError('Mock initialization error')
       })
 
       // Error handling now uses handleScriptError instead of console.error

src/components/ContactForm/email.ts

@@ -4,6 +4,7 @@ import {
   minLengthEmailAddressText,
   maxLengthEmailAddressText,
 } from './error'
+import { ClientScriptError } from '@components/scripts/errors/ClientScriptError'
 import type { ContactFormSelectors } from './selectors'
 
 export const initEmailValidationHandler = (selector: ContactFormSelectors) => {
@@ -39,6 +40,8 @@ const getEmailErrorText = (emailInputElement: HTMLInputElement) => {
     /** If the data is too long, display the following error message */
     return maxLengthEmailAddressText(emailInputElement)
   } else {
-    throw new Error()
+    throw new ClientScriptError({
+      message: `Unknown email validation error`
+    })
   }
 }

src/components/ContactForm/selectors.ts

@@ -1,6 +1,7 @@
 /**
  * Type-safe HTML element selectors
  */
+import { ClientScriptError } from '@components/scripts/errors/ClientScriptError'
 import {
   isButtonElement,
   isDivElement,
@@ -151,7 +152,9 @@ export class ContactFormSelectors {
   public get contactForm(): HTMLFormElement {
     const formELement = document.querySelector(SELECTORS.formELement)
     if (!isFormElement(formELement)) {
-      throw new Error(`Contact form is missing in document, selector: ${SELECTORS.formELement}`)
+      throw new ClientScriptError({
+  message: `Contact form is missing in document, selector: ${SELECTORS.formELement}`
+})
     }
     return formELement
   }
@@ -163,9 +166,9 @@ export class ContactFormSelectors {
     if (!this._submitButton) {
       const submitButton = document.querySelector(SELECTORS.submitButton)
       if (!isButtonElement(submitButton)) {
-        throw new Error(
-          `Contact form submit button is missing in document, selector: ${SELECTORS.submitButton}`
-        )
+        throw new ClientScriptError({
+          message: `Contact form submit button is missing in document, selector: ${SELECTORS.submitButton}`
+        })
       }
       this._submitButton = submitButton
     }
@@ -179,7 +182,9 @@ export class ContactFormSelectors {
     if (!this._formValidationError) {
       const errorValidationElement = document.querySelector(SELECTORS.formError)
       if (!isDivElement(errorValidationElement)) {
-        throw new Error(`Contact form error wrapper is missing in document: ${SELECTORS.formError}`)
+        throw new ClientScriptError({
+          message: `Contact form error wrapper is missing in document: ${SELECTORS.formError}`
+        })
       }
       this._formValidationError = errorValidationElement
     }
@@ -193,9 +198,9 @@ export class ContactFormSelectors {
     const elementSelector = SELECTORS[selector]
     const group = document.querySelector(elementSelector)
     if (!isDivElement(group)) {
-      throw new Error(
-        `Contact form input group wrapper <div> is missing in document, selector: ${elementSelector}`
-      )
+      throw new ClientScriptError({
+        message: `Contact form input group wrapper <div> is missing in document, selector: ${elementSelector}`
+      })
     }
     return group
   }
@@ -206,9 +211,9 @@ export class ContactFormSelectors {
   private getInputElement(formGroup: HTMLDivElement): HTMLInputElement {
     const inputElement = formGroup.querySelector(SELECTORS.inputElement)
     if (!isInputElement(inputElement)) {
-      throw new Error(
-        `Contact form input element is missing in document for input group: ${formGroup['tagName']}`
-      )
+      throw new ClientScriptError({
+        message: `Contact form input element is missing in document for input group: ${formGroup['tagName']}`
+      })
     }
     return inputElement
   }
@@ -219,9 +224,9 @@ export class ContactFormSelectors {
   private getLabelElement(formGroup: HTMLDivElement): HTMLLabelElement {
     const labelElement = formGroup.querySelector(SELECTORS.inputLabel)
     if (!isLabelElement(labelElement)) {
-      throw new Error(
-        `Contact form input group wrapper <div> is missing in document for input group: ${formGroup['tagName']}`
-      )
+      throw new ClientScriptError({
+        message: `Contact form input group wrapper <div> is missing in document for input group: ${formGroup['tagName']}`
+      })
     }
     return labelElement
   }
@@ -232,9 +237,9 @@ export class ContactFormSelectors {
   private getErrorValidationElement(formGroup: HTMLDivElement): HTMLDivElement {
     const errorValidationElement = formGroup.querySelector(SELECTORS.validationError)
     if (!isDivElement(errorValidationElement)) {
-      throw new Error(
-        `Contact form input group wrapper <div> is missing in document for input group: ${formGroup['tagName']}`
-      )
+      throw new ClientScriptError({
+        message: `Contact form input group wrapper <div> is missing in document for input group: ${formGroup['tagName']}`
+      })
     }
     return errorValidationElement
   }

src/components/Footer/selectors.ts

@@ -1,6 +1,7 @@
 /**
  * Type-safe HTML element selectors
  */
+import { ClientScriptError } from '@components/scripts/errors/ClientScriptError'
 import { isAnchorElement } from '@components/scripts/assertions/elements'
 
 export const SELECTORS = {
@@ -14,7 +15,9 @@ export const SELECTORS = {
 export const getHireMeAnchorElement = (): HTMLAnchorElement => {
   const anchor = document.querySelector(SELECTORS.hireMeAnchor)
   if (!isAnchorElement(anchor)) {
-    throw new Error(`Footer anchor for "Hire Me" element, selector: ${SELECTORS.hireMeAnchor}`)
+    throw new ClientScriptError({
+      message: `Footer anchor for "Hire Me" element, selector: ${SELECTORS.hireMeAnchor}`
+    })
   }
   return anchor
 }

src/components/Footer/server.ts

@@ -2,8 +2,8 @@
  * Server-side utilities for Footer component
  * Functions used during build process in Astro frontmatter
  */
-
 import parsePhoneNumber from 'libphonenumber-js'
+import { ClientScriptError } from '@components/scripts/errors/ClientScriptError'
 
 /**
  * Format a phone number in standard format
@@ -14,8 +14,9 @@ import parsePhoneNumber from 'libphonenumber-js'
 export const formatPhoneNumber = (phoneNumber: string) => {
   const parsedPhoneNumber = parsePhoneNumber(phoneNumber)
   if (!parsedPhoneNumber) {
-    // throw new Error(`Trying to format invalid phone number: ${phoneNumber}`)
-    return undefined
+    throw new ClientScriptError({
+      message: `Trying to format invalid phone number: ${phoneNumber}`
+    })
   }
   return parsedPhoneNumber.format('NATIONAL')
 }

src/components/Forms/Download/client.ts

@@ -79,7 +79,9 @@ export class DownloadForm {
         })
 
         if (!response.ok) {
-          throw new Error('Failed to submit form')
+          throw new ClientScriptError({
+            message: 'Failed to submit form'
+          })
         }
 
         await response.json()

src/components/Forms/Download/selectors.ts

@@ -1,6 +1,7 @@
 /**
  * Selectors for DownloadForm component elements
  */
+import { ClientScriptError } from '@components/scripts/errors/ClientScriptError'
 
 /**
  * Get the download form element
@@ -9,7 +10,9 @@
 export function getDownloadFormElement(): HTMLFormElement {
   const form = document.getElementById('downloadForm')
   if (!form || !(form instanceof HTMLFormElement)) {
-    throw new Error('Download form element not found')
+    throw new ClientScriptError({
+  message: `Download form element not found`
+})
   }
   return form
 }
@@ -21,7 +24,9 @@ export function getDownloadFormElement(): HTMLFormElement {
 export function getDownloadSubmitButton(): HTMLButtonElement {
   const button = document.getElementById('downloadSubmitBtn')
   if (!button || !(button instanceof HTMLButtonElement)) {
-    throw new Error('Download submit button not found')
+    throw new ClientScriptError({
+      message: `Download submit button not found`
+    })
   }
   return button
 }
@@ -33,7 +38,9 @@ export function getDownloadSubmitButton(): HTMLButtonElement {
 export function getDownloadStatusDiv(): HTMLElement {
   const statusDiv = document.getElementById('downloadFormStatus')
   if (!statusDiv) {
-    throw new Error('Download status div not found')
+    throw new ClientScriptError({
+      message: `Download status div not found`
+    })
   }
   return statusDiv
 }
@@ -45,7 +52,9 @@ export function getDownloadStatusDiv(): HTMLElement {
 export function getDownloadButtonWrapper(): HTMLElement {
   const wrapper = document.getElementById('downloadButtonWrapper')
   if (!wrapper) {
-    throw new Error('Download button wrapper not found')
+    throw new ClientScriptError({
+      message: `Download button wrapper not found`
+    })
   }
   return wrapper
 }

src/components/GDPR/Consent/selectors.ts

@@ -1,6 +1,7 @@
 /**
  * DOM selectors for GDPR Consent component
  */
+import { ClientScriptError } from '@components/scripts/errors/ClientScriptError'
 
 /**
  * Get the consent checkbox element
@@ -10,7 +11,9 @@ export function getConsentCheckbox(containerId?: string): HTMLInputElement {
   const element = document.getElementById(id)
 
   if (!element || !(element instanceof HTMLInputElement)) {
-    throw new Error(`GDPR consent checkbox not found: #${id}`)
+    throw new ClientScriptError({
+      message: `GDPR consent checkbox not found: #${id}`
+    })
   }
 
   return element
@@ -24,7 +27,9 @@ export function getConsentContainer(containerId?: string): HTMLDivElement {
   const element = document.getElementById(id)
 
   if (!element || !(element instanceof HTMLDivElement)) {
-    throw new Error(`GDPR consent container not found: #${id}`)
+    throw new ClientScriptError({
+      message: `GDPR consent container not found: #${id}`
+    })
   }
 
   return element
@@ -38,7 +43,9 @@ export function getConsentError(containerId?: string): HTMLDivElement {
   const element = document.getElementById(id)
 
   if (!element || !(element instanceof HTMLDivElement)) {
-    throw new Error(`GDPR consent error element not found: #${id}`)
+    throw new ClientScriptError({
+      message: `GDPR consent error element not found: #${id}`
+    })
   }
 
   return element
@@ -52,7 +59,9 @@ export function getConsentDescription(containerId?: string): HTMLSpanElement {
   const element = document.getElementById(id)
 
   if (!element || !(element instanceof HTMLSpanElement)) {
-    throw new Error(`GDPR consent description not found: #${id}`)
+    throw new ClientScriptError({
+      message: `GDPR consent description not found: #${id}`
+    })
   }
 
   return element

src/components/Highlighter/selectors.ts

@@ -1,6 +1,7 @@
 /**
  * Type-safe HTML element selectors
  */
+import { ClientScriptError } from '@components/scripts/errors/ClientScriptError'
 import {
   isBodyElement,
   isDivElement,
@@ -12,14 +13,18 @@ import {
 export const queryDocument = (selector: string): Element => {
   const element = document.querySelector(selector)
   if (element === null)
-    throw new Error(`Could not find document element for query selector ${selector}`)
+    throw new ClientScriptError({
+      message: `Could not find document element for query selector ${selector}`
+    })
   return element
 }
 
 export const queryAllDocument = (selector: string): NodeListOf<Element> => {
   const elements = document.querySelectorAll(selector)
   if (elements.length === 0)
-    throw new Error(`Could not find any document elements for query selector ${selector}`)
+    throw new ClientScriptError({
+      message: `Could not find any document elements for query selector ${selector}`
+    })
   return elements
 }
 
@@ -28,7 +33,9 @@ export const queryAllDocument = (selector: string): NodeListOf<Element> => {
  */
 export const getBodyElement = (): HTMLBodyElement => {
   if (!isBodyElement(document.body))
-    throw new Error(`Page is missing a <body> element, is the document empty?`)
+    throw new ClientScriptError({
+      message: `Page is missing a <body> element, is the document empty?`
+    })
   return document.body
 }
 
@@ -37,7 +44,9 @@ export const getBodyElement = (): HTMLBodyElement => {
  */
 export const getHtmlElement = (): HTMLHtmlElement => {
   if (!isHtmlElement(document.documentElement))
-    throw new Error(`Page is missing a <html> element, is the document XML or XHTML?`)
+    throw new ClientScriptError({
+      message: `Page is missing a <html> element, is the document XML or XHTML?`
+    })
   return document.documentElement
 }
 
@@ -46,7 +55,9 @@ export const getHtmlElement = (): HTMLHtmlElement => {
  */
 export const getSlotElement = (shadowRoot: ShadowRoot): HTMLSlotElement => {
   const slotElement = shadowRoot.querySelector('slot')
-  if (!isSlotElement(slotElement)) throw new Error(`<slot> element is missing in shadow root`)
+  if (!isSlotElement(slotElement)) throw new ClientScriptError({
+    message: `<slot> element is missing in shadow root`
+  })
   return slotElement
 }
 
@@ -56,13 +67,17 @@ export const getSlotElement = (shadowRoot: ShadowRoot): HTMLSlotElement => {
 export const getDivElement = (selector: string): HTMLDivElement => {
   const element = document.querySelector(selector)
   if (!isDivElement(element))
-    throw new Error(`Could not find <div> element for query selector ${selector}`)
+    throw new ClientScriptError({
+      message: `Could not find <div> element for query selector ${selector}`
+    })
   return element
 }
 
 export const getDivElements = (selector: string): NodeListOf<HTMLDivElement> => {
   const elements = document.querySelectorAll(selector)
   if (elements.length === 0)
-    throw new Error(`Could not find any <div> elements for query selector ${selector}`)
+    throw new ClientScriptError({
+      message: `Could not find any <div> elements for query selector ${selector}`
+    })
   return elements as NodeListOf<HTMLDivElement>
 }