Request Logging Wrapper

Introduction: The Value of Logging in APIs

In the previous lessons, you ensured your Remix API returns consistent responses and properly validates incoming data. Now it’s time to take the next step in building a professional-grade backend: adding logging . Logging means recording what happens inside your application — especially during API requests. For a backend, logs are the closest thing to “eyes and ears.” They tell you: When a request started and finished. How long it took to run. Whether it succeeded or failed. If it failed, why it failed. Without logs, diagnosing bugs or understanding user behavior becomes guesswork. In this lesson, you’ll learn how to implement structured, timestamped logging in your Remix backend using a reusable wrapper function called withLogging .

The Purpose of Logging in Your API

Every time someone sends a request — for example, GET /api/users — you want to know: Did it reach the server successfully? How long did it take to respond? Did it return a successful 200 response or fail with a 400 or 404? If it failed, what was the error message? Logging provides exactly that. It also: Helps you debug validation and logic errors. Makes it easier to monitor API health in development and production. Creates a lightweight troubleshooting trail during development. Production audit logs require stronger guarantees such as durable storage, actor context, and tamper resistance. Even in this small project, good logging habits help you think like a backend engineer — recording what matters and interpreting it efficiently.

The Logging Wrapper Pattern

Rather than adding console.log() manually in every route, your project uses a wrapper function . A wrapper is a reusable function that adds extra behavior around your existing handler code. In this case, withLogging() automatically logs: When a request starts. Whether it succeeded or failed. How long it took. Any error message returned by the API. This pattern keeps your routes clean while maintaining full visibility.

How the withLogging Function Works

File: app/utils/withLogging.server.ts TypeScript export async function withLogging<T>(label: string, task: () => Promise<T> | T): Promise<T> {const startedAt = Date.now(); const ts = () => new Date().toISOString(); console.log(`[${ts()}] START ${label}`); try {const result = await task(); const elapsed = Date.now() - startedAt; if (result instanceof Response) {if (result.ok) {console.log(`[${ts()}] SUCCESS ${label} (${elapsed}ms)`);} else {const detail = await extractResponseDetails(result); const suffix = detail ? ` -> ${detail}` : ""; console.warn(`[${ts()}] FAIL ${label} (${elapsed}ms) [${result.status}]${suffix}`);}} else {console.log(`[${ts()}] SUCCESS ${label} (${elapsed}ms)`);} return result;} catch (error) {const elapsed = Date.now() - startedAt; console.error(`[${ts()}] ERROR ${label} (${elapsed}ms)`, error); throw error;}} Step-by-Step Explanation Timestamps and Labels: When a route starts, the logger prints a “START” message with the HTTP method and endpoint label, e.g., [2025-10-17T16:31:40.123Z] START GET /api/users. Measuring Duration: The function records the start time, runs your actual API logic, and measures how long it takes to complete. Result Inspection: If your route returns a Response, withLogging checks whether it succeeded (ok === true). On success, it logs SUCCESS with duration. On failure, it extracts details from the JSON body (like validation messages) and logs FAIL with the status code and message. Error Handling: If your code throws an unexpected exception, it logs ERROR with the full stack trace, helping you debug server issues. This design works for any route or asynchronous task. You can wrap loaders, actions, or service calls without changing their core logic.

Join the 1M+ learners on CodeSignal

Be a part of our community of 1M+ users who develop and demonstrate their skills on CodeSignal

Introduction: The Value of Logging in APIs

The Purpose of Logging in Your API

The Logging Wrapper Pattern

How the withLogging Function Works

Join the 1M+ learners on CodeSignal

Using withLogging in Your Routes

Example Logs You’ll See in the Console

Why This Approach Is Better

Summary