Merge branch 'master' of github.com:reduxjs/redux-toolkit

Author: markerikson

packages/action-listener-middleware/README.md

@@ -100,6 +100,8 @@ Current options are:
 
 - `extra`: an optional "extra argument" that will be injected into the `listenerApi` parameter of each listener. Equivalent to [the "extra argument" in the Redux Thunk middleware](https://redux.js.org/usage/writing-logic-thunks#injecting-config-values-into-thunks).
 
+- `onError`: an optional error handler that gets called with synchronous errors raised by `listener` and `predicate`.
+
 ### `listenerMiddleware.addListener(predicate, listener, options?) : Unsubscribe`
 
 Statically adds a new listener callback to the middleware.

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

@@ -38,6 +38,15 @@ export interface HasMatchFunction<T> {
   match: MatchFunction<T>
 }
 
+function assertFunction(
+  func: unknown,
+  expected: string
+): asserts func is (...args: unknown[]) => unknown {
+  if (typeof func !== 'function') {
+    throw new TypeError(`${expected} in not a function`)
+  }
+}
+
 export const hasMatchFunction = <T>(
   v: Matcher<T>
 ): v is HasMatchFunction<T> => {
@@ -94,6 +103,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 +118,10 @@ export interface ActionListenerOptions {
 
 export interface CreateListenerMiddlewareOptions<ExtraArgument = unknown> {
   extra?: ExtraArgument
+  /**
+   * Receives synchronous errors that are raised by `listener` and `listenerOption.predicate`.
+   */
+  onError?: ListenerErrorHandler
 }
 
 export interface AddListenerAction<
@@ -121,6 +138,28 @@ 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)
+  }
+}
+
 /**
  * @alpha
  */
@@ -220,6 +259,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 +281,9 @@ 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 +321,18 @@ 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)
+            runListener = false
+          }
+        }
+
         if (!runListener) {
           continue
         }
@@ -293,8 +347,8 @@ export function createActionListenerMiddleware<
             extra,
             unsubscribe: entry.unsubscribe,
           })
-        } catch (err) {
-          // ignore errors deliberately
+        } catch (listenerError) {
+          safelyNotifyError(onError, listenerError)
         }
       }
       if (currentPhase === 'beforeReducer') {

packages/action-listener-middleware/src/tests/listenerMiddleware.test.ts

@@ -60,6 +60,10 @@ describe('createActionListenerMiddleware', () => {
   const testAction3 = createAction<string>('testAction3')
   type TestAction3 = ReturnType<typeof testAction3>
 
+  beforeAll(() => {
+    jest.spyOn(console, 'error').mockImplementation(noop)
+  })
+
   beforeEach(() => {
     middleware = createActionListenerMiddleware()
     reducer = jest.fn(() => ({}))
@@ -461,7 +465,7 @@ describe('createActionListenerMiddleware', () => {
     expect(reducer.mock.calls).toEqual([[{}, testAction1('a')]])
   })
 
-  test('Continues running other listeners if there is an error', () => {
+  test('Continues running other listeners if one of them raises an error', () => {
     const matcher = (action: any) => true
 
     middleware.addListener(matcher, () => {
@@ -475,6 +479,47 @@ describe('createActionListenerMiddleware', () => {
     expect(listener.mock.calls).toEqual([[testAction1('a'), middlewareApi]])
   })
 
+  test('Continues running other listeners if a predicate raises an error', () => {
+    const matcher = (action: any) => true
+    const firstListener = jest.fn(() => {})
+    const secondListener = jest.fn(() => {})
+
+    middleware.addListener(() => {
+      throw new Error('Predicate Panic!')
+    }, firstListener);
+
+    middleware.addListener(matcher, secondListener)
+
+    store.dispatch(testAction1('a'))
+    expect(firstListener).not.toHaveBeenCalled();
+    expect(secondListener.mock.calls).toEqual([
+      [testAction1('a'), middlewareApi],
+    ])
+  })
+
+  test('Notifies listener errors to `onError`, if provided', () => {
+    const onError = jest.fn();
+    middleware = createActionListenerMiddleware({
+      onError
+    })
+    reducer = jest.fn(() => ({}))
+    store = configureStore({
+      reducer,
+      middleware: (gDM) => gDM().prepend(middleware),
+    })
+  
+    const listenerError = new Error('Boom!');
+  
+    const matcher = (action: any) => true
+  
+    middleware.addListener(matcher, () => {
+      throw listenerError;
+    });
+
+    store.dispatch(testAction1('a'))
+    expect(onError).toBeCalledWith(listenerError);
+  })
+
   test('condition method resolves promise when the predicate succeeds', async () => {
     const store = configureStore({
       reducer: counterSlice.reducer,