Как называются части для разделения кода в Webpack?

Как определял баги с Backend?

Инструменты для тестирования Backend

Network Inspector (DevTools) — основной инструмент:

1. F12 -> Network вкладка
2. Фильтр: /api
3. Кликаю на запрос и вижу:
   • Status (200, 400, 500, etc)
   • Request headers и body
   • Response body
   • Timing

// === Логирование ответов ===

const api = async (url, options = {}) => {
  const response = await fetch(url, options);
  const data = await response.json();

  // Логируем если ошибка
  if (!response.ok) {
    console.error(`API Error [${response.status}]:`, {
      url,
      status: response.status,
      error: data.error || data.message,
      response: data,
    });
  }

  return { data, status: response.status };
};

Отслеживание ошибок

Сервис мониторинга (Sentry):

• npm install @sentry/react
• Настраиваю в app.tsx
• Все ошибки логируются на сервер Sentry
• Вижу stack trace, окружение, браузер пользователя

import * as Sentry from "@sentry/react";

Sentry.init({
  dsn: process.env.REACT_APP_SENTRY_DSN,
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

// Перехватываю ошибки
Sentry.captureException(error);

Общение с Backend разработчиком

1. Проверяю Network вкладку — статус, response
2. Читаю error message из API
3. Проверяю curl/Postman — может быть проблема в клиенте
4. Создаю issue в Jira с:
   • скриншотом Network
   • шагами воспроизведения
   • ожидаемым поведением

Пример баг-репорта

Баг: POST /api/users/profile возвращает 500 при сохранении профиля

Шаги:
1. Авторизуемся
2. Идём в /profile
3. Меняем имя
4. Жмём Save

Ожидается: 200 OK, профиль сохранён
Получается: 500 Internal Server Error

Network:
Request: POST /api/users/profile
Body: {"name": "John"}
Response: {"error": "Internal server error"}

Console: нет ошибок
Sentry: [линк на event]