Redux User Timing Middleware

1.0.2 verified Thu Apr 23 auth: no javascript maintenance

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.

Common errors

error ReferenceError: userTiming is not defined ↓

cause Attempting to use `userTiming` without correctly importing it, or using `require` with destructuring.

fix

Ensure you are using import userTiming from 'redux-user-timing'; for ESM or const userTiming = require('redux-user-timing'); for CommonJS.

error TypeError: Cannot read properties of undefined (reading 'mark') or similar errors related to 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).

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.

Warnings

gotcha This middleware is explicitly recommended for development environments only. Including it in production builds can introduce unnecessary overhead and potentially expose internal action timings. ↓

fix Wrap middleware application with `if (process.env.NODE_ENV !== 'production') { middlewares.push(userTiming); }` as shown in the quickstart.

gotcha 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. ↓

fix Thoroughly test with your specific Redux and React versions. Consider alternative, actively maintained performance profiling tools if encountering issues.

Install

npm install redux-user-timing

yarn add redux-user-timing

pnpm add redux-user-timing

Imports

userTiming

wrong

import { userTiming } from 'redux-user-timing';

correct

import userTiming from 'redux-user-timing';

The package exports a default middleware function, not named exports.

userTiming (CommonJS)

wrong

const { userTiming } = require('redux-user-timing');

correct

const userTiming = require('redux-user-timing');

For CommonJS environments, the default export is assigned directly.

applyMiddleware
wrong
```
import applyMiddleware from 'redux';
```
correct
```
import { applyMiddleware } from 'redux';
```
applyMiddleware is a named export from the 'redux' package.

Quickstart

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.

import { createStore, applyMiddleware } from 'redux';
import userTiming from 'redux-user-timing';

// A minimal reducer for demonstration
const rootReducer = (state = { count: 0 }, action) => {
  switch (action.type) {
    case 'INCREMENT':
      return { ...state, count: state.count + 1 };
    default:
      return state;
  }
};

const configureStore = initialState => {
  const middlewares = [];

  // Recommend to add redux-user-timing as a last middleware and only in development.
  if (process.env.NODE_ENV !== 'production') {
    middlewares.push(userTiming);
  }

  const store = createStore(
    rootReducer,
    initialState,
    applyMiddleware(...middlewares)
  );

  return store;
};

const store = configureStore();

console.log('Initial state:', store.getState());
store.dispatch({ type: 'INCREMENT' });
console.log('State after dispatch:', store.getState());

// In a browser, open DevTools -> Performance tab to see User Timing marks.