If you want to customize your Axios configuration and utilize interceptors, here's a method to measure request duration:
import { AxiosError, AxiosInstance, AxiosRequestConfig, AxiosResponse, InternalAxiosRequestConfig } from 'axios';
import { getBenchmarkMiliseconds } from 'someBenchmarkingLib';
interface AxiosRequestConfigWithMetadata<T = unknown> extends InternalAxiosRequestConfig<T> {
metadata?: {
startTime?: number;
endTime?: number;
};
}
interface AxiosResponseWithMetadata<T = unknown, D = unknown> extends AxiosResponse<T, D> {
config: AxiosRequestConfigWithMetadata<D>;
}
interface AxiosErrorWithMetadata<T = unknown, D = unknown> extends AxiosError<T, D> {
config: AxiosRequestConfigWithMetadata<D>;
}
export interface AxiosInterceptorProps {
axiosClient: AxiosInstance;
}
export const addLoggingInterceptors = (props: AxiosInterceptorProps) => {
props.axiosClient.interceptors.request.use(
(requestConfig: AxiosRequestConfigWithMetadata) => {
requestConfig.metadata = requestConfig.metadata || {};
requestConfig.metadata.startTime = getBenchmarkMiliseconds();
return requestConfig;
},
(error) => {
return Promise.reject(error);
},
);
props.axiosClient.interceptors.response.use(
(response: AxiosResponseWithMetadata) => {
const startTime = response.config.metadata?.startTime;
// do something here
return response;
},
(error: AxiosErrorWithMetadata) => {
const startTime = error?.config?.metadata?.startTime;
// do something here
return Promise.reject(error);
},
);
};
Edit 1:
If you are using later versions of axios (e.g., axios=1.7.2), you may need to adjust the type like this:
interface AxiosRequestConfigWithMetadata<T = unknown> extends AxiosRequestConfig<T> {
headers: AxiosRequestHeaders;
metadata?: {
startTime?: number;
endTime?: number;
};
}