【連載2】C# MVC 自定義錯誤頁設計：404/500 處理與 SEO 優化

在開發ASP.NET MVC 應用時，自定義錯誤頁是提升用戶體驗和 SEO 表現的重要環節。默認的錯誤頁不僅不美觀，還可能泄露技術細節，影響用戶體驗和搜索引擎排名。

實現自定義錯誤頁的完整代碼

配置 Web.config 自定義錯誤頁

在 ASP.NET 中，可以通過修改 Web.config 文件來配置自定義錯誤頁面。以下是一個完整的配置示例，同時支持 ASP.NET 管道和 IIS 的錯誤處理：

<configuration><system.web><!-- 針對 ASP.NET 管道的錯誤處理 --><customErrors mode="On" defaultRedirect="~/Error"><error statusCode="404" redirect="~/Error/NotFound" /><error statusCode="500" redirect="~/Error/ServerError" /></customErrors></system.web><system.webServer><!-- 針對 IIS 的錯誤處理 --><httpErrors errorMode="Custom" existingResponse="Replace"><remove statusCode="404" subStatusCode="-1" /><remove statusCode="500" subStatusCode="-1" /><error statusCode="404" path="/Error/NotFound" responseMode="ExecuteURL" /><error statusCode="500" path="/Error/ServerError" responseMode="ExecuteURL" /></httpErrors></system.webServer>
</configuration>

關鍵配置說明

customErrors 配置（ASP.NET 管道）
- mode="On" 啟用自定義錯誤頁面。
- defaultRedirect 指定默認錯誤頁路徑。
- <error> 子節點為特定狀態碼（如 404、500）配置獨立頁面。
httpErrors 配置（IIS 處理）
- errorMode="Custom" 啟用自定義錯誤頁。
- existingResponse="Replace" 強制覆蓋默認錯誤響應。
- <error> 子節點中的 responseMode="ExecuteURL" 表示通過 URL 動態生成錯誤頁。

關鍵代碼片段

var httpException = exception as HttpException ?? new HttpException(500, "Internal Server Error", exception);

System.IO.File.AppendAllText(Server.MapPath("~/App_Data/error.log"), $"[{DateTime.Now:yyyy-MM-dd HH:mm:ss}] Error: {ex.Message}\nStack Trace: {ex.StackTrace}\n");

部署注意事項

需在Global.asax中注冊錯誤路由
確保Error視圖存在于Views/Shared目錄
App_Data目錄需要寫入權限
生產環境應替換為專業日志組件
考慮實現郵件通知機制

創建404錯誤視圖

404錯誤視圖用于處理用戶訪問不存在的頁面情況。以下是一個完整的404錯誤頁面實現：

@{ViewBag.Title = "Page Not Found";Layout = "~/Views/Shared/_Layout.cshtml";
}<div class="error-container"><h1>404 - Page Not Found</h1><p>Sorry, the page you are looking for does not exist.</p><div class="suggestions"><h3>You may want to:</h3><ul><li>Check the URL for typos</li><li>Go to our <a href="@Url.Action("Index", "Home")">home page</a></li><li>Browse our <a href="@Url.Action("Index", "Products")">products</a></li><li>Use our site search:</li><form action="@Url.Action("Search", "Home")" method="get"><input type="text" name="query" placeholder="Search our site..." /><button type="submit">Search</button></form></ul></div>
</div><style>
.error-container {max-width: 800px;margin: 50px auto;padding: 20px;text-align: center;
}.error-container h1 {font-size: 3em;color: #dc3545;margin-bottom: 20px;
}.suggestions {margin-top: 30px;text-align: left;display: inline-block;
}.suggestions ul {list-style-type: none;padding: 0;
}.suggestions li {margin: 10px 0;
}
</style>

創建500錯誤視圖

500錯誤視圖用于處理服務器端錯誤。以下是一個完整的500錯誤頁面實現：

@{ViewBag.Title = "Server Error";Layout = "~/Views/Shared/_Layout.cshtml";
}<div class="error-container"><h1>500 - Server Error</h1><p>Sorry, something went wrong on our server.</p><p>Our team has been notified about this issue and we're working to fix it.</p><div class="suggestions"><h3>What you can do:</h3><ul><li>Try refreshing the page</li><li>Return to our <a href="@Url.Action("Index", "Home")">home page</a></li><li>Contact us at <a href="mailto:support@example.com">support@example.com</a> if the problem persists</li></ul></div>
</div><style>
.error-container {max-width: 800px;margin: 50px auto;padding: 20px;text-align: center;
}.error-container h1 {font-size: 3em;color: #dc3545;margin-bottom: 20px;
}.suggestions {margin-top: 30px;text-align: left;display: inline-block;
}.suggestions ul {list-style-type: none;padding: 0;
}.suggestions li {margin: 10px 0;
}
</style>

錯誤視圖最佳實踐

錯誤頁面應包含清晰的狀態碼和問題描述，提供用戶友好的導航選項。樣式應保持一致，使用醒目的顏色標識錯誤類型。考慮添加返回主頁的鏈接和聯系支持的方式。

確保錯誤頁面不顯示敏感信息，500錯誤頁面不應展示詳細的錯誤堆棧或服務器配置信息。可以記錄詳細錯誤信息到服務器日志供開發人員排查問題。

錯誤視圖可以放置在Views/Shared文件夾中，便于全局引用。在ASP.NET MVC中，可以在FilterConfig.cs中注冊全局錯誤過濾器來自動處理異常并顯示對應的錯誤視圖。

HTTP 狀態碼不正確的解決方案

自定義錯誤頁顯示時需顯式設置狀態碼。例如，在錯誤控制器中明確指定 Response.StatusCode = 404 或其他對應錯誤代碼。確保搜索引擎不會將錯誤頁識別為有效內容。

配置遺漏的解決方案

在 IIS 集成模式下需同時配置 system.web 和 system.webServer 節點。例如：

<system.web><customErrors mode="On" defaultRedirect="/Error/General"><error statusCode="404" redirect="/Error/NotFound" /></customErrors>
</system.web>
<system.webServer><httpErrors errorMode="Custom" existingResponse="Replace"><remove statusCode="404" /><error statusCode="404" path="/Error/NotFound" responseMode="ExecuteURL" /></httpErrors>
</system.webServer>

敏感信息泄露的解決方案

生產環境錯誤頁應僅展示友好提示，避免輸出異常堆棧。通過日志系統（如 ELMAH、Serilog）記錄詳細錯誤信息，確保安全性與可追溯性。

未清除錯誤的解決方案

處理完異常后調用 Server.ClearError()，防止錯誤被重復處理。例如：

public void Application_Error(object sender, EventArgs e) {Exception ex = Server.GetLastError();Logger.Log(ex);Server.ClearError(); // 關鍵步驟Response.Redirect("/Error/General");
}

錯誤頁自身出錯的解決方案

錯誤頁應保持極簡邏輯，避免依賴外部資源或復雜代碼。測試時需覆蓋以下場景：

錯誤頁的靜態內容渲染
重定向邏輯的穩定性
資源（如 CSS/JS）加載的容錯性

通過預發布環境模擬 404/500 等狀態，驗證錯誤頁的魯棒性。### 自定義錯誤頁的常見問題與解決方案

跨層錯誤處理一致性
傳統MVC的HandleErrorAttribute僅處理500錯誤，而實際需要覆蓋404/403等狀態碼。需在Global.asax中補充Application_Error事件處理，并確保web.config的system.webServer/httpErrors配置與customErrors模式協調。

動態內容與本地化挑戰
靜態錯誤頁無法顯示實時錯誤ID或多語言消息。可通過繼承HandleErrorAttribute重寫OnException方法注入ViewBag數據，配合資源文件實現本地化。示例代碼結構：

public class CustomHandleErrorAttribute : HandleErrorAttribute {public override void OnException(ExceptionContext context) {context.Exception.Data["ErrorRef"] = Guid.NewGuid().ToString("N");base.OnException(context);}
}

AJAX請求的兼容性問題
jQuery等庫的全局ajaxError事件可能攔截錯誤響應。需在CustomErrorController中判斷Request.IsAjaxRequest()，返回JSON格式錯誤對象而非HTML視圖。關鍵邏輯：

if (Request.Headers["X-Requested-With"] == "XMLHttpRequest") {return Json(new { error = exception.Message });
}

創新性錯誤監控方案

錯誤日志的可視化追蹤
集成Elmah或Serilog時，可生成帶時間戳的二維碼嵌入錯誤頁。用戶掃描后直接跳轉錯誤詳情儀表盤，技術團隊通過Application Insights的關聯ID快速定位問題。

智能錯誤恢復引導
基于異常類型動態生成恢復建議。如數據庫連接失敗時展示連接字符串檢查清單，文件IO錯誤時提供權限驗證步驟。結合機器學習分析歷史錯誤數據預測恢復路徑。

期待的后續內容方向

性能深度優化專題
包括但不限于：異步控制器的正確使用模式、路由約束的性能影響分析、響應壓縮與靜態資源合并策略。特別關注IIS與Kestrel不同宿主環境下的優化差異。

安全加固實踐指南
從OWASP Top 10角度切入，詳解MVC特有的防護手段：模型綁定白名單配置、AntiForgeryToken的分布式部署方案、自定義AuthorizationFilter實現權限熱加載。

實戰案例剖析
通過真實項目復盤展示：高并發場景下的ViewComponent優化、EF Core查詢性能從2000ms到20ms的調優過程、CDN回源策略導致的路由沖突解決。