A tuple with the middleware function and a function to get the
TimingCollector
instance from the context.
import { unstable_createServerTimingMiddleware } from "remix-utils/middleware/server-timing";
const [serverTimingMiddleware, getTimingCollector] = unstable_createServerTimingMiddleware();
export const unstable_middleware = [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
TimingCollector
instance, 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.