ngx-http-logger

Lightweight Angular HTTP request logger using decorators, interceptors, and HttpContext.

Tracks:

• Request URL
• Request payload
• Response data
• Request execution time

Features

• Decorator-based request tracking
• Angular HttpInterceptor integration
• HttpContext-powered request tagging
• Lightweight setup
• No backend changes required
• Supports standalone Angular apps

Installation

npm install ngx-http-logger

Setup

Register Interceptor

Add provider in app.config.ts

import { provideHttpLogger }
from 'ngx-http-logger';

export const appConfig: ApplicationConfig = {

  providers: [

    provideHttpLogger()

  ]

};

Usage

Add Logger Decorator

import {
  Logger
} from 'ngx-http-logger';

@Injectable({
  providedIn: 'root'
})
export class ApiService {

  constructor(
    public http: HttpClient
  ) {}

  @Logger
  getUsers() {

    return this.http.get(
      'https://jsonplaceholder.typicode.com/users'
    );

  }

}

Console Output

HTTP GET https://jsonplaceholder.typicode.com/users

Request URL:
https://jsonplaceholder.typicode.com/users

Response:
[
  ...
]

Elapsed Time:
203.42 ms

How It Works

The package uses:

• Angular decorators
• HttpContext
• HttpInterceptors

to automatically track decorated HTTP requests.

Only requests from methods using @Logger are tracked.

Notes

Current version is optimized for direct synchronous HttpClient method calls inside decorated methods.

Advanced asynchronous nested request tracking will be added in future versions.

Roadmap

• Request IDs
• Export logs
• Download network sessions
• Retry tracking
• DevTools overlay
• Request grouping
• Persistent logs

License

MIT