Error logging strategies in NextJS - Step-by-Step Execution

Concept Flow - Error logging strategies

Error Occurs in App

↓

Capture Error

↓

Format Error Info

↓

Send to Logging Service

↓

Store Logs

↓

Review & Alert if Critical

↓

Fix & Deploy

This flow shows how an error is caught, formatted, sent to a logging service, stored, and then reviewed for fixes.

Execution Sample

NextJS

try {
  // some code
} catch (error) {
  console.error('Error:', error.message);
  sendToLoggingService(error);
}

This code tries to run some code, catches any error, logs it to console, and sends it to a logging service.

Execution Table

Step	Action	Error Object State	Logging Output	Next Action
1	Run code block	No error	No output	Continue normal flow
2	Error thrown	Error with message 'Failed to fetch'	No output yet	Catch block triggered
3	Catch error	Captured error with message 'Failed to fetch'	console.error logs 'Error: Failed to fetch'	Call sendToLoggingService()
4	Send to logging service	Error info formatted	Sent error data to remote logging	Store log and check severity
5	Store logs	Log saved in database	No output	Trigger alert if critical
6	Alert if critical	Severity high	Alert sent to DevOps team	Fix issue and deploy patch
7	Fix & deploy	Error resolved	No output	Return to normal operation

💡 Error handled and logged, alerts sent if critical, then fixed and deployed

Variable Tracker

Variable	Start	After Step 2	After Step 3	After Step 4	Final
error	undefined	Error object with message 'Failed to fetch'	Same error object captured	Formatted error info sent	Cleared after fix

Key Moments - 3 Insights

Why do we log the error message and not just the error object?

Logging the error message (see Step 3 in execution_table) gives a clear, readable description. The error object may contain extra info but is less readable directly.

What happens if we don't send the error to a logging service?

Without sending to a logging service (Step 4), errors are only visible in console and not stored centrally, making it hard to track and fix issues over time.

Why do we alert only if the error is critical?

Alerting on every error would overwhelm the team. Step 6 shows alerts sent only for high severity errors to focus attention on urgent problems.

Visual Quiz - 3 Questions

Look at the execution_table, what is logged to the console at Step 3?

A 'Error: Failed to fetch'

B 'Failed to fetch'

C The full error object

D No output

💡 Hint

Check the 'Logging Output' column at Step 3 in execution_table

At which step is the error information sent to a remote logging service?

A Step 3

B Step 4

C Step 2

D Step 5

💡 Hint

Look for 'Send to logging service' action in execution_table

If the error severity was low, what would change in the execution_table?

A The error would not be logged to console

B The error would not be caught

C No alert would be sent at Step 6

D The error would be fixed automatically

💡 Hint

Refer to Step 6 'Alert if critical' in execution_table and key_moments about alerting

Concept Snapshot

Error logging in Next.js:
- Use try-catch to capture errors
- Log error messages clearly
- Send error info to a remote logging service
- Store logs centrally for review
- Alert team only on critical errors
- Fix issues and deploy updates

Full Transcript

This visual execution shows how error logging works in a Next.js app. When an error occurs, it is caught in a try-catch block. The error message is logged to the console for immediate visibility. Then, the error details are formatted and sent to a remote logging service where they are stored. If the error is critical, an alert is sent to the DevOps team to fix the issue quickly. After fixing, the app is redeployed and returns to normal operation. This process helps track and manage errors effectively.

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