chore: add listener error handler

Context:

- reduxjs#547 (comment)

- reduxjs#1648

packages/action-listener-middleware/src/index.ts

@@ -94,6 +94,10 @@ export type ActionListener<
   O extends ActionListenerOptions
 > = (action: A, api: ActionListenerMiddlewareAPI<S, D, O>) => void
 
+export interface ListenerErrorHandler {
+  (error: unknown): void
+}
+
 export interface ActionListenerOptions {
   /**
    * Determines if the listener runs 'before' or 'after' the reducers have been called.
@@ -105,6 +109,7 @@ export interface ActionListenerOptions {
 
 export interface CreateListenerMiddlewareOptions<ExtraArgument = unknown> {
   extra?: ExtraArgument
+  onError?: ListenerErrorHandler
 }
 
 export interface AddListenerAction<
@@ -121,6 +126,37 @@ export interface AddListenerAction<
   }
 }
 
+/**
+ * Safely reports errors to the `errorHandler` provided.
+ * Errors that occur inside `errorHandler` are notified in a new task.
+ * Inspired by [rxjs reportUnhandledError](https://github.com/ReactiveX/rxjs/blob/6fafcf53dc9e557439b25debaeadfd224b245a66/src/internal/util/reportUnhandledError.ts)
+ * @param errorHandler
+ * @param errorToNotify
+ */
+const safelyNotifyError = (
+  errorHandler: ListenerErrorHandler,
+  errorToNotify: unknown
+): void => {
+  try {
+    errorHandler(errorToNotify)
+  } catch (errorHandlerError) {
+    // We cannot let an error raised here block the listener queue.
+    // The error raised here will be picked up by `window.onerror`, `process.on('error')` etc...
+    setTimeout(() => {
+      throw errorHandlerError
+    }, 0)
+  }
+}
+
+const assertFunction = (
+  func: unknown,
+  expected: string
+): asserts func is (...args: unknown[]) => unknown => {
+  if (typeof func !== 'function') {
+    throw new TypeError(`${expected} in not a function`)
+  }
+}
+
 /**
  * @alpha
  */
@@ -220,6 +256,9 @@ export const removeListenerAction = createAction(
 
 const defaultWhen: MiddlewarePhase = 'afterReducer'
 const actualMiddlewarePhases = ['beforeReducer', 'afterReducer'] as const
+const defaultErrorHandler: ListenerErrorHandler = (...args: unknown[]) => {
+  console.error('action-listener-middleware-error', ...args)
+}
 
 /**
  * @alpha
@@ -239,7 +278,10 @@ export function createActionListenerMiddleware<
   }
 
   const listenerMap = new Map<string, ListenerEntry>()
-  const { extra } = middlewareOptions
+  const { extra, onError = defaultErrorHandler } =
+    middlewareOptions
+
+  assertFunction(onError, 'onError')
 
   const middleware: Middleware<
     {
@@ -277,8 +319,17 @@ export function createActionListenerMiddleware<
       for (let entry of listenerMap.values()) {
         const runThisPhase =
           entry.when === 'both' || entry.when === currentPhase
-        const runListener =
-          runThisPhase && entry.predicate(action, currentState, originalState)
+
+        let runListener = runThisPhase
+
+        if (runListener) {
+          try {
+            runListener = entry.predicate(action, currentState, originalState)
+          } catch (predicateError) {
+            safelyNotifyError(onError, predicateError)
+          }
+        }
+
         if (!runListener) {
           continue
         }
@@ -293,8 +344,8 @@ export function createActionListenerMiddleware<
             extra,
             unsubscribe: entry.unsubscribe,
           })
-        } catch (err) {
-          // ignore errors deliberately
+        } catch (listenerError) {
+          safelyNotifyError(onListenerError, listenerError)
         }
       }
       if (currentPhase === 'beforeReducer') {