Logging for your frontend apps

Logging is one of the key activities when you set out to build a reliable piece of software. Yet, we've seen developers putting off logging setup for future. This can be largely attributed to unavailability of simple, developer friendly logging platforms that just work.

In this post we'll take a look at how to configure a React app to send logs (over HTTP) to Parseable - an open source, developer friendly log storage and query platform.

The Setup

While Parseable is FOSS and can be setup anywhere, we'll use the public demo instance to avoid the setup and instead focus on the react app side of things.

I'll use the Pino JS Logger as the logging client.

Create a React app

Ideally you may have a react app available that you want to add logging for. In case you're starting from scratch, create a react application first so that we can add logging to the app.

npx create-react-app my-project-demo

Setup Pino

Install Pino so we can use it as a library in the react app.

npm install pino

Once installed successfully, create a directory named src/loggers inside your react app source. We'll initialise Pino library here, to send logs to Parseable.

Create a file src/loggers/index.js and paste this following code.

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;

Note that the Parseable URL https://demo.parseable.io/api/v1/logstream/pinotest points to the pinotest stream on Demo Parseable instance. This is a public instance to demonstrate Parseable UI. Please don't post any sensitive / production logs to the URL. Refer to Parseable Docs to start your own Parseable instance.

Add logging to the app

Now we can add logs to the react app we created initially.

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;

That is all! You have successfully integrated parseable with your React app.

All the events you log with the logger will be posted to Parseable and you can check in the log stream you created earlier.

Conclusion

In this post we learnt about how to setup and configure a react app to send logs to Parseable - a simple, developer friendly log storage platform. We were able to do this with just few lines of code.

With this setup, all the logs are stored securely and efficiently on a remote machine. Logs are available in seconds for auditing and debugging purposes.

Links:
[1] Parseable Github: https://github.com/parseablehq/parseable
[2] Parseable Docs: https://www.parseable.io/docs/introduction
[3] Pino Github: https://github.com/pinojs/pino
[4] Pino Docs: https://getpino.io/