Building Custom Error Class Hierarchies for Async Vue Handlers

class AppError extends Error {
  constructor(message, statusCode = 500) {
    super(message);
    this.name = this.constructor.name;
    this.statusCode = statusCode;
  }
}
 
class ValidationError extends AppError {
  constructor(message, fields = {}) {
    super(message, 422);
    this.fields = fields;
  }
}
 
export async function fetchUserData(userId, errorStateRef) {
  try {
    if (!userId) throw new ValidationError('User ID missing', { userId: 'Required' });
    const res = await fetch(`/api/users/${userId}`);
    if (!res.ok) throw new AppError('Server error', res.status);
    return await res.json();
  } catch (err) {
    if (err instanceof ValidationError) {
      errorStateRef.value = `Validation failed: ${JSON.stringify(err.fields)}`;
    } else {
      errorStateRef.value = 'An unexpected error occurred';
    }
  }
}