Hi I am working on Blazor server side and getting "An unhandled exception has occurred. See browser dev tools for details. Reload ๐" message. i tried to see the console but nothing is there. Attached screen of console.
If an unhandled exception occurs, the exception is logged to ILogger instances configured in the service container. By default, Blazor apps log to console output with the Console Logging Provider.
If a component throws an unhandled exception during prerendering, for example, during a lifecycle method or in rendering logic: In Blazor Sever apps, the exception is fatal to the circuit. In prerendered Blazor WebAssembly apps, the exception prevents rendering the component. The exception is thrown up the call stack from the ComponentTagHelper.
An exception thrown in the ProductRepository.GetProductByIdAsync method is handled by a try-catch statement. loadFailed is set to true, which is used to display an error message to the user. The error is logged.
A circuit is terminated when an unhandled exception occurs for the following reasons: 1 An unhandled exception often leaves the circuit in an undefined state. 2 The app's normal operation can't be guaranteed after an unhandled exception. 3 Security vulnerabilities may appear in the app if the circuit continues.
Actually I had the same problem but the solution is with site.css it's contain some lines you need to add it to your css file
#blazor-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;}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;}
it's not an exception but by removing or not including the css/site.css
file you removed the styles that hide the error message div.
The #blazor-error-ui
defaults to display: none
so by not including or removing it, you're simply just showing the div.
If you include the #blazor-error-ui
and #blazor-error-ui .dismiss
sections, you should be fine, if you didn't want to include the css/site.css file that was generated with your project. You mentioned you deleted it, here is what mine looks like for a new default project:
@import url('open-iconic/font/css/open-iconic-bootstrap.min.css');
html, body {
font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
a, .btn-link {
color: #0366d6;
}
.btn-primary {
color: #fff;
background-color: #1b6ec2;
border-color: #1861ac;
}
.content {
padding-top: 1.1rem;
}
.valid.modified:not([type=checkbox]) {
outline: 1px solid #26b050;
}
.invalid {
outline: 1px solid red;
}
.validation-message {
color: red;
}
#blazor-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;
}
#blazor-error-ui .dismiss {
cursor: pointer;
position: absolute;
right: 0.75rem;
top: 0.5rem;
}
Best of luck!
I had almost the same problem, but not because I deleted per se the two #blazor-error-ui
rules cited in Noor's response. Wanting to use the same components for both server- and WASM-based versions of my app, I initially split the (server-based) app into two projects, one bare-boned with Pages/_Host.cshtml
and a few other critical files, the other project with everything elseโincluding all CSS files. The symptoms described in the original post appeared, but only when the user switched languages and only momentarily.
My remedy was to create a separate CSS file with the two #blazor-error-ui
rules, name it Host.css
, and place it in wwwroot/css
of the bare-boned project. Then I added the following line to the <head>
element of _Host.cshtml
:
<link rel="stylesheet" href="css/Host.css" />
(The name and location of the new CSS file aren't important, as long as they're in the project with _Host.cshtml
and the <link>
's href
attribute correctly identifies the file.)
Of course, this approach would also work with a single-project app, allowing you to change or remove other CSS files with reckless abandon.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With