I'm slightly confused about how blazor-error-ui works in practice. I understand that it's hidden by default because of CSS (via display: none), but I can't seem to get it to appear by causing errors in the application.

According to the Blazor docs:

The blazor-error-ui element is normally hidden due to the presence of the display: none style of the blazor-error-ui CSS class in the site's stylesheet [...] When an error occurs, the framework applies display: block to the element.

Emphasis mine.

The docs say that an error should cause the blazor-error-ui div to have its display property set to block, but throwing an exception takes me to an developer exception page, and doesn't actually display the div at all. If I set the environment to Release, it takes me to the /Error page, instead.

So, when does the blazor-error-ui div actually get shown? When Blazor itself has an internal error?

CodePudding user response：

As I know the developer exception page shouldn't be used in production mode so for this purpose blazor-error-ui may be used in Blazor Application

In your case exception redirects you to developer exception page so to see blazor-error-ui div block you should disable developer exception page

CodePudding user response：

I won't mark this as accepted, because I couldn't find an official source for this, and my own testing yielded mixed results so far.

It seems like errors that occur within events can trigger blazor-error-ui, but those thrown from page lifecycle methods don't.

For example:

Clicking on a <button> element that has an @onclick=[...] method defined that throws an exception causes blazor-error-ui to appear.

However, throwing an exception directly from a @page's lifecycle methods (i.e. OnInitializedAsync()) appear to not trigger blazor-error-ui.

I'm unsure if this is intended behavior or not, since the docs don't seem to mention this.