ServiceStack MiniProfiler and SPAs

ServiceStack VS AngularJS
1

Hello,

Is there any guidance about how to incorporate MiniProfiler into a SPA application, all documentation so far only shows usage with MVC.

The reason I ask is that we started a year ago with the very first Angular template then changed some aspects of the code, in particular default.cshtml became index.htm. My hunch is that if I bring our code base up to the current ServiceStack Angular template layout, I might then be able to easily add in the profiler on the server-side rendering of the default page, from there everything should then be bootstrapped and all ajax calls should render.

Thank you,
Stephen

2

There’s only 1 way to embed it in a Razor page, i.e:

@ServiceStack.MiniProfiler.Profiler.RenderIncludes().AsRaw()

But this only logs a snapshot of un-viewed profile responses, you’ll need to refresh the page to view the results of the other ajax calls since. But one strategy is to open a custom page with the profiler enabled then refresh that page to see the results of the new ajax calls from other pages.

3

Off hand I don’t see any support for logging Angular initiated ajax calls, and that is the issue. Need to create an interceptor for the $http service.

4

The Mini Profiler profiles server calls. What’s the $http interceptor going to do?

5

The interceptor will automatically keep the profile tab synchronized.

6

Here’s a very simple implementation and NOT tested.

	/* global angular */
(function () {
	"use strict";

	var app = angular.module('helloApp.controllers', []);

	app.config(['$httpProvider', function ($httpProvider) {

		$httpProvider.interceptors.push(["$q", function ($q) {

			return {
				'response': function (response) {

					if (typeof (MiniProfiler) != 'undefined' && response.config.url.indexOf(".html") < 0) {
						var stringIds = response.headers('X-MiniProfiler-Ids');
						if (stringIds) {
							MiniProfiler.fetchResultsExposed(angular.fromJson(stringIds));
						}
					}

					return response || $q.when(response);
				}
			};

		}]);
	}]);

	app.controller('helloCtrl', ['$scope', '$http',
		function ($scope, $http) {
			$scope.$watch('name', function () {
				if ($scope.name) {
					$http.get('/hello/' + $scope.name)
						.success(function (response) {
							$scope.helloResult = response.Result;
						});
				}
			});

			$scope.testFunction = function () {
				return true;
			};
		}
	]);

})();
7

Cool, that’s an interesting approach, how are communicating with the other tab?

8

@stephenpatten Dear god thank you. I’ve been banging my head on this guy’s post, which seems woefully incomplete. I’ll take it with a major grain of salt, but your $httpProvider config seems to work out of the box!