Grouping Logs Together with console.group() JS

console.group('User Profile Load');
console.log('Fetching user ID: 12345');
console.log('Response status: 200');
console.log('User name: Alice Chen');
console.log('Role: admin');
console.groupEnd();
 
console.group('Dashboard Data');
console.log('Loading charts...');
console.log('5 widgets initialized');
console.groupEnd();

async function loadProductCatalog() {
  console.group('Product Catalog');
  console.log('Fetching catalog from API...');
  
  const response = await fetch('/api/products');
  const products = await response.json();
  
  console.log(`Loaded ${products.length} products`);
  
  // Detailed per-product data — collapsed by default
  console.groupCollapsed(`Product Details (${products.length} items)`);
  products.forEach(product => {
    console.log(`${product.name}: $${product.price} (${product.stock} in stock)`);
  });
  console.groupEnd(); // Closes "Product Details"
  
  console.log('Catalog ready');
  console.groupEnd(); // Closes "Product Catalog"
  
  return products;
}

function processCheckout(cart) {
  console.group('Checkout Process');
  
  console.group('Cart Validation');
  console.log(`Items: ${cart.items.length}`);
  console.log(`Subtotal: $${cart.subtotal}`);
  
  const invalidItems = cart.items.filter(item => item.stock === 0);
  if (invalidItems.length > 0) {
    console.warn(`${invalidItems.length} items are out of stock`);
  } else {
    console.log('All items in stock');
  }
  console.groupEnd(); // Closes "Cart Validation"
  
  console.group('Payment Processing');
  console.log(`Payment method: ${cart.paymentMethod}`);
  console.log('Contacting payment gateway...');
  console.log('Payment authorized');
  console.groupEnd(); // Closes "Payment Processing"
  
  console.group('Order Confirmation');
  console.log(`Order ID: ORD-${Date.now()}`);
  console.log('Confirmation email sent');
  console.groupEnd(); // Closes "Order Confirmation"
  
  console.groupEnd(); // Closes "Checkout Process"
}

async function apiCall(endpoint, options = {}) {
  const method = options.method || 'GET';
  const label = `${method} ${endpoint}`;
  
  console.group(label);
  console.time(label);
  
  if (options.body) {
    console.groupCollapsed('Request Body');
    console.log(JSON.parse(options.body));
    console.groupEnd();
  }
  
  try {
    const response = await fetch(endpoint, options);
    const data = await response.json();
    
    console.log('Status:', response.status);
    console.groupCollapsed('Response Body');
    console.log(data);
    console.groupEnd();
    
    console.timeEnd(label);
    console.groupEnd();
    return data;
  } catch (error) {
    console.error('Request failed:', error.message);
    console.timeEnd(label);
    console.groupEnd();
    throw error;
  }
}
 
// Usage
await apiCall('/api/users', {
  method: 'POST',
  body: JSON.stringify({ name: 'Alice', role: 'admin' }),
  headers: { 'Content-Type': 'application/json' },
});

function processInvoices(invoices) {
  console.group(`Processing ${invoices.length} invoices`);
  
  invoices.forEach((invoice, index) => {
    const hasIssue = invoice.total <= 0 || !invoice.customer;
    const groupMethod = hasIssue ? 'group' : 'groupCollapsed';
    
    console[groupMethod](`Invoice #${invoice.id} (${invoice.customer || 'MISSING'})`);
    
    console.log('Total:', invoice.total);
    console.log('Items:', invoice.items.length);
    console.log('Date:', invoice.date);
    
    if (invoice.total <= 0) {
      console.error('Invalid total: must be positive');
    }
    if (!invoice.customer) {
      console.error('Missing customer name');
    }
    
    console.groupEnd();
  });
  
  console.groupEnd();
}

function attachFormDebugger(form) {
  form.addEventListener('focus', (e) => {
    console.groupCollapsed(`Focus: ${e.target.name || e.target.tagName}`);
    console.log('Element:', e.target);
    console.log('Related target:', e.relatedTarget);
    console.groupEnd();
  }, true);
  
  form.addEventListener('input', (e) => {
    console.groupCollapsed(`Input: ${e.target.name}`);
    console.log('Value:', e.target.value);
    console.log('Valid:', e.target.validity.valid);
    console.groupEnd();
  });
  
  form.addEventListener('submit', (e) => {
    e.preventDefault();
    console.group('Form Submit');
    const formData = new FormData(form);
    for (const [key, value] of formData) {
      console.log(`${key}: ${value}`);
    }
    console.groupEnd();
  });
}

const debugGroup = {
  start(label) {
    if (process.env.NODE_ENV === 'development') {
      console.group(label);
    }
  },
  startCollapsed(label) {
    if (process.env.NODE_ENV === 'development') {
      console.groupCollapsed(label);
    }
  },
  end() {
    if (process.env.NODE_ENV === 'development') {
      console.groupEnd();
    }
  },
};
 
// Usage — groups only appear in development
debugGroup.start('Auth Flow');
console.log('Checking token...');
debugGroup.end();

function auditUserPermissions(user) {
  console.group(`Permission Audit: ${user.name}`);
  
  console.table(user.permissions.map(p => ({
    resource: p.resource,
    action: p.action,
    granted: p.granted ? 'Yes' : 'No',
  })));
  
  const deniedCount = user.permissions.filter(p => !p.granted).length;
  
  if (deniedCount > 0) {
    console.warn(`${deniedCount} permissions are denied`);
  }
  
  console.assert(
    user.permissions.some(p => p.resource === 'admin'),
    'User has no admin-related permissions'
  );
  
  console.time('Policy evaluation');
  // ... evaluate complex access policies
  console.timeEnd('Policy evaluation');
  
  console.groupEnd();
}

// Bad — group stays open if fetch fails
function loadData() {
  console.group('Loading data');
  
  try {
    const data = fetchSync('/api/data');
    console.log('Loaded:', data);
  } catch (error) {
    console.error('Failed:', error);
    return; // Group is never closed!
  }
  
  console.groupEnd();
}
 
// Good — groupEnd in finally
function loadData() {
  console.group('Loading data');
  
  try {
    const data = fetchSync('/api/data');
    console.log('Loaded:', data);
  } catch (error) {
    console.error('Failed:', error);
  } finally {
    console.groupEnd(); // Always closes
  }
}