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;
}

現在的錯誤就變成這樣了。

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