javascript 104 lines · 1 tab

Error handling and debugging techniques in JavaScript

Alex Chang Feb 2026
1 tab
// Basic try-catch
try {
  const result = riskyOperation();
  console.log('Success:', result);
} catch (error) {
  console.error('Error occurred:', error.message);
}

// Try-catch-finally
try {
  performOperation();
} catch (error) {
  console.error('Error:', error);
} finally {
  cleanup(); // Always runs
}

// Throwing errors
function divide(a, b) {
  if (b === 0) {
    throw new Error('Division by zero!');
  }
  return a / b;
}

try {
  console.log(divide(10, 0));
} catch (error) {
  console.error(error.message);
}

// Custom error types
class ValidationError extends Error {
  constructor(message) {
    super(message);
    this.name = 'ValidationError';
  }
}

function validateUser(user) {
  if (!user.email) {
    throw new ValidationError('Email is required');
  }
}

try {
  validateUser({ name: 'Alice' });
} catch (error) {
  if (error instanceof ValidationError) {
    console.error('Validation failed:', error.message);
  }
}

// Console methods
console.log('Regular log');
console.info('Information');
console.warn('Warning!');
console.error('Error!');

const users = [
  { id: 1, name: 'Alice', age: 25 },
  { id: 2, name: 'Bob', age: 30 }
];
console.table(users);

// Console timing
console.time('operation');
for (let i = 0; i < 1000000; i++) {}
console.timeEnd('operation');

// Console trace
function level1() { level2(); }
function level2() { level3(); }
function level3() { console.trace('Call stack'); }
level1();

// Debugger statement
function complexFunction(data) {
  debugger; // Pauses in DevTools
  return processData(data);
}

// Global error handler
window.addEventListener('error', (event) => {
  console.error('Global error:', event.error);
  console.error('File:', event.filename);
  console.error('Line:', event.lineno);
});

// Unhandled promise rejections
window.addEventListener('unhandledrejection', (event) => {
  console.error('Unhandled rejection:', event.reason);
});

// Defensive programming
function safeAccess(obj, path, defaultValue = null) {
  return path.split('.').reduce((current, key) => {
    return current?.[key];
  }, obj) ?? defaultValue;
}

const user = { profile: { name: 'Alice' } };
console.log(safeAccess(user, 'profile.name')); // 'Alice'
console.log(safeAccess(user, 'profile.age', 0)); // 0
1 file · javascript Explain with highlit

JavaScript error handling uses try...catch...finally blocks to manage exceptions gracefully. I throw custom errors with throw new Error('message') for better debugging. The finally block runs regardless of success or failure. Using console.error(), console.warn(), and console.log() provides different severity levels. The console.table() displays arrays and objects in table format. Debugger statements pause execution for inspection with debugger; keyword. Browser DevTools breakpoints allow stepping through code. The console.trace() shows call stack. Stack traces help identify error origins. Understanding error types (TypeError, ReferenceError, SyntaxError) aids debugging. I use source maps for debugging minified code. Error boundaries catch React component errors.


Related snips

javascript
// Creating a Promise
const myPromise = new Promise((resolve, reject) => {
  const success = true;

  setTimeout(() => {
    if (success) {

Promises and async/await patterns for asynchronous JavaScript

javascript promises async-await
by Alex Chang 1 tab
javascript
import { Controller } from "@hotwired/stimulus"
import Mousetrap from "mousetrap"

export default class extends Controller {
  connect() {
    // Global shortcuts

Keyboard shortcuts with Stimulus and Mousetrap

stimulus javascript ux
by Jordan Lee 2 tabs
javascript
// Get canvas and context
const canvas = document.getElementById('myCanvas');
const ctx = canvas.getContext('2d');

// 1. Basic shapes
// Rectangle (filled)

Canvas API for graphics and animations

canvas javascript graphics
by Alex Chang 1 tab
ruby
class CreateDeadJobs < ActiveRecord::Migration[7.1]
  def change
    create_table :dead_jobs do |t|
      t.string  :jid, null: false
      t.string  :queue, null: false
      t.string  :klass, null: false

Background Job Dead Letter Queue (DLQ) Table

rails reliability background-jobs
by codesnips 4 tabs
javascript
// Basic event listener
const button = document.getElementById('myButton');

button.addEventListener('click', function(event) {
  console.log('Button clicked!');
  console.log('Event type:', event.type);

Event handling and event delegation patterns in JavaScript

javascript events event-delegation
by Alex Chang 1 tab
typescript
import axios from 'axios';

export type NormalizedErrors = {
  fields: Record<string, string>;
  formLevel: string | null;
};

Frontend: normalize and display server validation errors

ux typescript react
by codesnips 3 tabs

Share this code

Here's the card — post it anywhere.

Error handling and debugging techniques in JavaScript — share card
Link copied