html 通用错误页面

因为业务业务需求，需要做一个错误的页面，避免出现错误信息或者相关业务信息泄露，所以在Nginx配置一个通用错误页面。

完成后页面访问路径：

/error.htmlstatus=500&uri=/user&time_local=2024年7月29日10:16:04&remote_addr=127.0.0.1&args=test=1

Nginx获取相关错误信息的方式：

复制代码

location / {
	#root  D:/Product/xxx;
	proxy_pass http://192.168.110.28:8080;
	#主要是拦截tomcat的错误，不然获取不到Java抛出的异常
	proxy_intercept_errors on; # 开启错误拦截
}
error_page  404 405 500 502 503 504  /50x.html;
location /50x.html {
	internal;  # 确保该页面只能通过内部重定向访问
    root   html;
	# 传递状态码和其他信息到自定义页面
	rewrite ^ /error.html?status=$status&uri=$uri&remote_addr=$remote_addr&http_user_agent=$http_user_agent&time_local=$time_local permanent;
}
# 目标前缀
location /error.html {

}

以下是一些常用的 Nginx 变量及其用途，你可以在错误页面或日志中使用这些变量：

请求相关信息：
$request: 完整的原始请求行。$ uri: 当前请求的 URI（不包含请求参数）。
$args: 请求参数。$ request_body: 请求体内容。
$request_method: 请求方法（例如 GET、POST 等）。$ remote_addr: 客户端 IP 地址。
$remote_port: 客户端端口。$ http_user_agent: 客户端的 User-Agent 头信息。
$http_referer: 引用页面（Referer 头信息）。
服务器相关信息：
$server_name: 服务器名称。$ server_addr: 服务器地址。
$server_port: 服务器端口。$ hostname: 服务器主机名。
连接和会话信息：
$connection: 连接序列号。$ connection_requests: 当前连接上的请求数量。
$cookie_name: 指定的 cookie 值（例如$ cookie_SESSIONID 获取名为 SESSIONID 的 cookie 值）。
时间相关信息：
$time_iso8601: 当前时间，ISO 8601 格式。$ time_local: 当前时间，本地时间格式。

完整代码：

复制代码

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8"/>
    <title>错误页面</title>
    <style>
        body {
            margin: 0;
        }

        h1 {
            font-family: 'Lato', sans-serif;
            font-weight: 300;
            letter-spacing: 2px;
            font-size: 48px;
        }

        p {
            font-family: 'Lato', sans-serif;
            letter-spacing: 1px;
            font-size: 14px;
            color: #333333;
        }

        .header {
            position: relative;
            text-align: center;
            background: linear-gradient(60deg, rgba(84, 58, 183, 1) 0%, rgba(0, 172, 193, 1) 100%);
            color: white;
        }

        .logo {
            width: 50px;
            fill: white;
            padding-right: 15px;
            display: inline-block;
            vertical-align: middle;
        }

        .inner-header {
            height: 65vh;
            width: 100%;
            margin: 0;
            padding: 0;
        }

        .flex {
            /*Flexbox for containers*/
            display: flex;
            justify-content: center;
            align-items: center;
            text-align: center;
        }

        .waves {
            position: relative;
            width: 100%;
            height: 15vh;
            margin-bottom: -7px; /*Fix for safari gap*/
            min-height: 100px;
            max-height: 150px;
        }

        .content .button {
            display: inline-block;
            padding: 0 20px;
            line-height: 40px;
            font-size: 14px;
            color: #fff;
            background-color: #5dadf5;
            text-decoration: none;
        }

        .content .button:hover {
            opacity: .9;
        }

        /* Animation */

        .parallax > use {
            animation: move-forever 25s cubic-bezier(0.55, 0.5, 0.45, 0.5) infinite;
        }

        .parallax > use:nth-child(1) {
            animation-delay: -2s;
            animation-duration: 7s;
        }

        .parallax > use:nth-child(2) {
            animation-delay: -3s;
            animation-duration: 10s;
        }

        .parallax > use:nth-child(3) {
            animation-delay: -4s;
            animation-duration: 13s;
        }

        .parallax > use:nth-child(4) {
            animation-delay: -5s;
            animation-duration: 20s;
        }

        @keyframes move-forever {
            0% {
                transform: translate3d(-90px, 0, 0);
            }
            100% {
                transform: translate3d(85px, 0, 0);
            }
        }

        /*Shrinking for mobile*/
        @media (max-width: 768px) {
            .waves {
                height: 40px;
                min-height: 40px;
            }

            .content {
                height: 30vh;
            }

            h1 {
                font-size: 24px;
            }
        }

        .card {
            text-align: left;
            letter-spacing: 1px;
            color: #666666;
            width: 300px;
            padding: 20px 100px;
            min-height: 250px;
            background: rgba(255, 255, 255, .4);
            border-radius: 5px;
        }

        .card .card-title {
            color: #ff2929;
            padding: 10px 0;
            font-size: 24px;
        }

        .card .card-content{
            word-break: break-all;
        }

    </style>
</head>
<body>
<div class="header">
    <div class="inner-header flex">
        <div class="card">
            <div class="card-title"><b class="status"></b> 页面响应错误！</div>
            <div class="card-content">
                <p>页面状态：<span class="status"></span></p>
                <p>访问地址：<span class="uri"></span></p>
                <p>请求参数：<span class="args"></span></p>
                <p>访问时间：<span class="time_local"></span></p>
                <p>客户端 IP：<span class="remote_addr"></span></p>
            </div>
        </div>
    </div>
    <svg
            class="waves"
            xmlns="http://www.w3.org/2000/svg"
            xmlns:xlink="http://www.w3.org/1999/xlink"
            viewBox="0 24 150 28"
            preserveAspectRatio="none"
            shape-rendering="auto"
    >
        <defs>
            <path
                    id="gentle-wave"
                    d="M-160 44c30 0 58-18 88-18s 58 18 88 18 58-18 88-18 58 18 88 18 v44h-352z"
            />
        </defs>
        <g class="parallax">
            <use xlink:href="#gentle-wave" x="48" y="0" fill="rgba(255,255,255,0.7"/>
            <use xlink:href="#gentle-wave" x="48" y="3" fill="rgba(255,255,255,0.5)"/>
            <use xlink:href="#gentle-wave" x="48" y="5" fill="rgba(255,255,255,0.3)"/>
            <use xlink:href="#gentle-wave" x="48" y="7" fill="#fff"/>
        </g>
    </svg>
</div>

<div class="content flex">
    <p>
        <a class="button" href="/">返回主页</a>
    </p>
</div>

</body>
<script type="text/javascript">
    var urlParams = new URLSearchParams(window.location.search);
    var statusCode = urlParams.get('status');
    document.querySelectorAll('.status').forEach(function (e) {
        e.textContent = statusCode;
    })
    document.querySelector('.uri').textContent = urlParams.get('uri');
    document.querySelector('.args').textContent = urlParams.get('args');
    document.querySelector('.time_local').textContent = urlParams.get('time_local');
    document.querySelector('.remote_addr').textContent = urlParams.get('remote_addr');
</script>
</html>