Blazor 修改错误提示

我们在blazor中，如果代码有异常，会产生如下的错误

在群里很多朋友都问，这个错误提示是英文的，能不能改成中文？

这个当然是可以的。

其实这个错误描述是在项目里自己定义的，具体内容可以看_Layout.cshtml中内容。

其中有这样一段：

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        An unhandled exception has occurred. See browser dev tools for details.
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

这个就是显示的错误信息，所以如果我们想把这个改成中文，只需要修改内容即可。

因为我们是开发模式，这里就会走到<environment include="Development">中，我们就修改这里的内容。

修改为：

<div id="blazor-error-ui">
    <environment include="Staging,Production">
        An error has occurred. This application may no longer respond until reloaded.
    </environment>
    <environment include="Development">
        出错啦，麻烦啦，赶紧去看看浏览器日志呀~
    </environment>
    <a href="" class="reload">Reload</a>
    <a class="dismiss">🗙</a>
</div>

这时候错误会变成

同样，我们可以把reload改成任意的文字。这样我们的错误信息就完全变成中文了。

默认的黄色背景是在site.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;
}

我们可以改成蓝色，并且把底部上浮100px，只需要修改内容即可。

#blazor-error-ui {
    background: blue;
    bottom: 100px;
    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;
}

现在的错误就变成这样了。

所以我们可以随意修改里面的内容。做到比如居中，放大等等任意你想完成的操作。