How to Implement Custom Logger in NextJs

In this article, we are going to implement a custom logger for a NextJs application.

What is Logging?
Logging in simple language means recording every data. A log is a bit of text that describes an action that happened in the application. As our codebase grows, the ability to effectively debug also increases.

So in this article, a logging approach would be covered that can be easily implemented in any javascript codebase.

How logging helps us
When we have good logging in place, it becomes easier for developers to see exactly what the code is doing. By enabling all logging messages, developers can follow through with the execution flow of any part of the program without needing to manually set the breakpoints. One can log anywhere there is a significant change in logic.

These logs are important to verify what the application did just before a bug happened so that we can gather extra information about that bug.

Wait, does that mean you can log anywhere in the code?
Well, This approach might sound ugly and make it seem like the code would be cluttered and unreadable.
There are various logging levels that help us segregate the logs.

Logging Levels
Below are JavaScript’s built-in logging methods:

• console.log() — outputs the plain text.
• console.trace() — outputs the plain text along with the entire stack trace to know where exactly the message is emitted from.
• console.warn() — outputs the warnings typically with a yellow background.
• console.error() — outputs the errors typically with red background.
• console.info() — outputs the text typically with blue background.

Problem Statement

1. Sometimes developers unknowingly push logs in production which can lead to leakage of quite sensitive data of the application.
2. It decreases application performance as it uses some CPU cycles and other resources (memory, etc). So only put logs wherever required
3. Sometimes you would want to get all the logs for the page in order to debug and fix issues.

Suggested Approach

In this approach, set a key and its boolean value ( in this illustration, debug = true ) in the query params of the URL. When the page gets refreshed or reloaded, read the value of debug from the params and based on the value and print the logs of the application if the key is present. This way helps to enable or disable the logs of the application.

Steps to create a logger in your application:

1. Open pages/_app.js and add below lines of code.

Create a global variable(areLogsEnabled in this case) to determine if logs have been enabled by the user or not. Update its value by checking the query params in the URL. Set its value to true only If debug is equal to true.

2. Create a new logger function under /helpers/logger.js

Create an IIFE(Immediately Executable Function Expression) that returns an object which contains different logging methods. These methods will only get executed only if the logs are enabled. Further, logs can also be custom styled in order to easily identify the category.

3. Now all you need to do is import the logger function in your respective pages or components.

NOTE: This approach will print the logs on the server-side as well as the client-side when debug=true is present in the query params. This is not the only approach, there are various other mechanisms to build a logging system for your application irrespective of the framework.

One can also disable console logs based on the environment conditionally.

To check out the source code for the implementation click HERE and for the demo click HERE. And To get more understanding about what NextJs is refer to this link.