better error message by Kelvin-Macapagal · Pull Request #167 · dotnet/apisof.net

Kelvin-Macapagal · 2026-07-27T14:30:46Z

This pull request improves error handling and user experience by providing a more user-friendly and consistent error message across the application. It introduces a custom error boundary for Blazor components, updates the error page and UI messages, and adds styling for the new error presentation.

Error handling and user experience improvements:

Added an <ErrorBoundary> to App.razor to catch unhandled exceptions in Blazor components, displaying a friendly error message within the main layout (src/apisof.net/App.razor). [1] [2]
Updated the error page to use the new friendly error message and removed technical details from the user-facing error display (src/apisof.net/Pages/Error.cshtml).
Changed the production error message in the Blazor error UI to match the new friendly error text (src/apisof.net/Pages/_Host.cshtml).

Styling updates:

Added new CSS styles for the .friendly-error class and its heading to ensure consistent and prominent display of error messages (src/apisof.net/wwwroot/css/site.css).

Kelvin-Macapagal · 2026-07-27T14:31:48Z

danzhu54 · 2026-07-27T19:00:07Z

Looks great let's update the colors to be more consistent:
background: rgb(233, 236, 239)
text color: rgb(33, 37, 41)

and we can remove the date near the bottom on this page

danzhu54 · 2026-07-29T00:23:50Z

    justify-content: center;
    text-align: center;
    padding: 2rem;
+    background-color: rgb(233, 236, 239);


This is already used as #e9ecef by .section-row and .syntax-view
Let's extract it into a variable to reuse

danzhu54 · 2026-07-29T00:32:48Z

-    and restarting the app.
-</p>
+<section class="friendly-error" role="alert" aria-live="assertive">
+    <h1>Oops we couldn't process your request</h1>


nit: grammar

Suggested change

<h1>Oops we couldn't process your request</h1>

<h1>Oops, we couldn't process your request.</h1>

danzhu54 · 2026-07-30T22:09:57Z

+    text-align: center;
+    padding: 2rem;
+    background-color: var(--dotnet-surface-subtle);
+    color: rgb(33, 37, 41);


Let's convert this to a hex value

Suggested change

color: rgb(33, 37, 41);

color: var(--dotnet-text-primary);

danzhu54 · 2026-07-30T22:15:57Z

+.layout-main:has(.friendly-error) + hr + .container-fluid[role="complementary"] {
+    display: none;
+}
+
+.layout-main:has(.friendly-error) {
+    background-color: var(--dotnet-surface-subtle);
+}
+
+.page-shell:has(.friendly-error) {
+    background-color: var(--dotnet-surface-subtle);
+}
+
+.layout-main:has(.friendly-error) + hr {
+    display: none;
+}
+


Make the surface/text tokens theme-aware at :root rather than adding a second .friendly-error block inside a dark media query

Suggested change

.layout-main:has(.friendly-error) + hr + .container-fluid[role="complementary"] {

display: none;

}

.layout-main:has(.friendly-error) {

background-color: var(--dotnet-surface-subtle);

}

.page-shell:has(.friendly-error) {

background-color: var(--dotnet-surface-subtle);

}

.layout-main:has(.friendly-error) + hr {

display: none;

}

.page-shell.is-error-page,

.page-shell.is-error-page .layout-main {

background-color: var(--dotnet-surface-subtle);

}

.page-shell.is-error-page hr,

.page-shell.is-error-page .container-fluid[role="complementary"] {

display: none;

}

danzhu54 · 2026-07-30T22:16:47Z

    display: block;
    font-size: larger;
-    background-color: #e9ecef;
+    background-color: var(--dotnet-surface-subtle);


Suggested change

background-color: var(--dotnet-surface-subtle);

background-color: var(--dotnet-surface-code);

danzhu54 · 2026-07-30T22:17:56Z

Suggested change

danzhu54 · 2026-07-30T22:19:06Z

Delete redundant overrides

Suggested change

danzhu54 · 2026-07-31T17:08:21Z

src/apisof.net/wwwroot/css/site.css — lines 56–70 (select the whole range of the four :has rules)

Now that .page-shell.is-error-page is in, these :has() rules are redundant. Note is-error-page isn't set anywhere yet, so this must land with the layout change in comment 3 or the error page loses its styling.

src/apisof.net/wwwroot/css/site.css — lines 77–80

These are descendant selectors, so they'd hide every <hr> and complementary container inside the error page, not just the layout separator. The :has version scoped it via +. Use the child combinator:

.page-shell.is-error-page > hr,
.page-shell.is-error-page > .container-fluid[role="complementary"] {
    display: none;
}

src/apisof.net/Shared/MainLayout.razor — line 3

This file isn't in the diff, so post as a general PR comment (or add the file to the PR first).

is-error-page isn't applied anywhere in the repo — the only occurrences are in site.css. Wire it up:

<div class="page-shell @(IsErrorPage ? "is-error-page" : null)">
Plus in the @code block:

C#
[CascadingParameter(Name = "IsErrorPage")]
public bool IsErrorPage { get; set; }
And wrap the ErrorContent LayoutView in App.razor with <CascadingValue Name="IsErrorPage" Value="true">.

src/apisof.net/App.razor — line 17

The grammar fix from the earlier review was applied to Error.cshtml but not here:

                <h1>Oops, we couldn't process your request.</h1>
_Host.cshtml has a third copy with the same inconsistency.

General PR comment

Pages/Error.cshtml sets no layout, so it never renders .page-shell — neither the :has rules nor .is-error-page apply there. Only App.razor's ErrorBoundary path goes through MainLayout. Is the bare .friendly-error section sufficient styling for that page?

danzhu54 · 2026-08-10T21:16:02Z

+    background-color: var(--dotnet-surface-subtle);
+}
+
+    .page-shell.is-error-page > hr,


nit: indent

Suggested change

.page-shell.is-error-page > hr,

.page-shell.is-error-page > hr,

danzhu54

The dark-mode a/a:link/a:visited override (lines 405–410) should be deleted but is still present.
The "redundant overrides" (originally ~lines 330–333, the .syntax-view .reference* block) should also be deleted.

better error message

3a495d5

adjust color

3d7fb35

danzhu54 reviewed Jul 29, 2026

View reviewed changes

pr review

df209c6

danzhu54 reviewed Jul 30, 2026

View reviewed changes

Comment thread src/apisof.net/wwwroot/css/site.css

danzhu54 reviewed Jul 30, 2026

View reviewed changes

Comment thread src/apisof.net/wwwroot/css/site.css

danzhu54 reviewed Jul 30, 2026

View reviewed changes

Comment thread src/apisof.net/wwwroot/css/site.css Outdated

Comment on lines 405 to 408

danzhu54 Jul 30, 2026

Copy link
Copy Markdown

Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change

danzhu54 reviewed Jul 30, 2026

View reviewed changes

applied pr review

9a71d97

pr review

cca7822

danzhu54 reviewed Aug 10, 2026

View reviewed changes

danzhu54 requested changes Aug 10, 2026

View reviewed changes

pr review

925eb25

danzhu54 approved these changes Aug 17, 2026

View reviewed changes

danzhu54 merged commit 4c14f2b into main Aug 17, 2026
5 checks passed

danzhu54 deleted the better-error-page branch August 17, 2026 21:41

	<h1>Oops we couldn't process your request</h1>
	<h1>Oops, we couldn't process your request.</h1>

	background-color: var(--dotnet-surface-subtle);
	background-color: var(--dotnet-surface-code);

	.page-shell.is-error-page > hr,
	.page-shell.is-error-page > hr,

Uh oh!

Conversation

Kelvin-Macapagal commented Jul 27, 2026

Uh oh!

Kelvin-Macapagal commented Jul 27, 2026

Uh oh!

danzhu54 commented Jul 27, 2026

Uh oh!

danzhu54 Jul 29, 2026

Choose a reason for hiding this comment

Uh oh!

danzhu54 Jul 29, 2026

Choose a reason for hiding this comment

Uh oh!

danzhu54 Jul 30, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Uh oh!

danzhu54 Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

danzhu54 Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

danzhu54 Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

danzhu54 Jul 30, 2026

Choose a reason for hiding this comment

Uh oh!

danzhu54 commented Jul 31, 2026 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Uh oh!

danzhu54 Aug 10, 2026

Choose a reason for hiding this comment

Uh oh!

danzhu54 left a comment

Choose a reason for hiding this comment

Uh oh!

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

danzhu54 Jul 30, 2026 •

edited

Loading

danzhu54 commented Jul 31, 2026 •

edited

Loading