Hapi.js 中的 404 页面定制-JavaScript中文网-JavaScript教程资源分享门户

在 Web 开发中，404 页面是指当用户访问不存在的页面时，服务器返回的错误页面。对于前端开发者来说，定制 404 页面是一项非常重要的工作，因为一个好的 404 页面可以让用户更好地理解错误原因，提升用户体验。

在 Hapi.js 中，我们可以通过定制路由和处理程序来实现自定义 404 页面。本文将详细介绍如何在 Hapi.js 中实现 404 页面定制，以及如何将错误信息发送到日志系统中。

路由配置

首先，我们需要在 Hapi.js 中定义一个路由，用于处理所有未匹配的请求。这个路由应该放在所有其他路由的末尾，以确保所有其他路由都已经尝试匹配过了。路由的配置如下：

{
    method: '*',
    path: '/{any*}',
    handler: (request, h) => {
        return h.view('404', { title: 'Page Not Found' }).code(404);
    }
}

在这个路由中，我们使用通配符 {any*} 来匹配所有未匹配的请求。当请求到达这个路由时，我们会返回一个名为 404 的视图，并将 HTTP 状态码设置为 404。这个视图可以是一个 HTML 文件，也可以是一个模板文件，根据具体需求来决定。

处理程序

接下来，我们需要定义一个处理程序来处理这个路由。处理程序的目的是将错误信息记录到日志系统中，并返回一个自定义的 404 页面给用户。

// javascriptcn.com 代码示例
const Boom = require('@hapi/boom');

const notFoundHandler = (request, h) => {
    const error = Boom.notFound(`Page Not Found: ${request.url}`);
    error.output.statusCode = 404;
    error.reformat();

    request.log(['error', '404'], error);

    return h.view('404', { title: 'Page Not Found' }).code(404);
};

在这个处理程序中，我们使用 Boom 库来创建一个 404 错误对象，并将错误信息记录到日志系统中。然后，我们返回一个名为 404 的视图，并将 HTTP 状态码设置为 404。这个视图可以是一个 HTML 文件，也可以是一个模板文件，根据具体需求来决定。

日志记录

最后，我们需要将错误信息记录到日志系统中。在 Hapi.js 中，我们可以使用 request.log 方法来记录日志信息。

request.log(['error', '404'], error);

在这个方法中，我们指定了一个日志标签 ['error', '404']，用于将错误信息与其他日志信息区分开来。这个标签可以根据具体需求进行修改。

完整示例

下面是一个完整的示例，演示了如何在 Hapi.js 中实现 404 页面定制和日志记录。

// javascriptcn.com 代码示例
const Hapi = require('@hapi/hapi');
const Boom = require('@hapi/boom');

const init = async () => {
    const server = Hapi.server({
        port: 3000,
        host: 'localhost'
    });

    server.route({
        method: '*',
        path: '/{any*}',
        handler: (request, h) => {
            const error = Boom.notFound(`Page Not Found: ${request.url}`);
            error.output.statusCode = 404;
            error.reformat();

            request.log(['error', '404'], error);

            return h.view('404', { title: 'Page Not Found' }).code(404);
        }
    });

    await server.start();
    console.log('Server running on %s', server.info.uri);
};

init();

总结

在本文中，我们介绍了如何在 Hapi.js 中实现 404 页面定制和日志记录。通过路由配置、处理程序和日志记录，我们可以定制一个完整的错误页面，并记录错误信息到日志系统中。这些技术不仅在 Hapi.js 中适用，也可以应用到其他 Web 开发框架中。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653b6a127d4982a6eb5c1cfc