Logging for your frontend apps
Tags: react, frontend, javascript, webdev
Published: 2022-09-19 11:46:24

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](https://github.com/parseablehq/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](https://demo.parseable.io/) to avoid the setup and instead focus on the react app side of things. 

I'll use the [Pino JS Logger](https://github.com/pinojs/pino) 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.

```sh
npx create-react-app my-project-demo
```

## Setup Pino

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

```sh
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.

```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;
```

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](https://www.parseable.io/docs/introduction) to start your own Parseable instance.

### Add logging to the app

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

```js
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/