error laptop

The default UI displayed to the user when Blazor throws an exception, is a box stuck to the bottom of the screen with little to it. So little in fact that it can be missed.

blazor exception


Due to this, when I came across the design Telerik have used to spruce it up, I immediately grabbed the HTML & CSS to enable my UI to look the same.

<div id="blazor-error-ui" class="col-11 col-md-3 col-sm-5 text-center">
		<environment include="Staging,Production">
			An error has occurred. This application may no longer respond until reloaded.
		</environment>
		<environment include="Development">
			An unhandled exception has occurred. See browser dev tools for details.
		</environment>
    <div><a href="" class="reload">Reload</a></div>
	</div>
#blazor-error-ui {
	display: none;
	padding: .75rem 1.25rem;
	position: fixed;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	z-index: 999999;
	color: #856404;
	background-color: #fff3cd;
	box-shadow: 0px 7px 6px 0px hsl(0deg 0% 0% / 20%);
}

	#blazor-error-ui > div {
		padding: 1rem 0 .3rem 0;
	}

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

	#blazor-error-ui .reload {
		padding: .5rem;
		color: #212529;
		background-color: #ffc107;
		text-decoration: none;
	}
blazor error ui styled

Next I wanted to work on the reconnect modal. This turned out to be quite a lot more work. There is no HTML components for this in the _Host.cshtml file like there is for the #blazor-error-ui component. It is all added dynamically. There is one top level class though that we can use, with an id of #components-reconnect-modal this allowed me to add the same styling used above to style the reconnects modal.

This ended up being more difficult due to the spinner that is added only with the text ‘Attempting to reconnect to server: 1 of 8.’ Then after a little bit the text changes to say ‘Could not reconnect to the server. Reload the page to restore functionality.’ When this appears the spinner gets a display: none added to it.

Furthermore since the whole modal is dynamically added, I couldn’t add a div around the spinner to have a background added. I ended up with a work around by adding a ::before to the #components-reconnect-modal with the background set.

One last issue I had to give up on; since the spinner is disabled by changing display: inline-block to display: none I had no way of tapping into the change to know when to remove the ::before. This means that when the text changes and the spinner is removed, your left with a bit of padding on the top of the text.

Not such an issue, but it would be nice to eventually find a solution.

I attempted to add the ::before to the spinner itself which would thereby automatically disappear when the spinner’s display was set to none.
The issue with this was, the spinner is as expected spinning. This causes the ::before also to spin. I couldn’t work out how to stop this.

Here is the final CSS for the #components-reconnect-modal:

#components-reconnect-modal {
	display: flex !important;
	opacity: 1 !important;
	background-color: rgb(255 255 255 / 80%) !important;
}

	#components-reconnect-modal::before {
		content: '';
		width: 300px;
		height: 65px;
		background: #fff3cd;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		display: block;
	}

	#components-reconnect-modal h5 {
		margin-top: 50px !important;
		padding: .75rem 1.25rem;
		width: 300px;
		position: fixed;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 1050;
		color: #856404;
		background-color: #fff3cd;
		box-shadow: 0px 10px 10px 0px hsl(0deg 0% 0% / 20%);
	}

	#components-reconnect-modal div {
		border-color: rgb(133 100 4) rgb(212 188 118) rgb(230 218 178) !important;
		margin: auto;
		z-index: 1050;
	}

	#components-reconnect-modal h5 a {
		color: #092464 !important;
	}
#components-reconnect-modal

Notice the padding on top of the text when the spinner isn’t displayed. It will have to do for now, maybe one day we’ll find a work around.

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.