Getting error An unhandled exception has occurred. See browser dev tools for details. Reload

user_3354710 0
Viewed 16118

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

blazor-server-side blazor
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;}
user_136638690

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!

user_23449140

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.

user_3578860
Related