Error logging strategies in NextJS - Interactive Code Practice

Practice - 5 Tasks

1fill in blank

easy

Complete the code to log an error message in Next.js using console.

NextJS

console.[1]('An error occurred while fetching data');

Drag options to blanks, or click blank then click option'

Awarn

Blog

Cerror

Dinfo

Attempts:

3 left

💡 Hint

Common Mistakes

Using console.log instead of console.error

Using console.warn which is for warnings

Use console.error to log error messages clearly in the console.

2fill in blank

medium

Complete the code to send error details to an external logging service in Next.js.

NextJS

await fetch('/api/log-error', { method: 'POST', body: JSON.stringify({ error: [1] }) });

Drag options to blanks, or click blank then click option'

Aerror.message

BerrorMessage

Cerror.stack

DerrorCode

Attempts:

3 left

💡 Hint

Common Mistakes

Sending errorCode which may not exist

Sending error.stack which is too detailed for simple logging

Use error.message to send the error description to the logging service.

3fill in blank

hard

Fix the error in the code to catch and log errors properly in Next.js API route.

NextJS

export default async function handler(req, res) {
  try {
    // some code
  } catch ([1]) {
    console.error(error);
    res.status(500).json({ message: 'Server error' });
  }
}

Drag options to blanks, or click blank then click option'

Aerr

Bexception

Ce

Derror

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in catch and inside block

Using generic names that don't match usage

The catch block variable must match the variable used inside the block. Here, error is used, so the catch parameter should be error.

4fill in blank

hard

Fill both blanks to create a custom error logging function that logs and sends errors to an API.

NextJS

async function logError([1]) {
  console.error([2]);
  await fetch('/api/log-error', { method: 'POST', body: JSON.stringify({ error: [2].message }) });
}

Drag options to blanks, or click blank then click option'

Aerror

Berr

Dmessage

Attempts:

3 left

💡 Hint

Common Mistakes

Using different names for parameter and inside function

Using 'message' as parameter which is incorrect

The function parameter and the variable used inside must be the same. Here, error is used consistently.

5fill in blank

hard

Fill all three blanks to create a Next.js API route that logs errors and returns a JSON response.

NextJS

export default async function handler(req, res) {
  try {
    // process request
  } catch ([1]) {
    console.error([2]);
    res.status([3]).json({ error: [2].message });
  }
}

Drag options to blanks, or click blank then click option'

Aerror

Berr

C500

D404

Attempts:

3 left

💡 Hint

Common Mistakes

Using different variable names in catch and console.error

Using 404 status code which means not found, not server error

The catch parameter and console.error argument must be the same variable error. The HTTP status code for server errors is 500.