NextJS Testing and Debugging Flashcards

24 sample cards from the Testing and Debugging deck

Sampled from the end of the deck, so these are different cards from the ones shown on the syllabus page.

1. How are API routes structured in the Next.js App Router?

   In the App Router, API routes are Route Handlers defined in a route.js/route.ts file inside the app directory. You export async functions named after HTTP methods (GET, POST, PUT, DELETE, etc.) that receive a Request and return a Response.

2. In a Next.js App Router Route Handler, how do you return JSON data with a status code?

   Return `NextResponse.json(data, { status: 200 })` (from next/server) or a standard `Response.json(data, { status })`. The status option sets the HTTP status code of the response.

3. How do you read query parameters and the request body in a Next.js Route Handler?

   Query params: use `new URL(request.url).searchParams.get('key')` or the nextUrl.searchParams. Body: await `request.json()` for JSON or `request.formData()` for form data.

4. What are two common strategies for testing Next.js API routes?

   1) Unit-style: import the route handler and invoke it with a mock/constructed Request, asserting on the returned Response. 2) Integration/E2E: start the server (or use a library like supertest/next-test-api-route-handler) and make real HTTP requests against the endpoint.

5. How can you mock a database or external service when testing an API route?

   Use jest.mock to replace the data-access module or fetch, returning controlled data. This isolates the route logic from the real database/network so tests are deterministic, fast, and free of side effects.

6. What is the difference between testing the App Router route.ts handlers and legacy pages/api handlers?

   App Router handlers use the Web Request/Response API (you pass a Request, get a Response). Legacy pages/api handlers use Node req/res objects (NextApiRequest/NextApiResponse), often tested with mocks like node-mocks-http or supertest.

7. How do you start debugging a Next.js app with the Node.js inspector?

   Run Next.js with the inspect flag, e.g., `NODE_OPTIONS='--inspect' next dev`. This starts the V8 inspector so you can attach Chrome DevTools (chrome://inspect) or a VS Code debugger to set breakpoints in server-side code.

8. How do you debug server-side vs client-side Next.js code?

   Server-side code (Server Components, Route Handlers, getServerSideProps) is debugged via the Node inspector (--inspect) attaching DevTools/VS Code. Client-side code runs in the browser and is debugged with the browser's built-in DevTools sources panel.

9. How do you configure VS Code to debug a Next.js full-stack app?

   Add a launch.json configuration (e.g., using the 'Next.js: debug full stack' compound config) that runs `next dev` with the inspector for the server and attaches a Chrome/Edge debugger for the client, letting you set breakpoints in both.

10. What is the difference between the debugger statement and a breakpoint set in DevTools?

    The `debugger` statement is written directly in source code and pauses execution wherever it runs when devtools is open. A DevTools/editor breakpoint is set via the UI on a specific line without modifying the code.

11. What is source mapping and why is it important for debugging Next.js code?

    A source map maps compiled/minified/transpiled output back to the original source code. It lets the debugger show your original TypeScript/JSX with correct line numbers and variable names instead of the bundled output, making stack traces readable.

12. Name three common debugging techniques for JavaScript/Next.js applications.

    1) Logging with console.log/console.error/console.table to inspect values. 2) Setting breakpoints and stepping through code in a debugger. 3) Reading and tracing stack traces to locate the origin of an error. (Others: binary search/bisecting, and using React DevTools.)

13. What is the difference between console.log, console.error, and console.warn?

    console.log writes general informational output to stdout; console.warn writes a warning (often yellow, to stderr); console.error writes an error message (often red, to stderr). Using the right level aids filtering and severity clarity in logs.

14. What does the React DevTools extension let you inspect?

    React DevTools lets you inspect the component tree, view and edit a component's props and state, inspect hooks, and use the Profiler to measure render timing and identify performance bottlenecks in a React/Next.js app.

15. What is 'rubber duck debugging'?

    Rubber duck debugging is explaining your code line by line out loud (to a rubber duck or any listener). The act of articulating the logic often reveals the flawed assumption or bug without any tooling.

16. What is a stack trace and how do you read it?

    A stack trace is the ordered list of function calls active when an error was thrown. Read it top-down: the top frame is where the error occurred, and each line below shows the caller, with file names and line numbers to trace the execution path.

17. What is the 'binary search' or bisection debugging technique?

    Bisection means narrowing down the source of a bug by repeatedly cutting the search space in half—commenting out or disabling half the code (or using git bisect on commits) to determine which half contains the fault, converging on the cause quickly.

18. Why is debugging in production more challenging than in development?

    In production the code is minified/optimized, source maps may be absent, you cannot easily pause execution or add breakpoints on live traffic, real user data and load conditions are hard to reproduce, and adding logs risks exposing sensitive data or degrading performance.

19. What is an error boundary in React/Next.js and how is it implemented in the App Router?

    An error boundary catches JavaScript errors in its child component tree and renders a fallback UI instead of crashing. In the Next.js App Router you create an error.js/error.tsx file (a Client Component receiving error and reset props) in a route segment.

20. What is the role of source maps when debugging production errors, and what is the security tradeoff?

    Source maps let error-tracking tools (like Sentry) show original code and readable stack traces for minified production errors. The tradeoff is that publicly exposing source maps reveals your source code, so they are often uploaded privately to the monitoring service instead of served to clients.

21. What is error monitoring/observability tooling and name an example used with Next.js.

    Error monitoring tools automatically capture, aggregate, and alert on runtime errors and performance data from production. Examples include Sentry, Datadog, and LogRocket; Sentry has an official Next.js SDK that instruments client, server, and edge errors.

22. What are the three pillars of observability for debugging production systems?

    Logs (discrete, timestamped event records), metrics (aggregated numeric measurements over time such as error rate or latency), and traces (end-to-end records of a request's path across services). Together they help diagnose issues you cannot reproduce locally.

23. What is a feature flag and how does it help with production debugging/deployment?

    A feature flag is a runtime toggle that enables or disables a code path without redeploying. It helps by allowing gradual rollouts, quickly turning off a buggy feature (kill switch), and isolating changes, reducing the blast radius of production bugs.

24. What is the difference between console.error logging and using a structured logging approach in production?

    console.error prints unstructured text lines. Structured logging emits machine-parseable records (e.g., JSON with level, timestamp, request ID, context fields) that log aggregators can index, search, filter, and correlate—far more effective for diagnosing production issues at scale.

What this deck covers

Testing and Debugging flashcards FAQ