Logging in Next.js

Hey readers, in this article we will be learning about what is logging in to Next.js and where is it used. If you’re new to Next.js, do check out the Next.js course on Codedamn.

What is Logging?

Logging in easy language means recording or keeping track of every piece of data. A log is a type of data or text that represents an action that occurred in the application. It depends on the codebase, as the codebase expands, the ability to effectively debug it also increases substantially.

How is it useful in Next.js?

When we have logging that works well and is better in place, it becomes easy for developers to exactly read what the code is actually doing and how is it working internally. Thus, by enabling all logging messages, developers can understand the code through the execution flow of any part of the program without the need to manually set the breakpoints. One can log anywhere within the codebase and there is a significant change in logic.

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

Wait, does that mean you can log anywhere in the code?

This process might sound a bit easy and make it seem like the code would be messy and indistinct.

There are various processes to this issue, but the default approach is what should be used. 

Suggested Approach

In this approach, set a key and its boolean value ( in this context, debug = true ) in the query params of the URL. When the page gets refreshed or reloaded, read the value of debugging 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.

Depending on where you put your console.log() statements, your logs will appear in different locations. Here are some rules for figuring out where they are:

a) If your logs are declared in a function that renders/uses React, they will appear in the browser.

b) Whether it is one of your React hooks, your React components, or a page-level component, that log will be in your browser console. This part of your code is the front-end of your application, so you can remember that the front-end is client-side, in the browser! 

c) If your logs are in a function of data fetching, they will appear in the terminal or build/function logs.

d) If you have utilities, call APIs, or render certain routes based on external data, these logs will be in your terminal in development mode. Your terminal is where the “back-end” of your application resides, and where the pages are visible and being built or developed. It’s a Node.js environment! In production mode, these logs will appear build time in the build logs at build time, or in the function/API logs at runtime of an application.

There are various logging levels that help us differentiate the logs.

Logging Levels

Below are JavaScript’s built-in logging methods:

console.log() — It outputs the plain text on the console.

console.trace() — It outputs the plain text along with the bunch of stack traces to know where exactly the message is emitted from in the codebase.

console.warn() — It outputs the warnings message typically with a yellow background.

console.error() —It outputs the errors typically with red background.

console.info() — It outputs the text typically with blue background.

Problem Statement

Sometimes developers unknowingly push the logs into production which can lead to leakage of quite sensitive data of the application.

It lowers application performance as it uses some CPU cycles and other resources like  (memory, etc). So only put logs wherever required or for debugging.

Sometimes you would want to get all the logs for the page in order to debug and fix issues. 

Conclusion

This was about logging in the Next.js it is crucial to know the concepts of logging as it is used for debugging and testing. If you want to learn more about Next.js, do check out the article and course on Codedamn of Next js.