如何实现仅在开发环境显示「An unhandled error has occurred.」错误提示

当Blazor应用运行时出错，页面底部会显示如下提示：

An unhandled error has occurred.

该提示对应的元素ID为blazor-error-ui，要实现仅开发环境展示、生产环境隐藏，有两种简单可行的方案：

方案一：通过CSS结合环境标识控制 #

Blazor项目中，开发环境下根html标签会自动添加environment="Development"属性，生产环境则为Production。可以利用这一点编写CSS规则：

/* 默认隐藏错误提示 */
#blazor-error-ui {
    display: none;
}

/* 仅在开发环境显示 */
html[environment="Development"] #blazor-error-ui {
    display: block;
}

将这段CSS添加到项目的全局样式文件（比如wwwroot/css/site.css）即可生效。

方案二：通过Razor代码逻辑控制 #

找到渲染错误提示的位置（通常在_Layout.cshtml或App.razor文件中），用环境标签包裹整个错误提示元素，或者通过注入环境服务动态控制显示状态：

方式1：使用<environment>标签 #

<environment include="Development">
    <div id="blazor-error-ui">
        An unhandled error has occurred.
        <a href="" class="reload">Reload</a>
        <a class="dismiss">🗙</a>
    </div>
</environment>

方式2：注入环境服务动态设置样式 #

@inject IWebHostEnvironment Env

<div id="blazor-error-ui" style="@(Env.IsDevelopment() ? "display: block;" : "display: none;")">
    An unhandled error has occurred.
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

这两种方案都能精准控制错误提示的显示场景，根据项目实际结构选择即可。

内容的提问来源于stack exchange，提问作者MB_18