Add setErrorHandler (#4673)

* Add `setErrorHandler`

* Add test

Author: ganyicz

packages/alpinejs/src/alpine.js

@@ -8,6 +8,7 @@ import { transition } from './directives/x-transition'
 import { clone, cloneNode, skipDuringClone, onlyDuringClone, interceptClone } from './clone'
 import { interceptor } from './interceptor'
 import { getBinding as bound, extractProp } from './utils/bind'
+import { setErrorHandler } from './utils/error'
 import { debounce } from './utils/debounce'
 import { throttle } from './utils/throttle'
 import { setStyles } from './utils/styles'
@@ -39,6 +40,7 @@ let Alpine = {
     onlyDuringClone,
     addRootSelector,
     addInitSelector,
+    setErrorHandler,
     interceptClone,
     addScopeToNode,
     deferMutations,

packages/alpinejs/src/utils/error.js

@@ -6,7 +6,17 @@ export function tryCatch(el, expression, callback, ...args) {
     }
 }
 
-export function handleError(error , el, expression = undefined) {
+export function handleError(...args) {
+    return errorHandler(...args)
+}
+
+let errorHandler = normalErrorHandler
+
+export function setErrorHandler(handler) {
+    errorHandler = handler
+}
+
+export function normalErrorHandler(error , el, expression = undefined) {
     error = Object.assign( 
         error ?? { message: 'No error message given.' }, 
         { el, expression } )

tests/cypress/integration/error-handling.spec.js

@@ -200,3 +200,20 @@ test('evaluation with syntax error',
     assertConsoleInterceptorHadErrorWithCorrectElement(),
     true
 )
+
+test('custom error handler',
+    [html`
+        <div id="custom">
+            <div x-init="doesNotExist()"></div>
+        </div>
+    `,
+        setupConsoleInterceptor( "custom" ) + `
+        Alpine.setErrorHandler((error, el) => {
+            // Report parent element instead
+            console.warn(error, el.parentNode)
+        })
+        `,
+    ],
+    assertConsoleInterceptorHadErrorWithCorrectElement(),
+    true
+)