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.
Getting error An unhandled exception has occurred. See browser dev tools for details. Reload 🗙
Asked Answered
Have you modified the default CSS that comes with a new blazor project? Because you may have removed the classes that hide the error display. Does the application still work despite the error message? If so the CSS is 99% the problem. –
Foundation
Yes, i have deleted default css class –
Vogeley
You deleted the default CSS file entirely? That's your issue then. –
Herv
It's my issue too. An honest mistake since we started with the template. This is a problem solving site where "my issue" can be solved. –
Berns
This is poor design on blazor's part. They should hide that div with inline CSS. Putting that functionality in an external stylesheet that will be modified by users is just asking for trouble. –
Furie
In my case it turned out the main.css was no longer being loaded. Whoops. –
Kareenkarel
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;}
At first clearing cache solved this, but when I added these lines this seems to have fixed it. –
Largehearted
Thank you so much. I did delete this and I also added it back to app.css since I am only using wasm :) –
Jordain
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.
For me clearing cache worked, as I have been making many minor changes which produced this error –
Largehearted
My issue was similar to @Rich Armstrong. Our Blazor application is a WASM app and the IIS environment has https://localhost/blah/blah/Index.
In a file called index.html, which is located in the project under 'wwwroot' folder, there is an XML tag <base href="/" />. The tag needed to be <base href="/blah/blah/" />
where /blah/blah/ is the pathing in IIS.
I've actually had this twice in my blazor server app - very useless error but essentially the webserver crashes - and the app can't connect.
1st time: I was injecting a service, and the service was not in the added in Startup.cs
@inject MyShiftService myShiftService
But I had failed to put Startup.cs
services.AddScoped<MyShiftService>();
2nd time: I was setting a variable (buttonText) in OnInitializedAsync, but that variable was being blocked by an if statement on a url parameter - (so buttonText was not being rendered on the page).
That is probably because you deleted the site.css file that contained the styles to either show or hide the message. You also have to add the reference to the _Host.cshtml. That worked for me.
/* Default Blazor CSS */
#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;
}
.blazor-error-boundary {
background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
padding: 1rem 1rem 1rem 3.7rem;
color: white;
}
.blazor-error-boundary::after {
content: "An error has occurred."
}
In the _Host.cshtml do the following:
<link rel="stylesheet" href="css/site.css" />
This happened to me cleaning up the initial template until I realized it. Hope this helps.
© 2022 - 2024 — McMap. All rights reserved.