Error logging strategies in NextJS - Mini Project: Build & Apply

Error Logging Strategies in Next.js

📖 Scenario: You are building a Next.js web application that needs to track errors effectively. Proper error logging helps developers find and fix problems quickly, improving user experience.

🎯 Goal: Learn how to set up basic error logging in a Next.js app by creating an error log array, configuring a log level, capturing errors during rendering, and displaying the logged errors.

📋 What You'll Learn

Create an array called errorLogs to store error messages

Add a configuration variable logLevel to control logging detail

Write a function logError that adds errors to errorLogs only if the logLevel allows it

Simulate an error and log it using logError

Display the logged errors in the console

💡 Why This Matters

🌍 Real World

Error logging helps developers quickly find and fix bugs in web applications, improving reliability and user satisfaction.

💼 Career

Understanding error logging is essential for roles like DevOps engineer, site reliability engineer, and frontend/backend developer to maintain healthy applications.

1

Create the error log storage

Create an empty array called errorLogs to store error messages.

NextJS

// Create an empty array called errorLogs
// Your code here

Need a hint?

Use const errorLogs = []; to create an empty array.

2

Add a log level configuration

Add a constant called logLevel and set it to the string "error" to control which errors get logged.

NextJS

const errorLogs = [];
// Add a constant logLevel set to "error"
// Your code here

Need a hint?

Use const logLevel = "error"; to set the logging level.

3

Create the error logging function

Write a function called logError that takes a parameter message. Inside the function, check if logLevel is "error". If yes, add the message to the errorLogs array.

NextJS

const errorLogs = [];
const logLevel = "error";
// Write function logError(message) that adds message to errorLogs if logLevel is "error"
// Your code here

Need a hint?

Use an if statement inside logError to check logLevel before pushing the message.

4

Simulate and display logged errors

Call logError with the string "Page failed to load". Then, use console.log to display the errorLogs array.

NextJS

const errorLogs = [];
const logLevel = "error";
function logError(message) {
    if (logLevel === "error") {
        errorLogs.push(message);
    }
}
// Call logError with "Page failed to load" and print errorLogs
// Your code here

Need a hint?

Call logError("Page failed to load") and then console.log(errorLogs) to see the logged errors.