Day 18: Errors, try…catch & Debugging

const tests = [
  () => undefinedVariable + 1,                  // ReferenceError
  () => null.name,                              // TypeError
  () => (42).toUpperCase(),                     // TypeError
  () => new Array(-1),                          // RangeError
  () => JSON.parse('{bad json}'),               // SyntaxError (at runtime, from JSON)
];
for (const t of tests) {
  try { t(); } catch (err) { console.log(`${err.name}: ${err.message}`); }
}

function loadSavedCart(json) {
  try {
    const cart = JSON.parse(json);               // may throw
    console.log('Loaded', cart.items.length, 'items');
    return cart;
  } catch (err) {
    console.log('Could not read the saved cart →', err.name);
    return { items: [] };                        // recover with a safe default
  } finally {
    console.log('finally: runs either way (hide the loader, close the file…)');
  }
}
loadSavedCart('{"items":[{"id":1}]}');
loadSavedCart('{corrupted');

class ValidationError extends Error {
  constructor(field, message) {
    super(message);
    this.name = 'ValidationError';
    this.field = field;
  }
}

function createOrder({ name, phone, qty }) {
  // guard clauses: check bad input first, exit early, keep the happy path flat
  if (!name || name.trim().length < 2) throw new ValidationError('name', 'Name is too short');
  if (!/^[6-9]\d{9}$/.test(phone)) throw new ValidationError('phone', 'Invalid mobile number');
  if (!(qty > 0 && qty <= 50)) throw new ValidationError('qty', 'Quantity must be 0–50 kg');
  return { id: 'SS' + 1042, name, phone, qty };
}

for (const input of [{ name: 'Aarti', phone: '9829012345', qty: 2 }, { name: 'Aarti', phone: '12345', qty: 2 }, { name: 'A', phone: '9829012345', qty: 2 }]) {
  try {
    console.log('✅', createOrder(input).id);
  } catch (err) {
    if (err instanceof ValidationError) console.log(`⚠️ ${err.field}: ${err.message}`);
    else throw err;                                  // unknown problem → do not hide it
  }
}

const order = { id: 1042, items: [{ name: 'Ghewar', qty: 2 }], total: 1300 };
console.log('plain:', order);
console.warn('⚠️ low stock for Ghewar');             // yellow in DevTools
console.error('❌ payment failed for order', order.id);
console.table(order.items);
console.group('Order 1042');
console.log('customer: Aarti');
console.log('total: ₹' + order.total);
console.groupEnd();
console.time('loop');
let s = 0; for (let i = 0; i < 1e6; i++) s += i;
console.timeEnd('loop');
console.assert(order.total > 0, 'total must be positive');      // prints only if false
console.count('render'); console.count('render');

<button id="ok">Working button</button>
<button id="bad">Buggy button</button>
<div id="toast" role="alert" hidden style="margin-top:10px;padding:10px 14px;border-radius:10px;background:#fee2e2;color:#7f1d1d"></div>

<script>
// Last line of defence: show a friendly message and report the error
window.addEventListener('error', (event) => {
  const toast = document.querySelector('#toast');
  toast.textContent = 'Sorry, something went wrong. Please try again or call +91 98290 12345.';
  toast.hidden = false;
  console.error('Reported to developers:', event.message, 'at line', event.lineno);
  // in production: send to a logging service (Sentry, your own API) here
});
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled promise:', event.reason);
});

document.querySelector('#ok').addEventListener('click', () => alert('Order button works ✅'));
document.querySelector('#bad').addEventListener('click', () => {
  const cart = null;
  return cart.items.length;          // 💥 TypeError on purpose
});
</script>