Get total response time of multiple api calls on one page in angular

Question

How do I get total response time of all api calls on one page? I have created interceptor when I have single API call, below is code for interceptor:

httpconfig.interceptor.ts:

import { Injectable } from '@angular/core'; 
import { HttpRequest, HttpHandler, HttpEvent, HttpInterceptor, HttpErrorResponse, HttpResponse } from '@angular/common/http'; 
import { Observable, throwError } from 'rxjs'; 
import { tap } from "rxjs/operators"; 
import { Router } from '@angular/router';

@Injectable() 
export class TokenInterceptor implements HttpInterceptor {

  constructor(private router: Router, private perfromancetesting: PerformancetestService) { }

  intercept(request: HttpRequest<any>, next: HttpHandler): Observable<HttpEvent<any>> {

    request = request.clone({
      headers: request.headers.set('startTimestamp', startTimestamp.toString())
    });

    const startTime = Date.now();
    return next.handle(request).pipe(tap((event: HttpEvent<any>) => {
      if (event instanceof HttpResponse) {
          if(event.status === 200) {
            let elapsedTime = Date.now() - startTime;
            this.perfromancetesting.setTime(startTime, Date.now(), elapsedTime, event.url);
            const message = "Page load completed in " + elapsedTime + " ms";
            this.logDetails(message);
        }
      }
    }, (err: any) => {
      if (err instanceof HttpErrorResponse) {
        if (err.status === 401) {
          // redirect to the login route
          // or show a modal
        }
      }
    }));   
}  

 private logDetails(msg: string) {
    console.log(msg);   
   } 
}

performancetesting.service.ts:

import { Injectable } from '@angular/core';
import { Observable } from 'rxjs';

@Injectable({
  providedIn: 'root'
})

export class PerformancetestService {

  responseTimeArray = [];

  constructor() { }

  setTime(start, end, total, url) {
    this.responseTimeArray.push({ starttime: start, endtime: end, totaltime: total, url: url });
  }

  getTime() {
    return this.responseTimeArray;
  }

}

home.component.ts:

constructor(private perfromancetesting: PerformancetestService) {
   this.perfromancetesting.responseTimeArray = [];
}

ngAfterViewInit() {
    let pageLoadTime = this.perfromancetesting.getTime();
    console.log("Home: ", pageLoadTime);
}

in console, I received like below:

Home:[]
     0: {starttime: 43243, endtime: 4545, totaltime: 5210, url: ''}
     1: {starttime: 4152, endtime: 6396, totaltime: 7854, url: ''}

when I console length, it is 0(zero).

Issue: I can see response time in console for the API calls, but on some page I have more than one API calls, how can I console it at once?

Also, I have to show response time in front-end. Any help will be appreciated.

this can help https://stackoverflow.com/questions/32460602/array-shows-0-as-length-when-it-has-elements-in-it — Tarun Rawat, May 06 '20 at 14:03

score 0 · Answer 1 · answered May 06 '20 at 06:09

You could create a shared object to summarize the values

@Injectable() 
export class Collector {
     addTime(time) {
         this.all_time+=time;
         this.all_time_tr.next(this.all_time);
     }
     getTime(): number;
     reset();
     getCurrentTime(): Observable<number>   <<< for runtime observation
     {
        return this.all_time_rt;
     }
}

But the problem would be:

Could you identify when you need to reset /when the loading of new page started?
How many calls you need to calculate/ when you need to stop collecting and show the result
If you do not need the final number but happy with runtime version - use observable interface for subscription from your UI component

Get total response time of multiple api calls on one page in angular

1 Answers1