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.

Practice

1. What is the main purpose of error logging in a Next.js application?

easy

A. To speed up the app loading time

B. To reduce the size of the app bundle

C. To increase the app's SEO ranking

D. To catch and record errors for fixing issues later

Solution

1. Step 1: Understand error logging purpose

   Error logging is used to catch errors that happen during app execution.

2. Step 2: Identify why errors are logged

   Logging errors helps developers find and fix problems to improve app stability.

3. Final Answer:

   To catch and record errors for fixing issues later -> Option D

4. Quick Check:

   Error logging purpose = Catch and fix errors [OK]

Hint: Error logging is for catching and fixing problems [OK]

Common Mistakes:

• Confusing error logging with performance optimization
• Thinking error logging improves SEO
• Believing error logging reduces app size

2. Which of the following is the correct syntax to catch and log an error in Next.js using try...catch?

easy

A. try { /* code */ } catch { console.error }

B. try { /* code */ } catch (error) { console.error(error) }

C. try (/* code */) catch (error) { console.error(error) }

D. try { /* code */ } catch error { console.log(error) }

Solution

1. Step 1: Review correct try...catch syntax

   The correct syntax uses parentheses around the error variable in catch: catch (error).

2. Step 2: Check logging method

   console.error(error) correctly logs the error object to the console.

3. Final Answer:

   try { /* code */ } catch (error) { console.error(error) } -> Option B

4. Quick Check:

   Correct try...catch syntax = try { /* code */ } catch (error) { console.error(error) } [OK]

Hint: Catch uses parentheses and console.error logs errors [OK]

Common Mistakes:

• Omitting parentheses in catch
• Using console.log instead of console.error
• Incorrect try or catch block syntax

3. What will be the console output when this Next.js code runs and an error occurs?

try {
  throw new Error('Failed to fetch data')
} catch (err) {
  console.error('Error:', err.message)
}

medium

A. Error: Failed to fetch data

B. Failed to fetch data

C. Error: Error: Failed to fetch data

D. undefined

Solution

1. Step 1: Understand the thrown error

   The code throws an Error object with message 'Failed to fetch data'.

2. Step 2: Analyze the catch block output

   console.error prints 'Error:' plus the error message, resulting in 'Error: Failed to fetch data'.

3. Final Answer:

   Error: Failed to fetch data -> Option A

4. Quick Check:

   console.error prints label + error message = Error: Failed to fetch data [OK]

Hint: console.error prints label plus error.message string [OK]

Common Mistakes:

• Confusing error object with error message string
• Expecting double 'Error:' prefix
• Ignoring the label string in console.error

4. Identify the error in this Next.js error logging code:

try {
  const data = await fetchData()
} catch {
  console.error(error)
}

medium

A. Missing error parameter in catch block

B. Using console.error instead of console.log

C. fetchData() should not be awaited

D. try block should not have await

Solution

1. Step 1: Check catch block syntax

   The catch block is missing the error parameter, so 'error' is undefined inside it.

2. Step 2: Understand error usage

   console.error(error) fails because 'error' is not declared; catch must declare it like catch (error).

3. Final Answer:

   Missing error parameter in catch block -> Option A

4. Quick Check:

   Catch needs error parameter to log it [OK]

Hint: Always name error in catch to use it inside [OK]

Common Mistakes:

• Omitting error parameter in catch
• Thinking console.error is wrong here
• Misunderstanding async/await usage

5. In a production Next.js app, which strategy is best for error logging to ensure issues are tracked and fixed efficiently?

hard

A. Disable all error logging to improve performance

B. Only use console.error locally and ignore errors in production

C. Send errors to an external monitoring service and log locally

D. Log errors only in the browser console without server tracking

Solution

1. Step 1: Understand production error logging needs

   In production, errors should be tracked centrally to fix issues quickly.

2. Step 2: Identify best practice

   Sending errors to external services (like Sentry) plus local logging helps monitor and debug effectively.

3. Final Answer:

   Send errors to an external monitoring service and log locally -> Option C

4. Quick Check:

   Production error tracking = external service + local logs [OK]

Hint: Use external services plus local logs in production [OK]

Common Mistakes:

• Ignoring production error tracking
• Disabling logging to save performance
• Logging only in browser without server monitoring