{"id":17915,"library":"redux-user-timing","title":"Redux User Timing Middleware","description":"redux-user-timing is a Redux middleware designed to integrate Redux action dispatching with the browser's User Timing API, enabling performance profiling of Redux applications within tools like Chrome DevTools. The current stable version is `1.0.2`, released in January 2019. The package has seen no significant updates or active development since then, indicating a maintenance state. Its primary differentiator is its straightforward approach to leveraging a native browser API (`performance.mark()` and `performance.measure()`) for performance measurement, specifically marking Redux action lifecycles. It is explicitly intended for development environments only and does not provide advanced profiling features beyond basic action timing.","status":"maintenance","version":"1.0.2","language":"javascript","source_language":"en","source_url":"https://github.com/taehwanno/redux-user-timing","tags":["javascript","redux","redux middleware","performance","profiling","user timing"],"install":[{"cmd":"npm install redux-user-timing","lang":"bash","label":"npm"},{"cmd":"yarn add redux-user-timing","lang":"bash","label":"yarn"},{"cmd":"pnpm add redux-user-timing","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Core dependency for middleware functionality.","package":"redux","optional":false}],"imports":[{"note":"The package exports a default middleware function, not named exports.","wrong":"import { userTiming } from 'redux-user-timing';","symbol":"userTiming","correct":"import userTiming from 'redux-user-timing';"},{"note":"For CommonJS environments, the default export is assigned directly.","wrong":"const { userTiming } = require('redux-user-timing');","symbol":"userTiming (CommonJS)","correct":"const userTiming = require('redux-user-timing');"},{"note":"applyMiddleware is a named export from the 'redux' package.","wrong":"import applyMiddleware from 'redux';","symbol":"applyMiddleware","correct":"import { applyMiddleware } from 'redux';"}],"quickstart":{"code":"import { createStore, applyMiddleware } from 'redux';\nimport userTiming from 'redux-user-timing';\n\n// A minimal reducer for demonstration\nconst rootReducer = (state = { count: 0 }, action) => {\n  switch (action.type) {\n    case 'INCREMENT':\n      return { ...state, count: state.count + 1 };\n    default:\n      return state;\n  }\n};\n\nconst configureStore = initialState => {\n  const middlewares = [];\n\n  // Recommend to add redux-user-timing as a last middleware and only in development.\n  if (process.env.NODE_ENV !== 'production') {\n    middlewares.push(userTiming);\n  }\n\n  const store = createStore(\n    rootReducer,\n    initialState,\n    applyMiddleware(...middlewares)\n  );\n\n  return store;\n};\n\nconst store = configureStore();\n\nconsole.log('Initial state:', store.getState());\nstore.dispatch({ type: 'INCREMENT' });\nconsole.log('State after dispatch:', store.getState());\n\n// In a browser, open DevTools -> Performance tab to see User Timing marks.","lang":"javascript","description":"This example demonstrates how to configure a Redux store with `redux-user-timing` middleware, ensuring it's only active in non-production environments for performance profiling."},"warnings":[{"fix":"Wrap middleware application with `if (process.env.NODE_ENV !== 'production') { middlewares.push(userTiming); }` as shown in the quickstart.","message":"This middleware is explicitly recommended for development environments only. Including it in production builds can introduce unnecessary overhead and potentially expose internal action timings.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Thoroughly test with your specific Redux and React versions. Consider alternative, actively maintained performance profiling tools if encountering issues.","message":"The package has not been actively maintained since January 2019. While it may still function with older Redux versions, compatibility with newer Redux versions (e.g., Redux Toolkit) or advanced React features (like concurrent mode) is uncertain and untested.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-23T00:00:00.000Z","next_check":"2026-07-22T00:00:00.000Z","problems":[{"fix":"Ensure you are using `import userTiming from 'redux-user-timing';` for ESM or `const userTiming = require('redux-user-timing');` for CommonJS.","cause":"Attempting to use `userTiming` without correctly importing it, or using `require` with destructuring.","error":"ReferenceError: userTiming is not defined"},{"fix":"This middleware is designed for browser environments. Ensure it runs in a modern browser context. If running in Node for server-side rendering, conditionally apply it only on the client or mock the performance API.","cause":"Running the middleware in an environment that does not support the User Timing API (e.g., older Node.js versions without polyfills, or extremely minimal browser environments).","error":"TypeError: Cannot read properties of undefined (reading 'mark') or similar errors related to performance API."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}