Trace And Isolate

Trace and Isolate

You are using systematic tracing and isolation techniques to narrow down where a bug originates. The goal is to find the exact location in code where behavior diverges from expectation.

Quick Reference

Binary Search Debugging

When you have a large codebase or complex flow:

1. Identify the start - Last known good state
2. Identify the end - First observed bad state
3. Test the middle - Check if behavior is good or bad
4. Repeat - Binary search on the half with the bug

Code Path Binary Search

Copy code
Start: User clicks submit button
End: Error shown to user

Midpoint 1: Form validation
→ Data looks correct here? Continue to later code
→ Data already wrong? Focus on earlier code

Midpoint 2: API request construction
→ Request payload correct? Focus on server side
→ Payload already malformed? Focus on form handling

...Continue until exact line is found

Git Bisect for Regressions

When a bug appeared between two commits:

bashCopy code
# Start bisect
git bisect start

# Mark current (broken) state as bad
git bisect bad

# Mark last known good state
git bisect good v2.3.0

# Git checks out middle commit, test and mark
git bisect good  # or git bisect bad

# Repeat until found
# Git will report: "abc123 is the first bad commit"

# Clean up
git bisect reset

Automated bisect with test script:

bashCopy code
git bisect start HEAD v2.3.0
git bisect run npm test -- --grep "failing test"

Tracing Techniques

Strategic Logging

Add temporary logging at key points:

typescriptCopy code
function processOrder(order) {
  console.log('[TRACE] processOrder input:', JSON.stringify(order));

  const validated = validateOrder(order);
  console.log('[TRACE] after validation:', JSON.stringify(validated));

  const priced = calculatePrice(validated);
  console.log('[TRACE] after pricing:', JSON.stringify(priced));

  const result = submitOrder(priced);
  console.log('[TRACE] final result:', JSON.stringify(result));

  return result;
}

Log template: [TRACE] <location>: <what> = <value>

Data Flow Tracing

Track how data transforms through the system:

Copy code
Input: { userId: "123", items: [...] }
    ↓
validateUser() → { userId: "123", verified: true }
    ↓
enrichItems() → { userId: "123", verified: true, items: [...enriched] }
    ↓
calculateTotals() → { ..., subtotal: 100, tax: 8, total: 108 }
    ↓
Output: { orderId: "456", total: 108 }

At each step, verify:

• Is the input what you expected?
• Is the output what you expected?
• Where does expected diverge from actual?

Control Flow Tracing

Track which code paths execute:

typescriptCopy code
function handleRequest(req) {
  console.log('[TRACE] handleRequest entered');

  if (req.authenticated) {
    console.log('[TRACE] authenticated path');
    if (req.isAdmin) {
      console.log('[TRACE] admin path');
      return handleAdminRequest(req);
    } else {
      console.log('[TRACE] user path');
      return handleUserRequest(req);
    }
  } else {
    console.log('[TRACE] unauthenticated path');
    return handlePublicRequest(req);
  }
}

Isolation Techniques

Component Isolation

Test components in isolation to determine which is faulty:

Copy code
Full System: Frontend → API → Database
              ↓
Test 1: Frontend → Mock API
        → Works? Problem is in API or Database

Test 2: Real API → Mock Database
        → Works? Problem is in Database

Test 3: API with minimal data
        → Works? Problem is data-dependent

Minimal Reproduction

Strip away everything non-essential:

1. Remove unrelated code - Comment out or delete
2. Simplify data - Use minimal test data
3. Remove dependencies - Mock external services
4. Reduce scope - Single function/component

Goal: Smallest possible code that still shows the bug

Environment Isolation

Eliminate environmental factors:

• Same behavior in different browsers?
• Same behavior on different machines?
• Same behavior with fresh data?
• Same behavior after clearing cache?
• Same behavior with default config?

Breakpoint Strategies

Strategic Breakpoint Placement

typescriptCopy code
function complexFunction(input) {
  // BREAKPOINT 1: Entry - check input
  const step1 = transform(input);
  // BREAKPOINT 2: After first transformation

  for (const item of step1.items) {
    // BREAKPOINT 3: Inside loop - conditional on item
    process(item);
  }

  // BREAKPOINT 4: Exit - check output
  return finalize(step1);
}

Conditional Breakpoints

Only break when condition is met:

• item.id === "problematic-id"
• count > 100
• response.status !== 200

Watch Expressions

Monitor values without stopping:

• this.state.items.length
• performance.now() - startTime
• Object.keys(cache).length

Isolation Checklist

Before declaring a component faulty:

• Tested in complete isolation?
• All inputs verified correct?
• All dependencies mocked/verified?
• Tested with known-good data?
• Reproduced on clean environment?

Common Isolation Patterns

Database Isolation

sqlCopy code
-- Create isolated test data
BEGIN TRANSACTION;
-- Insert test data
-- Run test queries
-- Verify results
ROLLBACK;

Network Isolation

typescriptCopy code
// Intercept and log all network requests
const originalFetch = window.fetch;
window.fetch = async (...args) => {
  console.log('[TRACE] fetch:', args[0]);
  const response = await originalFetch(...args);
  console.log('[TRACE] response:', response.status);
  return response;
};

Time Isolation

typescriptCopy code
// Control time for debugging
const realNow = Date.now;
Date.now = () => {
  const time = realNow();
  console.log('[TRACE] Date.now():', new Date(time).toISOString());
  return time;
};

When to Move On

Stop isolating when you have:

• Exact file and line number
• Minimal reproduction case
• Clear understanding of trigger conditions
• Evidence for root cause hypothesis