Smart Logger - GritFlow Documentation

TL;DR

Smart Logger captures all console output in real-time with severity levels, timestamps, and full context. Export logs in AI-readable format so Claude can debug without you describing the error.

The Debugging Problem

You're coding and something breaks. What do you do?

Open browser DevTools
Find the error
Copy the error message
Paste into Claude
Claude asks for more context
Go back to DevTools
Copy more logs
Repeat 3-5 times

This friction destroys flow state. By the time Claude has enough context to help, you've lost momentum.

Smart Logger Solution

Smart Logger captures everything automatically:

[14:32:05] INFO   Application initialized
[14:32:07] DEBUG  User service: Fetching user data
[14:32:08] WARN   API rate limit approaching (80%)
[14:32:09] ERROR  ❌ [DataService] Supabase save failed
           │ formId: "abc123"
           │ operation: "updateApplication"
           │ error: "RLS policy violation"
           │ context: { step: 3, hasEmail: true }
           └ fix: "Check RLS policies for formId"

One click exports all this in a format Claude can instantly parse. No more back-and-forth asking for context.

Key Features

Live Log Streaming

Logs appear in real-time as they happen. No refresh needed. Severity levels color-coded: DEBUG (gray), INFO (blue), WARN (yellow), ERROR (red).

Collapsible Entries

Complex log entries with nested context are collapsible. Expand to see full details, collapse to scan quickly.

Search & Filter

Filter by severity level. Search for specific text. Find that needle in the haystack instantly.

AI-Ready Export

Export logs in a structured format optimized for AI comprehension. All timestamps, stack traces, and context preserved.

Session Persistence

Logs persist in localStorage across page refreshes. Never lose critical debugging information.

How to Use Smart Logger

1. Access the Logs

Click the Logger tab in the Smart Console. Logs stream in automatically as your application runs.

2. Filter by Severity

Use the severity buttons to filter what you see:

DEBUGINFOWARNERROR

3. Export for Claude

Click “Export” or access logs programmatically:

// In browser console
localStorage.getItem('smart-logger-export')

4. Share with Claude

Paste the exported logs into your Claude conversation:

Here are my application logs:

[exported logs]

What's causing the error on line 47?

Writing AI-Friendly Logs

To get the most out of Smart Logger, follow these patterns when writing logs:

Bad

console.error('Save failed');

Good

console.error('❌ [DataService] Supabase save failed', {
  formId: this.formId,
  operation: 'updateApplication',
  error: err.message,
  context: {
    step: this.currentStep,
    hasEmail: !!this.formData.email
  },
  fix: 'Check RLS policies for formId'
});

Pro Tip: Include a fix field suggesting how to resolve the error. Claude will use this to provide better guidance.

Benefits

Proactive Debugging

See issues before users report them. Catch warnings before they become errors.

Zero Friction

No more copy-pasting between DevTools and Claude. One click, full context.

Context Preservation

Logs persist across refreshes. Never lose critical debugging information.

AI Comprehension

Structured format helps Claude understand your application's state instantly.

Related Features

Smart Logger works best when combined with other GritFlow features.

Context Buckets Grit Monitors