Logging

Detailed Explanation

Logging is the practice of adding strategic messages throughout your code that record what's happening as your Web Application runs. When something goes wrong, these messages become breadcrumbs that help you trace the problem.

The simplest form is console.log() in JavaScript:

console.log('[LOADER] Starting posts loader');
console.log('[LOADER] Fetched', posts.length, 'posts');
console.log('[ERROR] Failed to fetch posts:', error.message);

Structured logging uses consistent prefixes to organize messages:

• [AUTH] — Authentication operations (login, logout, token refresh)
• [LOADER] — Loader data fetching
• [ACTION] — Action form processing
• [ERROR] — Error details
• [RLS] — Row Level Security issues

In development, you see logs in the browser console (F12). In production, you check Supabase Dashboard logs — API logs, Auth logs, and Edge Function logs — since you can't open a user's browser console.

Good logging follows a pattern: log at entry (function started), log at exit (function finished), and log errors (what went wrong and why). This lets you reconstruct what happened even after the fact. Claude Code can add structured logging to your entire app in one ask: "Add structured logging with prefixes to all my loaders and actions."

The key insight: good logging isn't about logging everything — it's about logging the right things so you can debug in 30 seconds instead of 30 minutes.

In Production, logging is your only way to diagnose issues since you can't add console.logs to a user's browser. Common logs trace undefined values, Permission errors, and RLS failures.