From b2b350a102b375e7485c52ad6c17e41893d1ba79 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Fri, 2 Apr 2021 14:21:13 -0400 Subject: [PATCH 1/4] Exclude Babel Runtime error from our own output --- scripts/mangleErrors.js | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/scripts/mangleErrors.js b/scripts/mangleErrors.js index d8b8502a52..2c4ab33393 100644 --- a/scripts/mangleErrors.js +++ b/scripts/mangleErrors.js @@ -89,6 +89,11 @@ module.exports = babel => { const errorMsgLiteral = evalToString(path.node.argument.arguments[0]) + if (errorMsgLiteral.includes('Super expression')) { + // ignore Babel runtime error message + return + } + // Attempt to get the existing index of the error. If it is not found, add it to the array as a new error. let errorIndex = errors.indexOf(errorMsgLiteral) if (errorIndex === -1) { From fc3d52ff706344bbced7a48ad34954f8943405bf Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Fri, 2 Apr 2021 14:50:21 -0400 Subject: [PATCH 2/4] Add CodeSandbox-CI config --- .codesandbox/ci.json | 7 +++++++ 1 file changed, 7 insertions(+) create mode 100644 .codesandbox/ci.json diff --git a/.codesandbox/ci.json b/.codesandbox/ci.json new file mode 100644 index 0000000000..f86122cef4 --- /dev/null +++ b/.codesandbox/ci.json @@ -0,0 +1,7 @@ +{ + "sandboxes": [ + "vanilla", + "vanilla-ts" + ], + "node": "14" +} From 12e16823dc1dd3603e8c24ae66fab5c0fb08299a Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Fri, 2 Apr 2021 14:53:25 -0400 Subject: [PATCH 3/4] Rewrite Redux error messages - Added miniature port of `kindOf` for better `typeof` descriptions - Used `kindOf` for all runtime type check errors - Inlined "slice reducer returned undefined" error message - Rewrote "actions must be plain objects" error message to show the actual variable type and added tests - Reworded a bunch of error messages - Added some additional docs links - Updated tests that check error messages --- errors.json | 26 ++++++------- src/bindActionCreators.ts | 7 ++-- src/combineReducers.ts | 37 +++++++----------- src/createStore.ts | 43 +++++++++++++++------ src/utils/kindOf.ts | 66 +++++++++++++++++++++++++++++++++ test/bindActionCreators.spec.ts | 12 +++--- test/combineReducers.spec.ts | 4 +- test/createStore.spec.ts | 44 ++++++++++++++++++++-- 8 files changed, 178 insertions(+), 61 deletions(-) create mode 100644 src/utils/kindOf.ts diff --git a/errors.json b/errors.json index 49e6c98a69..3130695822 100644 --- a/errors.json +++ b/errors.json @@ -1,19 +1,19 @@ { - "0": "It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function.", - "1": "Expected the enhancer to be a function.", - "2": "Expected the reducer to be a function.", + "0": "It looks like you are passing several store enhancers to createStore(). This is not supported. Instead, compose them together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.", + "1": "Expected the enhancer to be a function. Instead, received: ''", + "2": "Expected the root reducer to be a function. Instead, received: ''", "3": "You may not call store.getState() while the reducer is executing. The reducer has already received the state as an argument. Pass it down from the top reducer instead of reading it from the store.", - "4": "Expected the listener to be a function.", + "4": "Expected the listener to be a function. Instead, received: ''", "5": "You may not call store.subscribe() while the reducer is executing. If you would like to be notified after the store has been updated, subscribe from a component and invoke store.getState() in the callback to access the latest state. See https://redux.js.org/api/store#subscribelistener for more details.", "6": "You may not unsubscribe from a store listener while the reducer is executing. See https://redux.js.org/api/store#subscribelistener for more details.", - "7": "Actions must be plain objects. Use custom middleware for async actions.", - "8": "Actions may not have an undefined \"type\" property. Have you misspelled a constant?", + "7": "Actions must be plain objects. Instead, the actual type was: ''. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.", + "8": "Actions may not have an undefined \"type\" property. You may have misspelled an action type string constant.", "9": "Reducers may not dispatch actions.", - "10": "Expected the nextReducer to be a function.", - "11": "Expected the observer to be an object.", - "12": "bindActionCreators expected an object or a function, instead received . Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?", - "13": "Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.", - "14": "Reducer \"\" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.", - "15": "Reducer \"\" returned undefined when probed with a random type. Don't try to handle or other actions in \"redux/*\" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.", - "16": "Super expression must either be null or a function" + "10": "Expected the nextReducer to be a function. Instead, received: '", + "11": "Expected the observer to be an object. Instead, received: ''", + "12": "The slice reducer for key \"\" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.", + "13": "The slice reducer for key \"\" returned undefined when probed with a random type. Don't try to handle or other actions in \"redux/*\" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.", + "14": "When called with an action of type , the slice reducer for key \"\" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.", + "15": "Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.", + "16": "bindActionCreators expected an object or a function, but instead received: ''. Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?" } \ No newline at end of file diff --git a/src/bindActionCreators.ts b/src/bindActionCreators.ts index 620cf9f6a4..022d15bb0e 100644 --- a/src/bindActionCreators.ts +++ b/src/bindActionCreators.ts @@ -4,6 +4,7 @@ import { ActionCreator, ActionCreatorsMapObject } from './types/actions' +import { kindOf } from './utils/kindOf' function bindActionCreator( actionCreator: ActionCreator, @@ -64,9 +65,9 @@ export default function bindActionCreators( if (typeof actionCreators !== 'object' || actionCreators === null) { throw new Error( - `bindActionCreators expected an object or a function, instead received ${ - actionCreators === null ? 'null' : typeof actionCreators - }. ` + + `bindActionCreators expected an object or a function, but instead received: '${kindOf( + actionCreators + )}'. ` + `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?` ) } diff --git a/src/combineReducers.ts b/src/combineReducers.ts index 0da94c9b85..8ab020ebc1 100644 --- a/src/combineReducers.ts +++ b/src/combineReducers.ts @@ -10,18 +10,7 @@ import { CombinedState } from './types/store' import ActionTypes from './utils/actionTypes' import isPlainObject from './utils/isPlainObject' import warning from './utils/warning' - -function getUndefinedStateErrorMessage(key: string, action: Action) { - const actionType = action && action.type - const actionDescription = - (actionType && `action "${String(actionType)}"`) || 'an action' - - return ( - `Given ${actionDescription}, reducer "${key}" returned undefined. ` + - `To ignore an action, you must explicitly return the previous state. ` + - `If you want this reducer to hold no value, you can return null instead of undefined.` - ) -} +import { kindOf } from './utils/kindOf' function getUnexpectedStateShapeWarningMessage( inputState: object, @@ -43,14 +32,10 @@ function getUnexpectedStateShapeWarningMessage( } if (!isPlainObject(inputState)) { - const match = Object.prototype.toString - .call(inputState) - .match(/\s([a-z|A-Z]+)/) - const matchType = match ? match[1] : '' return ( - `The ${argumentName} has unexpected type of "` + - matchType + - `". Expected argument to be an object with the following ` + + `The ${argumentName} has unexpected type of "${kindOf( + inputState + )}". Expected argument to be an object with the following ` + `keys: "${reducerKeys.join('", "')}"` ) } @@ -82,7 +67,7 @@ function assertReducerShape(reducers: ReducersMapObject) { if (typeof initialState === 'undefined') { throw new Error( - `Reducer "${key}" returned undefined during initialization. ` + + `The slice reducer for key "${key}" returned undefined during initialization. ` + `If the state passed to the reducer is undefined, you must ` + `explicitly return the initial state. The initial state may ` + `not be undefined. If you don't want to set a value for this reducer, ` + @@ -96,7 +81,7 @@ function assertReducerShape(reducers: ReducersMapObject) { }) === 'undefined' ) { throw new Error( - `Reducer "${key}" returned undefined when probed with a random type. ` + + `The slice reducer for key "${key}" returned undefined when probed with a random type. ` + `Don't try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` + `namespace. They are considered private. Instead, you must return the ` + `current state for any unknown actions, unless it is undefined, ` + @@ -197,8 +182,14 @@ export default function combineReducers(reducers: ReducersMapObject) { const previousStateForKey = state[key] const nextStateForKey = reducer(previousStateForKey, action) if (typeof nextStateForKey === 'undefined') { - const errorMessage = getUndefinedStateErrorMessage(key, action) - throw new Error(errorMessage) + const actionType = action && action.type + throw new Error( + `When called with an action of type ${ + actionType ? `"${String(actionType)}"` : '(unknown type)' + }, the slice reducer for key "${key}" returned undefined. ` + + `To ignore an action, you must explicitly return the previous state. ` + + `If you want this reducer to hold no value, you can return null instead of undefined.` + ) } nextState[key] = nextStateForKey hasChanged = hasChanged || nextStateForKey !== previousStateForKey diff --git a/src/createStore.ts b/src/createStore.ts index 3a980bba37..d1bc6abaa2 100644 --- a/src/createStore.ts +++ b/src/createStore.ts @@ -12,6 +12,7 @@ import { Action } from './types/actions' import { Reducer } from './types/reducers' import ActionTypes from './utils/actionTypes' import isPlainObject from './utils/isPlainObject' +import { kindOf } from './utils/kindOf' /** * Creates a Redux store that holds the state tree. @@ -74,7 +75,7 @@ export default function createStore< throw new Error( 'It looks like you are passing several store enhancers to ' + 'createStore(). This is not supported. Instead, compose them ' + - 'together to a single function.' + 'together to a single function. See https://redux.js.org/tutorials/fundamentals/part-4-store#creating-a-store-with-enhancers for an example.' ) } @@ -85,7 +86,11 @@ export default function createStore< if (typeof enhancer !== 'undefined') { if (typeof enhancer !== 'function') { - throw new Error('Expected the enhancer to be a function.') + throw new Error( + `Expected the enhancer to be a function. Instead, received: '${kindOf( + enhancer + )}'` + ) } return enhancer(createStore)( @@ -95,7 +100,11 @@ export default function createStore< } if (typeof reducer !== 'function') { - throw new Error('Expected the reducer to be a function.') + throw new Error( + `Expected the root reducer to be a function. Instead, received: '${kindOf( + reducer + )}'` + ) } let currentReducer = reducer @@ -105,7 +114,7 @@ export default function createStore< let isDispatching = false /** - * This makes a shallow copy of currentListeners so we can use + * This makes a shallow copy of currentListeners so can use * nextListeners as a temporary list while dispatching. * * This prevents any bugs around consumers calling @@ -159,7 +168,11 @@ export default function createStore< */ function subscribe(listener: () => void) { if (typeof listener !== 'function') { - throw new Error('Expected the listener to be a function.') + throw new Error( + `Expected the listener to be a function. Instead, received: '${kindOf( + listener + )}'` + ) } if (isDispatching) { @@ -225,15 +238,15 @@ export default function createStore< function dispatch(action: A) { if (!isPlainObject(action)) { throw new Error( - 'Actions must be plain objects. ' + - 'Use custom middleware for async actions.' + `Actions must be plain objects. Instead, the actual type was: '${kindOf( + action + )}'. You may need to add middleware to your store setup to handle dispatching other values, such as 'redux-thunk' to handle dispatching functions. See https://redux.js.org/tutorials/fundamentals/part-4-store#middleware and https://redux.js.org/tutorials/fundamentals/part-6-async-logic#using-the-redux-thunk-middleware for examples.` ) } if (typeof action.type === 'undefined') { throw new Error( - 'Actions may not have an undefined "type" property. ' + - 'Have you misspelled a constant?' + 'Actions may not have an undefined "type" property. You may have misspelled an action type string constant.' ) } @@ -271,7 +284,11 @@ export default function createStore< nextReducer: Reducer ): Store, NewActions, StateExt, Ext> & Ext { if (typeof nextReducer !== 'function') { - throw new Error('Expected the nextReducer to be a function.') + throw new Error( + `Expected the nextReducer to be a function. Instead, received: '${kindOf( + nextReducer + )}` + ) } // TODO: do this more elegantly @@ -314,7 +331,11 @@ export default function createStore< */ subscribe(observer: unknown) { if (typeof observer !== 'object' || observer === null) { - throw new TypeError('Expected the observer to be an object.') + throw new TypeError( + `Expected the observer to be an object. Instead, received: '${kindOf( + observer + )}'` + ) } function observeState() { diff --git a/src/utils/kindOf.ts b/src/utils/kindOf.ts new file mode 100644 index 0000000000..2c600bc702 --- /dev/null +++ b/src/utils/kindOf.ts @@ -0,0 +1,66 @@ +export function kindOf(val: any): string { + let typeOfVal: string = typeof val + + if (process.env.NODE_ENV !== 'production') { + // Inlined / shortened version of `kindOf` from https://github.com/jonschlinkert/kind-of + function miniKindOf(val: any) { + if (val === void 0) return 'undefined' + if (val === null) return 'null' + + const type = typeof val + switch (type) { + case 'boolean': + case 'string': + case 'number': + case 'symbol': + case 'function': { + return type + } + } + + if (Array.isArray(val)) return 'array' + if (isDate(val)) return 'date' + if (isError(val)) return 'error' + + const constructorName = ctorName(val) + switch (constructorName) { + case 'Symbol': + case 'Promise': + case 'WeakMap': + case 'WeakSet': + case 'Map': + case 'Set': + return constructorName + } + + // other + return type.slice(8, -1).toLowerCase().replace(/\s/g, '') + } + + function ctorName(val: any): string | null { + return typeof val.constructor === 'function' ? val.constructor.name : null + } + + function isError(val: any) { + return ( + val instanceof Error || + (typeof val.message === 'string' && + val.constructor && + typeof val.constructor.stackTraceLimit === 'number') + ) + } + + function isDate(val: any) { + if (val instanceof Date) return true + return ( + typeof val.toDateString === 'function' && + typeof val.getDate === 'function' && + typeof val.setDate === 'function' + ) + } + + typeOfVal = miniKindOf(val) + } + + return typeOfVal +} diff --git a/test/bindActionCreators.spec.ts b/test/bindActionCreators.spec.ts index 5efecb6902..2becf689a8 100644 --- a/test/bindActionCreators.spec.ts +++ b/test/bindActionCreators.spec.ts @@ -77,8 +77,8 @@ describe('bindActionCreators', () => { expect(() => { bindActionCreators(undefined, store.dispatch) }).toThrow( - 'bindActionCreators expected an object or a function, instead received undefined. ' + - 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?' + `bindActionCreators expected an object or a function, but instead received: 'undefined'. ` + + `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?` ) }) @@ -86,8 +86,8 @@ describe('bindActionCreators', () => { expect(() => { bindActionCreators(null, store.dispatch) }).toThrow( - 'bindActionCreators expected an object or a function, instead received null. ' + - 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?' + `bindActionCreators expected an object or a function, but instead received: 'null'. ` + + `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?` ) }) @@ -98,8 +98,8 @@ describe('bindActionCreators', () => { store.dispatch ) }).toThrow( - 'bindActionCreators expected an object or a function, instead received string. ' + - 'Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?' + `bindActionCreators expected an object or a function, but instead received: 'string'. ` + + `Did you write "import ActionCreators from" instead of "import * as ActionCreators from"?` ) }) }) diff --git a/test/combineReducers.spec.ts b/test/combineReducers.spec.ts index 87dc94fb1b..59786a1c84 100644 --- a/test/combineReducers.spec.ts +++ b/test/combineReducers.spec.ts @@ -264,7 +264,7 @@ describe('Utils', () => { createStore(reducer, (1 as unknown) as ShapeState) expect(spy.mock.calls[2][0]).toMatch( - /createStore has unexpected type of "Number".*keys: "foo", "baz"/ + /createStore has unexpected type of "number".*keys: "foo", "baz"/ ) reducer(({ corge: 2 } as unknown) as ShapeState, nullAction) @@ -279,7 +279,7 @@ describe('Utils', () => { reducer((1 as unknown) as ShapeState, nullAction) expect(spy.mock.calls[5][0]).toMatch( - /reducer has unexpected type of "Number".*keys: "foo", "baz"/ + /reducer has unexpected type of "number".*keys: "foo", "baz"/ ) spy.mockClear() diff --git a/test/createStore.spec.ts b/test/createStore.spec.ts index e422c73c43..c9e1143bb7 100644 --- a/test/createStore.spec.ts +++ b/test/createStore.spec.ts @@ -521,6 +521,32 @@ describe('createStore', () => { ) }) + it('throws an error that correctly describes the type of item dispatched', () => { + const store = createStore(reducers.todos) + // @ts-ignore + expect(() => store.dispatch(Promise.resolve(42))).toThrow( + /the actual type was: 'Promise'/ + ) + + // @ts-ignore + expect(() => store.dispatch(() => {})).toThrow( + /the actual type was: 'function'/ + ) + + // @ts-ignore + expect(() => store.dispatch(new Date())).toThrow( + /the actual type was: 'date'/ + ) + + // @ts-ignore + expect(() => store.dispatch(null)).toThrow(/the actual type was: 'null'/) + + // @ts-ignore + expect(() => store.dispatch(undefined)).toThrow( + /the actual type was: 'undefined'/ + ) + }) + it('throws if action type is undefined', () => { const store = createStore(reducers.todos) expect(() => store.dispatch({ type: undefined })).toThrow( @@ -666,15 +692,27 @@ describe('createStore', () => { expect(function () { obs.subscribe() - }).toThrowError(new TypeError('Expected the observer to be an object.')) + }).toThrowError( + new TypeError( + `Expected the observer to be an object. Instead, received: 'undefined'` + ) + ) expect(function () { obs.subscribe(null) - }).toThrowError(new TypeError('Expected the observer to be an object.')) + }).toThrowError( + new TypeError( + `Expected the observer to be an object. Instead, received: 'null'` + ) + ) expect(function () { obs.subscribe(() => {}) - }).toThrowError(new TypeError('Expected the observer to be an object.')) + }).toThrowError( + new TypeError( + `Expected the observer to be an object. Instead, received: 'function'` + ) + ) expect(function () { obs.subscribe({}) From c83b014221196e1c1c6f1a8d63433dd8432de5d0 Mon Sep 17 00:00:00 2001 From: Mark Erikson Date: Fri, 2 Apr 2021 15:42:43 -0400 Subject: [PATCH 4/4] Add quotes around INIT action type in error --- errors.json | 2 +- src/combineReducers.ts | 2 +- src/createStore.ts | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/errors.json b/errors.json index 3130695822..2fac82d961 100644 --- a/errors.json +++ b/errors.json @@ -12,7 +12,7 @@ "10": "Expected the nextReducer to be a function. Instead, received: '", "11": "Expected the observer to be an object. Instead, received: ''", "12": "The slice reducer for key \"\" returned undefined during initialization. If the state passed to the reducer is undefined, you must explicitly return the initial state. The initial state may not be undefined. If you don't want to set a value for this reducer, you can use null instead of undefined.", - "13": "The slice reducer for key \"\" returned undefined when probed with a random type. Don't try to handle or other actions in \"redux/*\" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.", + "13": "The slice reducer for key \"\" returned undefined when probed with a random type. Don't try to handle '' or other actions in \"redux/*\" namespace. They are considered private. Instead, you must return the current state for any unknown actions, unless it is undefined, in which case you must return the initial state, regardless of the action type. The initial state may not be undefined, but can be null.", "14": "When called with an action of type , the slice reducer for key \"\" returned undefined. To ignore an action, you must explicitly return the previous state. If you want this reducer to hold no value, you can return null instead of undefined.", "15": "Dispatching while constructing your middleware is not allowed. Other middleware would not be applied to this dispatch.", "16": "bindActionCreators expected an object or a function, but instead received: ''. Did you write \"import ActionCreators from\" instead of \"import * as ActionCreators from\"?" diff --git a/src/combineReducers.ts b/src/combineReducers.ts index 8ab020ebc1..2de2e55bd8 100644 --- a/src/combineReducers.ts +++ b/src/combineReducers.ts @@ -82,7 +82,7 @@ function assertReducerShape(reducers: ReducersMapObject) { ) { throw new Error( `The slice reducer for key "${key}" returned undefined when probed with a random type. ` + - `Don't try to handle ${ActionTypes.INIT} or other actions in "redux/*" ` + + `Don't try to handle '${ActionTypes.INIT}' or other actions in "redux/*" ` + `namespace. They are considered private. Instead, you must return the ` + `current state for any unknown actions, unless it is undefined, ` + `in which case you must return the initial state, regardless of the ` + diff --git a/src/createStore.ts b/src/createStore.ts index d1bc6abaa2..73b27c1be6 100644 --- a/src/createStore.ts +++ b/src/createStore.ts @@ -114,7 +114,7 @@ export default function createStore< let isDispatching = false /** - * This makes a shallow copy of currentListeners so can use + * This makes a shallow copy of currentListeners so we can use * nextListeners as a temporary list while dispatching. * * This prevents any bugs around consumers calling