Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Getting error An unhandled exception has occurred. See browser dev tools for details. Reload ๐Ÿ—™

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.

enter image description here

like image 962
Arun Singh Avatar asked Aug 23 '20 10:08

Arun Singh


People also ask

What happens when an unhandled exception occurs in Blazor?

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.

What happens if a component throws an unhandled exception during prerendering?

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.

How do I handle an exception thrown in the productrepository?

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.

When is a circuit terminated when an unhandled exception occurs?

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.


3 Answers

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;}
like image 108
Noor Alazawi Avatar answered Oct 18 '22 01:10

Noor Alazawi


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!

like image 44
Sheldon Cohen Avatar answered Oct 18 '22 01:10

Sheldon Cohen


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.

like image 28
Rich Armstrong Avatar answered Oct 18 '22 01:10

Rich Armstrong