Как отследить что приложение не работает в каком-либо браузере?

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

Существует множество способов обнаружить проблемы в приложении. Разберём от самых простых до продвинутых методов.

Консоль браузера (DevTools)

Это первое место, где ищут ошибки. Откройте DevTools (F12 или Ctrl+Shift+I):

// Ошибки попадают в вкладку Console
console.error('Ошибка:', error);
console.warn('Предупреждение:', warning);
console.log('Информация:', info);

// Отслеживание необработанных ошибок
window.addEventListener('error', (event) => {
  console.error('Критическая ошибка:', event.error);
  console.error('Файл:', event.filename);
  console.error('Строка:', event.lineno);
});

// Отслеживание необработанных Promise ошибок
window.addEventListener('unhandledrejection', (event) => {
  console.error('Необработанный Promise:', event.reason);
});

Встроенные инструменты браузера

Google Chrome/Edge Developer Tools:

• вкладка Console — все js ошибки
• вкладка Sources — отладка кода, точки останова
• вкладка Network — HTTP запросы и их ошибки
• вкладка Performance — медленный код
• вкладка Application — localStorage, cookies

Firefox DevTools:

• Inspector — проверка HTML/CSS
• Console — ошибки JavaScript
• Debugger — отладка с точками останова
• Performance — анализ производительности

Программное отслеживание ошибок

// Перехватить все ошибки в приложении
window.addEventListener('error', (event) => {
  const error = {
    message: event.message,
    filename: event.filename,
    lineno: event.lineno,
    colno: event.colno,
    error: event.error ? event.error.stack : null
  };

  // Отправить на сервер для логирования
  sendErrorToServer(error);

  // Или вывести пользователю
  showErrorNotification(event.message);
});

function sendErrorToServer(error) {
  fetch('/api/errors', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      timestamp: new Date().toISOString(),
      userAgent: navigator.userAgent,
      url: window.location.href,
      ...error
    })
  }).catch(err => console.error('Ошибка отправки лога:', err));
}

Try-Catch для синхронного кода

try {
  const data = JSON.parse(response);
  processData(data);
} catch (error) {
  console.error('Ошибка парсинга JSON:', error.message);
  showUserMessage('Ошибка: некорректные данные');
}

Обработка Promise ошибок

// Способ 1: .catch()
fetchUserData()
  .then(data => processData(data))
  .catch(error => {
    console.error('Ошибка загрузки:', error);
    showErrorNotification('Не удалось загрузить данные');
  });

// Способ 2: async/await с try-catch
async function loadAndProcess() {
  try {
    const data = await fetchUserData();
    const processed = await processData(data);
    return processed;
  } catch (error) {
    console.error('Ошибка в async функции:', error.message);
    throw error; // пробросить дальше если нужно
  }
}

// Способ 3: Отловить необработанные Promise
window.addEventListener('unhandledrejection', (event) => {
  console.error('Необработанная Promise ошибка:', event.reason);
  event.preventDefault(); // предотвратить краш браузера
});

Использование сервиса Error Tracking

Лучше всего использовать специализированные сервисы для отслеживания ошибок:

Sentry (самый популярный):

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

Sentry.init({
  dsn: "https://key@sentry.io/project-id",
  environment: process.env.NODE_ENV,
  tracesSampleRate: 1.0,
});

// Автоматически ловит все ошибки и отправляет на Sentry
// Можно также вручную отправить
Sentry.captureException(error);
Sentry.captureMessage('Важная информация');

// Контекст ошибки
Sentry.setUser({ id: '123', username: 'user@example.com' });
Sentry.setContext('character', { name: 'Mighty Fighter' });

Rollbar:

_rollbarConfig = {
  accessToken: "your-token",
  captureUncaught: true,
  captureUnhandledRejections: true,
};

Rollbar.init(_rollbarConfig);
Rollbar.error('Произошла ошибка', error);

Проверка совместимости браузера

// Проверить поддержку функций
function checkBrowserSupport() {
  const features = {
    fetch: typeof fetch !== 'undefined',
    localStorage: typeof localStorage !== 'undefined',
    serviceWorker: 'serviceWorker' in navigator,
    webWorker: typeof Worker !== 'undefined',
    intersectionObserver: 'IntersectionObserver' in window,
    promise: typeof Promise !== 'undefined',
  };

  console.log('Поддерживаемые возможности:', features);

  if (!features.fetch) {
    console.warn('Браузер не поддерживает Fetch API');
    // Использовать XMLHttpRequest вместо fetch
  }

  return features;
}

checkBrowserSupport();

Логирование производительности

// Измерить время выполнения операции
console.time('loadData');
await loadUserData();
console.timeEnd('loadData');
// Результат: loadData: 234ms

// Performance API
const observer = new PerformanceObserver((list) => {
  for (const entry of list.getEntries()) {
    console.log('Метрика:', entry.name, entry.duration);
  }
});

observer.observe({ entryTypes: ['measure', 'navigation'] });

// Создать собственную метрику
performance.mark('start-operation');
// ... выполнить операцию ...
performance.mark('end-operation');
performance.measure('operation', 'start-operation', 'end-operation');

Network вкладка (DevTools)

Для отслеживания сетевых ошибок:

// Перехватить все сетевые запросы
window.addEventListener('beforeunload', () => {
  // Логи в Network вкладке DevTools
});

// Или использовать Fetch Interceptor
const originalFetch = window.fetch;
window.fetch = function(...args) {
  console.log('Запрос:', args[0]);

  return originalFetch.apply(this, args)
    .then(response => {
      if (!response.ok) {
        console.error(`Ошибка ${response.status}:`, response.statusText);
      }
      return response;
    })
    .catch(error => {
      console.error('Сетевая ошибка:', error);
      throw error;
    });
};

React Error Boundary

Для ловли ошибок в React компонентах:

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props);
    this.state = { hasError: false, error: null };
  }

  static getDerivedStateFromError(error) {
    return { hasError: true, error };
  }

  componentDidCatch(error, errorInfo) {
    console.error('Ошибка в компоненте:', error);
    console.error('Инфо:', errorInfo.componentStack);

    // Отправить ошибку на сервер
    logErrorToServer(error, errorInfo);
  }

  render() {
    if (this.state.hasError) {
      return <div>Что-то пошло не так: {this.state.error.message}</div>;
    }

    return this.props.children;
  }
}

// Использование
<ErrorBoundary>
  <YourComponent />
</ErrorBoundary>

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

• Включить DevTools Console для разработки
• Использовать Error Tracking сервис (Sentry)
• Перехватить необработанные ошибки на window.error
• Перехватить необработанные Promise ошибки
• Логировать сетевые ошибки в Network вкладке
• Проверить совместимость в разных браузерах
• Использовать React Error Boundary для React приложений
• Добавить пользовательское логирование для критических операций