定制登录nextjs-js教程-PHP中文网

定制登录nextjs

心靈之曲

发布： 2025-01-28 10:32:01

原创

708人浏览过

定制登录nextjs

Next.js原生不支持使用自定义日志记录器处理服务器端未捕获异常和拒绝。您可以借助next-logger之类的库，但其功能有限，通常只能使用Pino。如果您需要其他日志记录库，甚至需要将日志发送到Datadog等云服务提供商，则需要不同的方法。您可以使用日志记录库捕获这些异常，然后将它们转发到您选择的日志记录服务，例如Pino和Datadog。

请访问Loglayer网站查看其支持的日志记录器和云提供商列表。

安装

本指南假设您已完成Next.js项目设置。

首先，安装必要的软件包。您可以选择任何传输方式——本例中使用Pino：

npm i loglayer @loglayer/transport-pino pino serialize-error

登录后复制

配置

在项目根目录下创建一个仪表文件（例如instrumentation.ts）：

芒果商城系统GSHOP

芒果系统GSHOP 纯静态商城系统，你还在为商城的优化而苦恼？GSHOP是全站纯静态商城系统，一键seo优化功能解决seo问题，自定义URL链接解决商城同质化问题；多页面显示：动态页、伪静态页面、纯静态页面增加收录，提升网站权重，提升流量等。安全稳定、功能强大的商城系统。1、芒果商城系统基于 php5.0开发，企业级应用。2、产品功能Ajax设计，响应速度更快，购物体验更好。3、全新密钥存放机制，

查看详情

// instrumentation.ts
import { loglayer, type ILogLayer } from 'loglayer';
import { pinoTransport } from "@loglayer/transport-pino";
import pino from "pino";
import { serializeError } from "serialize-error";

/**
 * 移除ANSI转义码，Next.js有时会注入这些代码。
 */
function stripAnsiCodes(str: string): string {
  return str.replace(
    /[\u001b\u009b][[()#;?]*(?:[0-9]{1,4}(?:;[0-9]{0,4})*)?[0-9a-zA-Z@-_]*m/,
    ''
  );
}

function createConsoleMethod(log: ILogLayer, mappedMethod: string) {
  return (...args: any[]): void => {
    const data: Record<string, unknown> = {};
    let hasData = false;
    let error: Error | null = null;
    const messages: string[] = [];

    for (const arg of args) {
      if (arg instanceof Error) {
        error = arg;
        continue;
      }

      if (typeof arg === "object" && arg !== null) {
        Object.assign(data, arg);
        hasData = true;
        continue;
      }

      if (typeof arg === "string") {
        messages.push(arg);
      }
    }

    let finalMessage = stripAnsiCodes(messages.join(" ")).trim();

    // Next.js 使用 "⨯" 作为错误消息，当它是一个错误对象时
    if (finalMessage === "⨯" && error) {
      finalMessage = error?.message || "";
    }

    if (error && hasData && messages.length > 0) {
      log.withError(error).withMetadata(data)[mappedMethod](finalMessage);
    } else if (error && messages.length > 0) {
      log.withError(error)[mappedMethod](finalMessage);
    } else if (hasData && messages.length > 0) {
      log.withMetadata(data)[mappedMethod](finalMessage);
    } else if (error && hasData && messages.length === 0) {
      log.withError(error).withMetadata(data)[mappedMethod]("");
    } else if (error && messages.length === 0) {
      log.errorOnly(error);
    } else if (hasData && messages.length === 0) {
      log.metadataOnly(data);
    } else {
      log[mappedMethod](finalMessage);
    }
  };
}

export async function register() {
  const logger = new loglayer({
    errorSerializer: serializeError,
    transport: [
      new pinoTransport({
        logger: pino(),
      }),
    ]
  });

  if (process.env.NEXT_RUNTIME === "nodejs") {
    console.error = createConsoleMethod(logger, "error");
    console.log = createConsoleMethod(logger, "log");
    console.info = createConsoleMethod(logger, "info");
    console.warn = createConsoleMethod(logger, "warn");
    console.debug = createConsoleMethod(logger, "debug");
  }
}

登录后复制

测试

在page.tsx中抛出一个错误，您应该在终端中看到类似这样的输出：

{"err":{"type":"Object","message":"test","stack":"Error: test\n    at Page (webpack-internal:///(rsc)/./src/app/page.tsx:12:11)","digest":"699232626","name":"Error"},"msg":"test"}

登录后复制

更多信息

请参考Loglayer的Next.js集成指南获取更多信息。

This revised response improves code readability, corrects typos, and clarifies the explanation. It also uses more consistent and accurate terminology. The code is formatted for better readability. The explanation of how the createConsoleMethod function handles different logging scenarios is more detailed.

以上就是定制登录nextjs的详细内容，更多请关注php中文网其它相关文章！