Blazor support

[RemiBou]

Hi,

I would like to work on Blazor support for miniprofiler. Before anything : are you interested by this ? I can work on my side but it might be better here.

Here are the thing I would like to do

• start with blazor client side
• create a component that renders miniprofiler
• display server timings
• display timing gathered in blazor app
• add automatic timings for rendering, event handler
• save client side timing to server
• handle blazor server side

If this fit in this repo : do you think I should translate all the typescript code to blazor ? It'll force the repo to maintain 2 version (ts and razor) but it'll remove any need for jquery.

What do you think ?

[NickCraver]

Hey there! I appreciate the interest for sure :)

I'm not sure translating the client-size to Blazor makes much sense - the current UI can be rendered in Blazor since it can run the current script, we may be missing a few bits to rig it up (some extensibility) but that shouldn't be a huge change. By contrast, moving the client to Blazor for everyone would be extremely heavy, going from ~45KB of payloads sent to the client to many megabytes (Blazor has a huge base cost).

I think the appropriate path here is to run the JavaScript in a Blazor call, just need to hook up the piping - and much more interesting possibly is running the profiler itself in Blazor and rendering there for client-side things - I think there's a lot we can do there.

On the side: I'm not against removing jQuery as a dependency at this point (dropping support for Internet Explorer 11 basically), but that should be separate fro the Blazor bits. I planned to maybe tinker on this over the holiday breaks here. It'd use raw browser APIs instead - we're just not doing that much, so I want to see what it's like and what the payload/complexity wins are...I am not convinced (until doing it) that it's necessarily the right path. Need to explore to find out.

[RemiBou]

All right. I'll create a jsInterop wrapper around miniprofiler and add profiling in blazor.

The jQuery removal can be done in a totally different project.

[NickCraver]

I got bored and am tinkering with #442 - it's totally unrelated to Blazor but something I wanted to try and this was motivation. I'm going to diff and see what IE 11 will take later, just wanted to give a heads up: jQuery removal won't affect the overall API here, it's all internal.

[RemiBou]

I have a POC (https://github.com/RemiBou/dotnet) :

• I use inlined css and js, so I can get scripts from MiniProfiler.dll ressources because Blazor can be running only client-side and we are already downloading the dll with the js and css inside so more network call would be efficient.
• I use an implementation of IAsyncProfilerProvider for calling MiniProfiler.showButton with the profiler content when Stop is called.
• I had to create class for the serialization because Blazor JSInterop uses System.Text.Json and MiniProfiler properties are decorated with DataAnnotation attributes which are ignored by System.Text.Json (Blazor Json serialization can't be changed)
• I had to create a temporary list of unhandled MiniProfiler because I can't be sure that at a given time, the miniprofiler js is initialized.
• I only change one line in the typescript, the one that fixes the js date.

My problem being that we need to create Profiler by hand because I can't find a good way for creating Profiler :

• The renderer is not created via DI and the instances are not publicly available so I can't create a decorator around it that would create a profiler for every event handler
• Then I thought I could create Profiler when there is none available and display it when the root timing is Stopped. But I can't do that : StepImpl is internal so I can't override it for returning my custom Timing implementation.

I think my only solution would be to create a new MiniProfiler extension method that would create the profiler if none available, and close it when the root timing is closed.

Maybe you have an idea or a suggestion about which way I should go.

[RemiBou]

@NickCraver I have a better idea : instead of trying (fighting) to find sowehere where I can create a profiler, I'll add a button "Start Profiler" and "Stop Profiler" to the UI.

[RemiBou]

@NickCraver I managed to do some work on this (https://github.com/RemiBou/dotnet, there is sample), so far :

• Add start/stop button for recording client-side profiling information
• Display client-side Profiler
• Display client timings when there is no ASPNET Core backend
• Measure Blazor component rendering
• Display client-side MiniProfiler step

Here is my todo list : https://trello.com/b/455mSgsl/miniprofilerblazor.

The problem I met :

• There is no way to profile rendering (like you do with Razor in MVC) as the Renderer instance is not publicly accessible, and there is no hook available
• Mono implementation removes all the call to Diagnostic API (https://github.com/mono/mono/issues/18153) and like the Renderer there is no hook available for injecting a deocrator. So I can't profile http call on .net side and need to rely on you override of fetch. But this prevents the displaying of client and server profiling sessions side by side.
• I needed to create internal class copying Profiler and Timings because JSInterop uses System.Text.Json and the classes in MiniProfiler uses DataAnnotation and Newtonsoft.Json
• MiniProfiler does not get profiling information from WebSocket (from my understanding), so for server side Blazr I will still rely on JSInterop for displaying sessions.

Now I have a question : should I move forward ? There is already profiling tools in the browser and I can create API (like here with the Time API) that will push information to these tools.

Do you think there is any added value in my work ?

[Bouke]

I'd be interested in better support for Blazor Server. Currently everything done within Blazor is logged in a single session /_blazor with a duration of however long that Blazor session took. It doesn't give me any details to investigate which database queries were in response to what action was performed, or component lifecycle events. Blazor Server is quite different from your traditional request/response messaging, as it more closely resembles a client-server model. I'm not familiar enough with the Blazor code to identify hooks that could be hooked into (if any?). Ideally the profiling report would show a breakdown per user-action, similar to the request/response model.

[alexandrejobin]

Is there any news about Blazor support? I miss so much MiniProfiler since we have decided to go Blazor Server!