Browser Logs

Browser Console:
┌────────────────────────────────────────────────────┐
│ [0:05] ℹ️ Application started v2.1.4             │
│ [0:08] ℹ️ API endpoint: https://api.example.com  │
│ [0:12] ✓ User session initialized                │
│ [0:15] ⚠️ Deprecated function used: getUserId()  │
│ [0:18] ℹ️ Fetching user data...                  │
│ [0:22] ✓ User data loaded                        │
│ [0:25] ❌ TypeError: Cannot read property 'id'   │
│        at UserProfile.render (app.js:234:15)     │
│ [0:28] ⚠️ Re-rendering component                 │
│ [0:30] ℹ️ Navigation: /dashboard                 │
└────────────────────────────────────────────────────┘

JavaScript Errors:
┌────────────────────────────────────────────────────┐
│ [0:25] ❌ TypeError: Cannot read property 'id'    │
│                                                    │
│ Error Details:                                     │
│ Type: TypeError                                    │
│ Message: Cannot read property 'id' of undefined    │
│                                                    │
│ Stack Trace:                                       │
│   at UserProfile.render (app.js:234:15)           │
│   at App.renderProfile (app.js:56:8)              │
│   at HTMLButtonElement.<anonymous> (app.js:42:12) │
│                                                    │
│ Source Location:                                   │
│ File: app.js                                       │
│ Line: 234                                          │
│ Column: 15                                         │
│                                                    │
│ Context:                                           │
│ 232:   renderProfile() {                          │
│ 233:     const user = this.getUser();             │
│ 234:     console.log(user.id);  // Error here     │
│ 235:     return `<div>${user.name}</div>`;        │
│ 236:   }                                           │
└────────────────────────────────────────────────────┘

Promise Rejections:
┌────────────────────────────────────────────────────┐
│ [0:32] ❌ Unhandled Promise Rejection              │
│                                                    │
│ Reason: NetworkError: Failed to fetch              │
│ Promise: Promise {<rejected>}                      │
│                                                    │
│ Origin:                                            │
│   at fetchUserData (api.js:45)                    │
│   at async loadDashboard (app.js:123)             │
│                                                    │
│ Request Details:                                   │
│ URL: https://api.example.com/user/123              │
│ Method: GET                                        │
│ Status: Network failure                            │
└────────────────────────────────────────────────────┘

// Your application code
console.log('User logged in:', user.email);
console.info('Loading dashboard data...');
console.warn('API response time exceeded 2s');
console.error('Failed to save user preferences');

// Debug complex objects
console.table([
  { id: 1, name: 'Alice', role: 'Admin' },
  { id: 2, name: 'Bob', role: 'User' }
]);

// All captured in TestDriver replays

[0:15] ℹ️ User logged in: [email protected]
[0:18] ℹ️ Loading dashboard data...
[0:25] ⚠️ API response time exceeded 2s
[0:30] ❌ Failed to save user preferences

[0:35] 📊 Table:
┌─────┬───────┬────────┐
│ id  │ name  │ role   │
├─────┼───────┼────────┤
│ 1   │ Alice │ Admin  │
│ 2   │ Bob   │ User   │
└─────┴───────┴────────┘

React Logs:
┌────────────────────────────────────────────────────┐
│ [0:12] ⚛️ React component mounted: <UserProfile> │
│ [0:15] ⚛️ Props changed: { userId: 123 }         │
│ [0:18] ⚛️ State updated: { loading: true }       │
│ [0:22] ⚛️ Effect ran: useEffect (deps: [userId]) │
│ [0:25] ⚛️ Component re-rendered                  │
│ [0:28] ⚛️ Effect cleanup executed                │
│ [0:30] ⚛️ Component unmounted                    │
└────────────────────────────────────────────────────┘

Library Logs:
┌────────────────────────────────────────────────────┐
│ [0:08] 📦 axios: Request sent to /api/user        │
│ [0:10] 📦 axios: Response received (200 OK)       │
│ [0:15] 📦 lodash: _.debounce called               │
│ [0:20] 📦 moment: Date formatted (YYYY-MM-DD)     │
│ [0:25] 📦 analytics: Event tracked: button_click  │
│ [0:30] ⚠️ analytics: Network request failed       │
└────────────────────────────────────────────────────┘

Browser Warnings:
┌────────────────────────────────────────────────────┐
│ [0:05] ⚠️ Mixed Content: Insecure resource loaded │
│        https://example.com loaded http://cdn...   │
│                                                    │
│ [0:12] ⚠️ Cookie without SameSite attribute       │
│        Set-Cookie: session=abc123                 │
│                                                    │
│ [0:18] ⚠️ Synchronous XMLHttpRequest deprecated   │
│        Use async requests instead                 │
│                                                    │
│ [0:25] ⚠️ localStorage quota exceeded (5MB limit) │
│        Consider using IndexedDB for large data    │
└────────────────────────────────────────────────────┘

// Standard logging
console.log('Basic log');
console.info('Info message');
console.warn('Warning');
console.error('Error');
console.debug('Debug info');

// Grouping
console.group('User Actions');
console.log('Click button');
console.log('Submit form');
console.groupEnd();

// Timing
console.time('API Call');
// ... some operation ...
console.timeEnd('API Call');  // "API Call: 234.5ms"

// Assertions
console.assert(user.id, 'User ID is required');

// Counting
console.count('render');  // "render: 1"
console.count('render');  // "render: 2"

// Stack traces
console.trace('Trace point');

// Clear (noted but not cleared in replay)
console.clear();

import { test } from 'vitest';
import { chrome } from 'testdriverai/presets';

test('check for console errors', async (context) => {
  const { testdriver, dashcam } = await chrome(context, {
    url: 'https://example.com'
  });

  await testdriver.find('submit button').click();
  
  // After test, check dashcam for console errors
  // Replay will show any JavaScript errors
  console.log('Check console:', dashcam.url);
});