Error Handling

{
  "data": null,
  "errors": [
    {
      "message": "Missing required header: X-Session-ID",
      "extensions": {
        "code": "MISSING_HEADER",
        "field": "X-Session-ID"
      },
      "path": ["search"]
    }
  ]
}

async function smartMenuQuery(query, variables) {
  try {
    const response = await fetch(ENDPOINT, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': API_KEY,
        'X-Session-ID': sessionId,
      },
      body: JSON.stringify({ query, variables })
    });

    // Handle HTTP errors
    if (!response.ok) {
      if (response.status === 429) {
        const retryAfter = response.headers.get('Retry-After') || 5;
        throw new RateLimitError(retryAfter);
      }
      throw new ApiError(response.status, 'API request failed');
    }

    const { data, errors } = await response.json();

    // Handle GraphQL errors
    if (errors && errors.length > 0) {
      const error = errors[0];
      throw new GraphQLError(
        error.message,
        error.extensions?.code
      );
    }

    return data;
  } catch (error) {
    handleError(error);
    throw error;
  }
}

class ApiError extends Error {
  constructor(public status: number, message: string) {
    super(message);
    this.name = 'ApiError';
  }
}

class GraphQLError extends Error {
  constructor(message: string, public code?: string) {
    super(message);
    this.name = 'GraphQLError';
  }
}

class RateLimitError extends Error {
  constructor(public retryAfter: number) {
    super(`Rate limited. Retry after ${retryAfter} seconds.`);
    this.name = 'RateLimitError';
  }
}

function handleError(error: Error) {
  if (error instanceof RateLimitError) {
    // Show temporary message, auto-retry
    showToast(`Please wait ${error.retryAfter} seconds...`);
    return;
  }

  if (error instanceof GraphQLError) {
    switch (error.code) {
      case 'DISH_NOT_FOUND':
        showToast('This dish is no longer available');
        break;
      case 'CHAIN_NOT_FOUND':
        showToast('Restaurant not found');
        break;
      case 'INVALID_TOKEN':
        // This shouldn't happen in production
        console.error('Invalid API key');
        break;
      default:
        showToast('Something went wrong. Please try again.');
    }
    return;
  }

  // Network or unexpected errors
  showToast('Unable to load menu. Please check your connection.');
}

async function getDishDetails(dishId) {
  try {
    // Try SmartMenu API
    const data = await smartMenuQuery(DISH_QUERY, { id: dishId });
    return {
      ...data.dish,
      nutritionAvailable: true
    };
  } catch (error) {
    console.error('SmartMenu API error:', error);

    // Fall back to your own data (without nutrition)
    const localDish = await getLocalDishData(dishId);
    return {
      ...localDish,
      nutritionAvailable: false,
      nutrition: null,
      allergens: [],
      diets: []
    };
  }
}

function DishDetails({ dish }) {
  if (!dish.nutritionAvailable) {
    return (
      <div className="dish-details">
        <h2>{dish.name}</h2>
        <p>{dish.description}</p>

        <div className="nutrition-unavailable">
          <InfoIcon />
          <span>Nutrition information temporarily unavailable</span>
        </div>
      </div>
    );
  }

  return (
    <div className="dish-details">
      <h2>{dish.name}</h2>
      <p>{dish.description}</p>
      <NutritionPanel nutrition={dish.nutrition} />
      <AllergenBadges allergens={dish.allergens} />
    </div>
  );
}

async function fetchWithRetry(
  fn: () => Promise<any>,
  maxRetries = 3,
  baseDelay = 1000
) {
  let lastError: Error;

  for (let attempt = 0; attempt < maxRetries; attempt++) {
    try {
      return await fn();
    } catch (error) {
      lastError = error;

      // Don't retry client errors (4xx)
      if (error instanceof ApiError && error.status < 500) {
        throw error;
      }

      // Don't retry on last attempt
      if (attempt === maxRetries - 1) {
        throw error;
      }

      // Exponential backoff with jitter
      const delay = baseDelay * Math.pow(2, attempt) + Math.random() * 1000;
      await sleep(delay);
    }
  }

  throw lastError;
}

// Usage
const data = await fetchWithRetry(() =>
  smartMenuQuery(SEARCH_QUERY, variables)
);

async function fetchWithRateLimitRetry(fn: () => Promise<any>) {
  try {
    return await fn();
  } catch (error) {
    if (error instanceof RateLimitError) {
      // Wait for the specified time
      await sleep(error.retryAfter * 1000);
      // Retry once
      return await fn();
    }
    throw error;
  }
}

function logError(error: Error, context: object) {
  const errorLog = {
    timestamp: new Date().toISOString(),
    name: error.name,
    message: error.message,
    code: error instanceof GraphQLError ? error.code : undefined,
    ...context
  };

  // Send to your logging service
  console.error('SmartMenu API Error:', errorLog);

  // Track in analytics
  analytics.track('smartmenu_error', {
    error_type: error.name,
    error_code: error instanceof GraphQLError ? error.code : 'unknown',
    ...context
  });
}