前端应用程序的日志记录

日志记录是构建可靠软件的关键环节之一。然而，我们发现很多开发者会把日志设置推迟到以后再做。这主要是因为市面上缺乏简单易用、对开发者友好的日志平台。

在这篇文章中，我们将探讨如何配置 React 应用，使其能够（通过 HTTP）将日志发送到Parseable——一个开源、对开发者友好的日志存储和查询平台。

准备工作

虽然 Parseable 是开源软件，可以在任何地方进行设置，但我们将使用公共演示实例来避免设置，而专注于 React 应用程序方面。

我将使用Pino JS Logger作为日志客户端。

创建一个 React 应用

理想情况下，您应该已经有一个想要添加日志记录功能的 React 应用。如果您是从零开始，请先创建一个 React 应用，以便我们能够为该应用添加日志记录功能。

npx create-react-app my-project-demo

设置 Pino

安装 Pino，以便我们可以在 React 应用中将其用作库。

npm install pino

安装成功后，src/loggers在你的 React 应用源代码目录下创建一个名为 `<directory_name>` 的目录。我们将在这里初始化 Pino 库，以便将日志发送到 Parseable。

创建一个文件src/loggers/index.js，并将以下代码粘贴到该文件中。

import pino from "pino";

const send = async function (level, logEvent, a, b) {
  const url = "https://demo.parseable.io/api/v1/logstream/pinotest";

  const response = await fetch(url, {
    method: "POST",
    headers: {
      Authorization: "Basic cGFyc2VhYmxlOnBhcnNlYWJsZQ==",
      "Content-Type": "application/json",
    },
    body: JSON.stringify([logEvent]),
  });
  console.log(response);
};

const logger = pino({
  browser: {
    serialize: true,
    asObject: true,
    transmit: {
      send,
    },
  },
});

export default logger;

请注意，此 Parseable URLhttps://demo.parseable.io/api/v1/logstream/pinotest指向pinotest演示 Parseable 实例上的数据流。这是一个用于演示 Parseable 用户界面的公共实例。请勿将任何敏感/生产日志发布到此 URL。有关如何启动您自己的 Parseable 实例，请参阅Parseable 文档。

为应用程序添加日志记录功能

现在我们可以给最初创建的 React 应用添加日志记录功能了。

import logger from "./loggers";
logger.info("test log! pinotest stream from reactjs application.");
function App() {
  return <div className="App">ReactJs logs to parseable</div>;
}
export default App;

就这样！您已成功将 parseable 集成到您的 React 应用中。

您使用日志记录器记录的所有事件都将发布到 Parseable，您可以在之前创建的日志流中查看。

结论

在这篇文章中，我们学习了如何设置和配置 React 应用，使其能够将日志发送到 Parseable——一个简单易用、对开发者友好的日志存储平台。我们仅用了几行代码就实现了这一点。

通过这种设置，所有日志都会安全高效地存储在远程计算机上。日志可在几秒钟内用于审计和调试。

链接：
[1] Parseable GitHub：https: //github.com/parseablehq/parseable
[2] Parseable 文档：https: //www.parseable.io/docs/introduction
[3] Pino GitHub：https: //github.com/pinojs/pino
[4] Pino 文档：https: //getpino.io/