A User Timing middleware for Redux to create performance markers for dispatched actions. Remade with TypeScript (Redux v.4).

redux-performance-mark.ts

import { AnyAction, Middleware } from 'redux';

export const userTimingMiddleware: Middleware = () => {
  return next => {
    return <A extends AnyAction>(action: A): A => {
      if (performance.mark === undefined) {
        return next(action);
      }

      performance.mark(`${action.type}_start`);
      const result = next(action);
      performance.mark(`${action.type}_end`);

      performance.measure(
        `${action.type}`,
        `${action.type}_start`,
        `${action.type}_end`,
      );

      return result;
    };
  };
};

Alternative approach:

import { AnyAction, Dispatch, Middleware } from 'redux';

const EMPTY_MIDDLEWARE: Middleware = () => next => action => next(action);

export const userTimingMiddleware: Middleware = (() => {
  if ('performance' in window) {
    return () => (next: Dispatch<AnyAction>) => {
      return <A extends AnyAction>(action: A): A => {
        performance.mark(`${action.type}_start`);
        const result = next(action);
        performance.mark(`${action.type}_end`);

        performance.measure(
          `${action.type}`,
          `${action.type}_start`,
          `${action.type}_end`,
        );

        return result;
      };
    };
  }

  return EMPTY_MIDDLEWARE;
})();