MiniProfiler with non-MVC Angular app and WebAPI -- how to get started?

.NET
1

Cross-posted On StackOverflow.

Hi all,

I’m trying to throw MiniProfiler into my current stack. I think I’m mostly setup, but am missing the UI approach and would like recommendations on the best way to proceed.

Current Stack

  • SQL for DB (including MiniProfiler tables)
  • EF 6
  • WebAPI 2 API app
  • Angular 1.x. app for the UI (separate app, no MVC backing it) – I think it’s 1.5.x at this point.

So, the current method of RenderIncludes() isn’t available to me.

What’s the best method to include the JS files and set them up to retrieve the information from the SQL Server storage? I know that the files are included in the UI repo, but I didn’t see docs for explicit configuration.

What I’ve Tried So Far – Web API App

  • Installed the MiniProfiler and MiniProfiler.EF6 packages.

Web.Config – Added Handler

(not sure if this is necessary):

<add name="MiniProfiler" path="mini-profiler-resources/*" verb="*" type="System.Web.Routing.UrlRoutingModule" resourceType="Unspecified" preCondition="integratedMode" />

Added a CORS filter to expose the MiniProfiler IDs to my client app:

public class AddMiniProfilerCORSHeaderFilter : ActionFilterAttribute
{
    public override void OnActionExecuted(HttpActionExecutedContext actionExecutedContext)
    {
        actionExecutedContext.Response.Headers.Add("Access-Control-Expose-Headers", "X-MiniProfiler-Ids");
    }
}

Add that filter as part of startup:

config.Filters.Add(new AddMiniProfilerCORSHeaderFilter());`

In Global.asax, added to Application_Start():

var connectionString = ConfigurationReader.GetConnectionString(Constants.ConfigSettings.CONNECTION_STRING_NAME);

MiniProfiler.Settings.Storage = new SqlServerStorage(connectionString);
MiniProfilerEF6.Initialize();

Update the begin/end requests:

   protected void Application_BeginRequest()
    {
        if (Request.IsLocal || ConfigurationReader.GetAppSetting(Constants.ConfigSettings.USE_PROFILER, false))
        {
            var sessionId = Guid.NewGuid().ToString();
            MiniProfiler.Start(sessionId);
        }
    }

    protected void Application_EndRequest()
    {
        MiniProfiler.Stop();
    }

What I’ve tried so far – client (Angular) App

  • Snagged the UI files from the Github Repo
  • Copied the UI directory to my project’s output

Reference the CSS:

<link rel="stylesheet" href="js/lib/miniprofiler/includes.css" />

Call the JavaScript

  <script async type="text/javascript" 
    id="mini-profiler" 
    src="js/lib/miniprofiler/includes.js?v=1.0.0.0" 
    data-current-id="" 
    data-path="https://localhost:44378/api/profiler/" 
    data-children="true" 
    data-ids="" 
    data-version="1.0.0.0" 
    data-controls="true" 
    data-start-hidden="false" 
    data-trivial-milliseconds="5">
  </script>

Current Status

When I do these things, it looks like it just can’t find the appropriate WebAPI controller to render the result. If I can figure out where that controller is or replicate it (as I’m attempting to do currently) I think I’ll be in business.
Thanks in advance for any help you can provide!