Sentry support for Blazor WebAssembly

[PeterDraex]

Problem Statement

This is a feature request for support for Blazor WebAssembly. According to #317, there seems to be at least some level of integration supported, but I couldn't find any installation tutorial. I would love to see support including features like User Feedback Prompt or Tunneling.

Solution Brainstorm

No response

[bruno-garcia]

We have a sample in the repo: https://github.com/getsentry/sentry-dotnet/tree/23be90cd6b57446f7bbfeecc7c5f30eb692999fc/samples/Sentry.Samples.AspNetCore.Blazor.Wasm

But indeed no docs at the time. That said, support is there, it's just .NET running on Wasm (MonoAOT afaik).

User Feedback would require you to call the C# API. If you're using the JS widget, you'd need to do JS interop to pass around the event id. But it should work too.

[krossley]

Can we get some support docs for Blazer Server Side?

[mattjohnsonpint]

@krossley - I opened a new issue specifically for Blazor Server here: #2329

We don't have any specific guidance at the moment. As always, we're open to PRs. Thanks.

[bruno-garcia]

I played a bit during hackweek. Some learnings/ideas:

• [Hackweek] Blazor Wasm SDK #2569

Stuff I explored in the draft PR above

• JavaScript SDK bundled in Sentry.AspNetCore.Blazor
  • Docs would recommend adding the script tag directly, before loading the blazor.wasm.js file. This way Sentry can capture errors loading the .NET runtime. Performance and even Profiling will include time spent on that. And Replay will start recording as early as possible. I explored starting the JS SDK from C#, using the properties in C# to pass values to JS and it was all doable. But we'd be missing out too much.
• Session Replay works pretty well
• Browser performance monitoring. Didn't get C# span data into the JS layer though.
• Download JavaScript SDK during .NET package build
  • Didn't set upload sourcemap tasks though
• Init the .NET SDK with UseSentry on the WebAssemblyHostBuilder. (JS SDK needs to be added by itself)
• Support for dependency injection in Blazor wasm
• Auto registering Sentry.Extensions.Logging to capture errors/breadcrumbs
  • Some exceptions logged via ILogger have the whole stack trace in the message. so TODO is to parse those out of the messages.
• Scope changes in C# propagate to JavaScript
• Set User-Agent to get browser/OS info in Sentry:
• Navigation breadcrumbs (from page A to B)
• Since we include a Crash method in the SDK, the package includes a component with sample errors. Things to consider are: JS calling into C# and vice-versa. Which SDK captures the data? How scope data flows (my experiment has C#->JS since main lang is C# on Blazor).

WebAssembly error monitoring

• Microsoft has great docs, covering different areas where things can go wrong
• The Blazor package could possibly be renamed to WebAssembly. It doesn't have any dependency Blazor per-se. Could be used by Avalonia and Uno Wasm too. Avalonia has .Browser and .Browser.Blazor packages.
• Patching dotnet.wasm to add debug_id worked to some degree. On my tests only in release/published apps. Ideally dotnet adds this OOTB
  • Blazor - WebAssembly build_id section dotnet/runtime#91049
  • @sentry/wasm will not work if wasm url is a blob url sentry-javascript#8259 (comment)
    • In some tests I hit this issue. So with @mitsuhiko's help we added a hack to get a URL by throwing from the module and parsing the stack trace
  • Patching it caused an integrity check to fail. Internet said false turns it off. That resolved it

Blazor Server

Lots to explore here. Since we have decent support with the Sentry.AspNetCore package already, I didn't invest too much time. But some areas:

• Circuit error handling: The SignalR circuit can fail if the component rendering breaks (according to t
• That's tracked here: Support Blazor Server #2329

Performance monitoring

• Performance coming from the JS SDK seems quite rich already. But having insights of what's happning in blazor and on the code the user writes is missing. We could use the JS Interop to call into JS SDK to start/end span for example for blazor component lifecycle stuff (at least the built-in one). Or have a span observers similar to what we have on Scope to pass data from C# to JS.
• We could monkeypatch some framework functions to get auto span for wasm bridge (as proposed by @AbhiPrasad)

Profiling

• We might be able to leverage Sentry.Profiling. At least from .NET 8 if I read some threads online, EventPipe should get some data. Not sure about prod builds
• Browser profiling is likely a good candidate. We can use the JS interop to add some blocks from C# (console.time and console.timeEnd (see this))

[bruno-garcia]

https://twitter.com/davidfowl/status/1701667585522290730

[bruno-garcia]

.NET 8 introduces WasmStripILAfterAOT

[jamescrosswell]

https://twitter.com/davidfowl/status/1701667585522290730

Weird that they separate out .NET and C#... I wonder what the results would look like if those two were grouped together (who is using C# but not .NET??? How could less people be using .NET and C#?).

[bruno-garcia]

How to emit source maps:

• Error hard to debug because of minified JS dotnet/aspnetcore#54555 (comment)

[klemmchr]

Is there any timeline on a proper Blazor SDK? The current situation is not really satisfying since Sentry in Blazor WASM using the existing SDKs misses out on all the cool features like replays and profiling.

[bitsandfoxes]

As a very soft ETA, we would like to be able to support this sometime within the next quarter.