Neal.Shan Neal.Shan - 4 months ago 27
AngularJS Question

how to monitor performance for AngualrJS+spring-boot app

I was working on AngualrJS+spring-boot app. we will have to show the performance per page to user, like how long does it take a page to load all data?


  1. any plugins for this? not found yet

  2. the part that block us is, one request was combined with multi ajax calls, how to calculate all of those calls and send it back, I mean like chrome's network monitor, shows us the exact time to load.


Answer

I did some research and found this http://www.bennadel.com/blog/2777-monitoring-http-activity-with-http-interceptors-in-angularjs.htm

And I use the interceptor to create my own profiler:

<!--some html-->
<div>{{profiler.time}}</div>

angular.module('app')
    .run(function ($rootScope){
        $rootScope.$on('$stateChangeStart', function (event) {
            Profiler.reset();
            $rootScope.profiler = Profiler;
        });
    })
    .config(function ($httpProvider){
        $httpProvider.interceptors.push('profilerInterceptor');
    })
    .factory('profilerInterceptor', function ($q, Profiler) {
        return {
            request: function (request) {
                if (Profiler.startTime == null) {
                    Profiler.startTime = new Date();
                }
                return request;
            },
            response: function (response) {
                Profiler.refresh();
                return response;
            }
        };
    })
    .service('Profiler', function () {
        return {
            startTime: null,
            endTime: null,
            time: 0,
            reset: function () {
                this.startTime = null;
            },
            refresh: function () {
                this.endTime = new Date();
                this.time = (this.endTime - this.startTime) / 1000;
            }
        };
    });