Dev exception notifications

[ryanbrandenburg]

Fixes #5476.

The only changes to actual Blazor are in Boot.Server.ts, the rest of it is changes to the templates/samples that users will be able to customize as much as they want.

Below is a snippet of what this looks like in action. A blazorserver template was modified to throw an exception when the Counter button is pressed.

[ryanbrandenburg]

I re-read @SteveSandersonMS's doc on this and realized that I could not relay on the ts changes I made so far to work for both server-side Blazor and client-side Blazor. I'll make the changes to MonoPlatform.ts and test it, then investigate work for Electron.

[SteveSandersonMS]

This looks like a really excellent start.

Do you think you'd be able to add end-to-end tests? If you think it's not clear how to do that (and I agree there are quite a lot of moving parts involved in E2E tests) I'd be happy to walk you through it. Or someone like @pranavkm could do too. Just let me know if you want some pointers!

[SteveSandersonMS]

This is looking great, @ryanbrandenburg!

One final tweak request: I tried it out and would like to suggest a slight modification to the CSS. This is mainly to tweak the padding and border. Here's the updated CSS:

#error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

It makes it look like this.

Would it be OK to apply that to each of the templates?

[SteveSandersonMS]

Excellent stuff. I've requested a small change to the CSS, but otherwise I think this looks solid!

[mrpmorris]

Could #error-ui be something like #blazor-error-ui to avoid name conflicts with developer apps?

[SteveSandersonMS]

Could #error-ui be something like #blazor-error-ui to avoid name conflicts with developer apps?

I would be fine with that. It probably is a good idea. Would you be interested in submitting a PR? It should be pretty simple and I think we'd be able to merge it straight away as long as it's based on the release/3.1 branch and doesn't change other things at the same time.

cc @ryanbrandenburg @mkArtakMSFT @danroth27 for any opinions.

[adrianwright109]

I have submitted PR #14887 to rename error-ui to blazor-error-ui.