Как frontend взаимодействует с backend при поиске багов?

Взаимодействие frontend и backend при поиске багов

Когда возникает баг, важно понять, на какой стороне он произошел. Frontend отправляет запросы к backend через API, обычно используя HTTP. Если ответ неожиданный, нужно проверить как запрос, так и ответ.

Инструменты для диагностики

• Инструменты разработчика в браузере (вкладка Network) показывают все запросы, их заголовки, тело и статус-коды.
• Логи на сервере помогают увидеть, как обрабатывается запрос и какие ошибки возникают.
• Postman или curl позволяют тестировать API независимо от frontend.

Пример кода

// Frontend: отправка запроса
fetch('/api/data')
  .then(response => {
    if (!response.ok) {
      throw new Error('Server error: ' + response.status);
    }
    return response.json();
  })
  .then(data => console.log(data))
  .catch(error => console.error('Fetch error:', error));

// Backend (Node.js/Express): обработка запроса
app.get('/api/data', (req, res) => {
  try {
    const data = getData();
    res.json(data);
  } catch (err) {
    console.error('Backend error:', err);
    res.status(500).json({ error: 'Internal server error' });
  }
});

Вывод

Понимание взаимодействия frontend и backend помогает быстро локализовать баг и исправить его на нужной стороне, экономя время и ресурсы команды.