A tuple with the middleware function and a function to get the
TimingCollector instance from the context.
import { createServerTimingMiddleware } from "remix-utils/middleware/server-timing";
const [serverTimingMiddleware, getTimingCollector] = createServerTimingMiddleware();
export const middleware: Route.MiddlewareFunction[] = [serverTimingMiddleware];
export async function loader({ context }: Route.LoaderArgs) {
let collector = getTimingCollector(context);
return await collector.measure("name", "optional description", () => {
return getData();
});
}
Create a middleware that gives you access to a
TimingCollectorinstance, used to collect server timing metrics and report them in the response headers.The reported metrics will be available in the browser's developer tools.