Support axios >= 1.3.0

[simenflatby]

trafficstars

Is your feature request related to a problem? Please describe. As of axios 1.3.0, there is a breaking change in the use of request interceptors (introduced in https://github.com/axios/axios/pull/5486) that is not compatible with the exported requestLogger of this lib.

Versions

• axios: 1.3.0
• axios-logger: 2.6.2

Describe the solution you'd like Add support for the breaking change so that axios >= 1.3.0 can be used with this lib.

Additional context To reproduce:

1. Checkout https://github.com/simenflatby/issue-report_axios-logger_1
2. npm i
3. npm run build

[dan-sherwin]

Workaround that worked for me (TypeScript) until a proper patch is made:

axios.interceptors.request.use((internalrequest: InternalAxiosRequestConfig) => {
  const headers = internalrequest.headers;
  const request: AxiosRequestConfig = {
    ...internalrequest,
  };
  const logrequest = AxiosLogger.requestLogger(request);
  internalrequest = {
    ...logrequest,
    ...{ headers: headers },
  };
  return internalrequest;
}, AxiosLogger.errorLogger);

[hg-pyun]

I think I need to think about 1.3.0. I will think about it so that I can quickly apply for this part. Thank you.

[tibbe]

1.2.6 doesn't seem to work either:

Argument of type '(request: AxiosRequestConfig<any>, config?: RequestLogConfig | undefined) => AxiosRequestConfig<any>' is not assignable to parameter of type '(value: InternalAxiosRequestConfig<any>) => InternalAxiosRequestConfig<any> | Promise<InternalAxiosRequestConfig<any>>'.

when doing

axiosInstance.interceptors.request.use(
  AxiosLogger.requestLogger,
  AxiosLogger.errorLogger,
);

[hg-pyun]

https://github.com/hg-pyun/axios-logger/pull/136

[simenflatby]

#136

Thanks @hg-pyun 🙏

I have tested this with:

• axios: 1.3.0 -> 1.4.0
• axios-logger: 2.6.2 -> 2.7.0
• typescript: 4.9.5 -> 5.1.6

I still get the same build error.

Steps to reproduce:

1. Clone https://github.com/simenflatby/issue-report_axios-logger_1
2. Checkout branch axios-1.4.0-and-axios-logger-2.7.0
3. npm i
4. npm run build

[gvanderclay]

@hg-pyun Can this issue be closed? I tested this on 2.7.1 and I now have no type issues!

[simenflatby]

@hg-pyun Can this issue be closed? I tested this on 2.7.1 and I now have no type issues!

@gvanderclay Still same problem with 2.7.1. Pushed a new branch axios-1.3.0-and-axios-logger-2.7.1 to the repo mentioned in https://github.com/hg-pyun/axios-logger/issues/124#issuecomment-1661824558 if you want to have a look.

[gvanderclay]

@simenflatby, I've tested with axios 1.6.7 and axios-logger 2.7.1 and am no longer encountering the issue. If there's a specific need to ensure compatibility with axios version 1.3.0, the problem seems to have been resolved.

[simenflatby]

@simenflatby, I've tested with axios 1.6.7 and axios-logger 2.7.1 and am no longer encountering the issue. If there's a specific need to ensure compatibility with axios version 1.3.0, the problem seems to have been resolved.

@gvanderclay Thanks for coming back to me. I observe the same problem for 1.6.7. It might ofc. be something wrong with the minimal example I'm testing with, but I do not have the time at the moment to investigate. If you want to have a look, I have pushed a new branch axios-1.6.7-and-axios-logger-2.7.1.

git clone [email protected]:simenflatby/issue-report_axios-logger_1.git
cd issue-report_axios-logger_1
git checkout axios-1.6.7-and-axios-logger-2.7.1
npm ci
npm run build

[gvanderclay]

@simenflatby Upon revisiting your code, I realized the problem arises when the axiosRequestConfig is being passed through a wrapping function before being used with requestLogger. To resolve the TypeScript error during the build process, you can directly use the requestLogger and responseLogger as interceptors without the additional wrapping function:

import axios, { AxiosInstance, AxiosRequestConfig } from 'axios';
import { requestLogger, responseLogger } from 'axios-logger';

const axiosRequestConfig: AxiosRequestConfig = {};

const axiosInstance: AxiosInstance = axios.create(axiosRequestConfig);

axiosInstance.interceptors.request.use(requestLogger);
axiosInstance.interceptors.response.use(responseLogger);

This should fix the type mismatch error. I apologize for not catching this detail in your initial code example. Please give this a try and let me know if it resolves the issue on your end.

[gvanderclay]

@simenflatby, I also want to add that if the use of a wrapper function for the axiosRequestConfig is necessary for your use case, you can prevent build errors by using the correct internal type. If you use InternalAxiosRequestConfig instead of AxiosRequestConfig in the wrapper function's signature to match the expected type for the interceptor, the build will succeed:

import axios, {
  AxiosInstance,
  InternalAxiosRequestConfig,
} from 'axios';
import { requestLogger } from 'axios-logger';

const axiosRequestConfig: InternalAxiosRequestConfig = {};

const axiosInstance: AxiosInstance = axios.create(axiosRequestConfig);

const axiosRequestLogger = (
  config: InternalAxiosRequestConfig
): InternalAxiosRequestConfig => requestLogger(config);

axiosInstance.interceptors.request.use(axiosRequestLogger);

Notice that InternalAxiosRequestConfig is used here instead of AxiosRequestConfig. This small change aligns with the expected parameter type for axios interceptors and should eliminate the build error.

[simenflatby]

@gvanderclay Nice! I remember trying this approach when I first reported the issue, but it did not work then. Forgot about that earlier Today, but I have tested it now and it works. It was fixed as of 2.7.1 (did not work in 2.7.0).

Closing. Fixed by https://github.com/hg-pyun/axios-logger/pull/147.

[gvanderclay]

@simenflatby Glad I could help!