Интеграция аналитики и мониторинга для отслеживания ошибок

Введение

Итак, коллеги, мы подошли к моменту, когда наше React-приложение живёт в продакшене: пользователи начинают активно его использовать, а вы — нервно жмёте F5, чтобы убедиться, что всё работает. Однако даже в самых идеальных приложениях ошибки неизбежны. И знаете, что самое страшное? Ошибки, о которых вы не знаете! Именно поэтому сегодня мы поговорим о том, как интегрировать аналитику и мониторинг, чтобы всегда быть в курсе событий.

Можно рассуждать о важности мониторинга с помощью аналогий. Представьте, что вы — капитан корабля. Если вы не знаете, какие волны позади и какой айсберг впереди, то кораблю недолго плыть. Аналитика и мониторинг — это ваш радар и датчики, которые помогают следить за состоянием приложения, поведением пользователей и возникновением ошибок в реальном времени.

Основные задачи аналитики и мониторинга:

1. Уведомления о возникающих ошибках.
2. Сбор данных об использовании приложения.
3. Предоставление инструмента для анализа и отладки.

Подключение аналитики: Google Analytics

Google Analytics позволяет нам отслеживать поведение пользователей: сколько их на сайте, какие страницы они посещают, как долго остаются на них и откуда пришли. Конечно, он не расскажет, кто именно сломал приложение после обновления, но предоставит достаточную картину для принятия решений.

1. Создание учётной записи Для работы с Google Analytics вам потребуется учётная запись Google. После входа в Google Analytics создайте новый ресурс (property) для вашего проекта.

2. Получение идентификатора отслеживания После создания ресурса вы получите идентификатор формата G-XXXXXXX. Этот идентификатор нужен, чтобы связать ваше приложение с аналитикой.

3. Установка Google Analytics в проект Установим библиотеку для интеграции:

   npm install react-ga4
   

4. Инициализация в приложении В корневом компоненте приложения инициализируем Google Analytics:

   import React, { useEffect } from 'react';
   import ReactGA from 'react-ga4';
   
   const App: React.FC = () => {
     useEffect(() => {
       // Инициализация Google Analytics с вашим идентификатором
       ReactGA.initialize('G-XXXXXXX');
       ReactGA.send('pageview'); // Отправляем событие просмотра страницы
     }, []);
   
     return (
       <div>
         <h1>Добро пожаловать в наше приложение!</h1>
       </div>
     );
   };
   
   export default App;

Теперь Google начинает получать данные о просмотре страниц приложения.

Отслеживание событий

Также можно отслеживать кастомные события: клики по кнопкам, отправку форм и другие действия.

import React from 'react';
import ReactGA from 'react-ga4';

const MyButton: React.FC = () => {
  const handleClick = () => {
    ReactGA.event({
      category: 'User',
      action: 'Click MyButton',
      label: 'Button Interaction',
    });
  };

  return <button onClick={handleClick}>Нажми меня</button>;
};

export default MyButton;

Теперь все клики по кнопке будут видны в разделе событий Google Analytics. С помощью таких событий можно понять, как пользователи взаимодействуют с приложением и где они, возможно, сталкиваются с проблемами.

Мониторинг ошибок: Sentry

Аналитика — это здорово, но как быть, если кнопка не работает, а пользователи не могут её нажать? Или приложение вовсе выдает "белый экран"? Тут нам на помощь приходит Sentry — инструмент для мониторинга ошибок в реальном времени.

Установка Sentry

1. Создание проекта в Sentry

   Зарегистрируйтесь на sentry.io, создайте новый проект и выберите платформу "React".

2. Установка Sentry в проект

   Установите пакет Sentry:

   npm install @sentry/react @sentry/tracing
   

3. Инициализация Sentry

   Настроим Sentry в корневом файле приложения index.tsx:

   import React from 'react';
   import ReactDOM from 'react-dom';
   import App from './App';
   import * as Sentry from '@sentry/react';
   import { BrowserTracing } from '@sentry/tracing';
   
   Sentry.init({
     dsn: 'https://yourdsn@sentry.io/projectid',
     integrations: [new BrowserTracing()],
     tracesSampleRate: 1.0, // Настройка уровня трассировки (от 0 до 1)
   });
   
   ReactDOM.render(<App />, document.getElementById('root'));

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

Sentry автоматически будет отслеживать ошибки JavaScript, поэтому если где-то возникает Unhandled Rejection или другой баг, вы получите уведомление. Также можно логировать пользовательские ошибки:

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

try {
  throw new Error("Упс, что-то пошло не так!");
} catch (error) {
  Sentry.captureException(error); // Отправляем исключение в Sentry
}

Настройка рассылки уведомлений об ошибках

Sentry позволяет настроить уведомления о новых ошибках на вашу почту или в Slack. Представьте: вы сидите, пьёте кофе, и внезапно в Slack приходит сообщение: "Ошибка на продакшне!". Вы бросаете всё и летите чинить.

1. В настройках проекта на Sentry выберите "Alerts".
2. Настройте правила отправки уведомлений. Например, можно отправлять уведомления только при новых уникальных ошибках.

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

Sentry позволяет не только отслеживать ошибки, но и измерять производительность приложения. На основе трассировок (traces) вы можете определить медленные страницы и оптимизировать их.

Добавление производительности в Sentry:

Sentry.init({
  dsn: 'https://yourdsn@sentry.io/projectid',
  integrations: [new BrowserTracing()],
  tracesSampleRate: 1.0, // Уровень производительности
});

Теперь Sentry начнёт собирать данные о времени загрузки страниц, задержке рендеринга и других метриках.

Обработка ошибок и fallback-компоненты

Иногда ошибки всё же просачиваются до UI. Чтобы они не портили пользовательский опыт, мы можем показать fallback-компонент:

import React from 'react';
import * as Sentry from '@sentry/react';

const ErrorFallback: React.FC = ({ error }: any) => (
  <div>
    <h1>Упс, что-то пошло не так!</h1>
    <p>{error?.message}</p>
  </div>
);

const AppWithErrorBoundary = Sentry.withErrorBoundary(App, {
  fallback: <ErrorFallback />,
});

export default AppWithErrorBoundary;

Теперь вместо страшного белого экрана будет отображаться дружелюбное сообщение, а вы получите уведомление в Sentry.

Вывод аналитики и мониторинга в реальном мире

Чем нам поможет Google Analytics?

• Понять, кто и как использует приложение.
• Найти проблемные точки: страницы с высоким показателем отказов.
• Оптимизировать пользовательский путь.

Чем нам поможет Sentry?

• Быстро идентифицировать баги и ошибки.
• Анализировать производительность приложения.
• Автоматически уведомлять о возникновении проблем.

Эти инструменты — ваши лучшие друзья на продакшне. И помните: вы не сможете починить то, о чём не знаете. Поэтому следите за своим приложением так же пристально, как за сборкой вашего любимого велосипеда (или компьютера).

2

Задача

Модуль 3: React, 20 уровень, 8 лекция

Недоступна

Подключение Google Analytics

Подключение Google Analytics

Открыть