typescript-coding-standards

TypeScript Coding Standards

Write production TypeScript code that is maintainable, observable, and follows modern patterns.

Structured Logging with Pino

Use pino logger for structured JSON logging. The logger auto-silences during tests and provides pretty formatting in development.

import { logger } from "@/lib/logger";

logger.info({ userId, email, service }, "User authenticated");
logger.error({ error, userEmail, action }, "Failed to execute action");
logger.warn({ retryCount, url }, "HTTP request retry");
logger.debug({ requestId, method }, "Processing request");

For client-side code, use the client logger which works in browsers:

import { logger } from "@/lib/client-logger";

logger.error({ error, context }, "Failed to copy text");
logger.info({ service }, "Connection successful");

The first argument is ALWAYS a context object (even if empty {}), the second is ALWAYS the message string. Structure your context with meaningful keys that help debug issues. Use emojis in messages when they add clarity and make logs more scannable.

Never use console.log, console.error, console.warn, or console.info directly. Always use the appropriate logger for consistent structured logging.

Error Monitoring with Sentry

Sentry captures errors with rich context for observability. Add context at error boundaries to make debugging easier.

Capture exceptions with tags and extra data:

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

try {
  await riskyOperation();
} catch (error) {
  logger.error({ error, userId }, "Operation failed");

  Sentry.captureException(error, {
    tags: { component: "api", action: "send_email" },
    extra: { userId, messageId, attemptCount },
  });

  throw error;
}

Add breadcrumbs for important state changes:

Sentry.addBreadcrumb({
  category: "http.retry",
  message: `Retrying ${method} ${url}`,
  level: "warning",
  data: { url, retryCount },
});

Create spans for performance monitoring: