Error logging strategies in NextJS - Practice Problems & Coding Challenges

Challenge - 5 Problems

🧠 Conceptual

intermediate

Understanding centralized error logging

Which of the following best describes the main benefit of using centralized error logging in a Next.js application?

A It stores error logs only on the user's browser for privacy reasons.

B It automatically fixes errors in the code without developer intervention.

C It prevents errors from occurring by validating user input on the client side only.

D It collects all error logs in one place, making it easier to monitor and analyze issues across multiple servers or environments.

💡 Hint

Think about how error logs from different parts of your app can be managed efficiently.

Centralized error logging gathers logs from various sources into one system, simplifying monitoring and troubleshooting.

💻 Command Output

intermediate

Next.js error logging output with Sentry

What will be the output in the Sentry dashboard after running this Next.js server-side code snippet that throws an error?

NextJS

import * as Sentry from '@sentry/nextjs';

export async function getServerSideProps() {
  try {
    throw new Error('Database connection failed');
  } catch (error) {
    Sentry.captureException(error);
    return { props: { error: error.message } };
  }
}

A The error message is logged to the browser console only, not to Sentry.

B No error is logged because captureException is asynchronous and not awaited.

C An error event with message 'Database connection failed' appears in Sentry with stack trace.

D The function returns a syntax error due to missing await keyword.

💡 Hint

Consider how Sentry captures exceptions even if not awaited.

Sentry.captureException logs the error event with details to the dashboard regardless of awaiting.

❓ Configuration

advanced

Configuring log levels in Next.js with Winston

Given the following Winston logger configuration in a Next.js API route, which log messages will be saved to the file 'error.log'?

NextJS

import winston from 'winston';

const logger = winston.createLogger({
  level: 'warn',
  transports: [
    new winston.transports.File({ filename: 'error.log' })
  ]
});

logger.error('Critical failure');
logger.warn('Warning message');
logger.info('Informational message');

A 'Critical failure' and 'Warning message' will be saved; 'Informational message' will be ignored.

B Only 'Critical failure' will be saved; others ignored.

C All three messages will be saved to 'error.log'.

D No messages will be saved because the level is set incorrectly.

💡 Hint

Remember that log levels filter messages at or above the set level.

Setting level to 'warn' means 'warn' and 'error' messages are logged; 'info' is below and ignored.

❓ Troubleshoot

advanced

Diagnosing missing error logs in production

A Next.js app uses a custom error logging middleware that writes errors to a remote logging service. In production, no error logs appear in the service. Which is the most likely cause?

A The remote logging service is down, but the app logs errors locally instead.

B The middleware is only applied in development mode and not included in the production build.

C The app is catching errors but not throwing any exceptions.

D The logging middleware is configured to log only warnings, but errors are not warnings.

💡 Hint

Check if the middleware is active in all environments.

If middleware is conditionally included only in development, production errors won't be logged remotely.

🔀 Workflow

expert

Implementing a robust error logging workflow in Next.js

Which sequence of steps correctly describes a robust error logging workflow for a Next.js app that uses Sentry and Winston?

A 1, 2, 3, 4

B 1, 3, 2, 4

C 2, 1, 3, 4

D 3, 1, 2, 4

💡 Hint

Think about capturing errors first, then reporting and logging, finally responding to the user.

The correct workflow is to catch errors, report to Sentry, log locally, then respond to the client.