Как использовать Sentry и GitLab для перехвата ошибок React

import * as Sentry from "sentry";
 
export default () => {
    const data = null;
    return (
        <Sentry.ErrorBoundary fallback={<h1>Something went wrong.</h1>}>
            {
                data.map((val, key) => {
                    <h1 key={key}>{val}</h1>;
                });
            }
        </Sentry.ErrorBoundary>
    );
};

Теперь вы можете отображать предупреждение для пользователей при возникновении ошибки. Вы по-прежнему будете получать отчет об ошибках в своем проекте Sentry.

Добавление интеграции с GitLab

У интеграции GitLab и Sentry есть две стороны. Во-первых, в проектах GitLab есть функция «Отслеживание ошибок», которая отображает список ошибок Sentry. Вы можете пометить ошибки как разрешенные или проигнорированные в GitLab. Вторая часть включает в себя подключение Sentry к GitLab. Это позволяет Sentry автоматически создавать задачи GitLab при регистрации новой ошибки.

Давайте сначала посмотрим на экран отслеживания ошибок GitLab. Вам нужно будет создать ключ Sentry API. Нажмите на свое имя пользователя в левом верхнем углу интерфейса Sentry, а затем на ключи API в меню. Нажмите «Создать новый токен» в правом верхнем углу.

Добавьте следующие области маркеров:

• оповещения:прочитано
• оповещения:напишите
• событие:администратор
• событие:прочитано
• событие: запись
• проект:читать

Это позволяет GitLab читать и обновлять ваши ошибки Sentry.

Затем перейдите к своему проекту GitLab. Нажмите «Настройки» в боковом меню, а затем «Операции». Разверните раздел «Отслеживание ошибок». Вставьте свой токен аутентификации Sentry в поле «Токен аутентификации» и нажмите «Подключиться». Если вы используете собственный экземпляр Sentry, вам также необходимо настроить поле «Sentry API URI» в соответствии с URI вашего сервера.

В раскрывающемся списке «Проект» появится список ваших проектов Sentry. Выберите правильный проект и нажмите «Сохранить изменения». Теперь вы готовы использовать отслеживание ошибок в GitLab.

Щелкните Операции > Отслеживание ошибок на левой боковой панели. Вы увидите список ошибок Sentry. По умолчанию он отфильтрован как нерешенные проблемы. Это можно изменить с помощью раскрывающихся списков в правом верхнем углу. Щелкните ошибку, чтобы просмотреть подробную трассировку стека, не покидая GitLab. Есть кнопки для игнорирования, устранения и преобразования проблемы в GitLab. После того, как вы открыли проблему GitLab, вы можете назначить этот элемент члену команды, чтобы ошибка была устранена.

Теперь вы можете добавить второй компонент интеграции — ссылку из Sentry обратно в GitLab. Нажмите «Настройки» на боковой панели Sentry, а затем — «Интеграции». Найдите GitLab в списке и нажмите фиолетовую кнопку «Добавить установку» в правом верхнем углу. Нажмите «Далее», чтобы просмотреть информацию об установке.

Вернувшись в GitLab, щелкните значок пользователя в правом верхнем углу, а затем «Настройки». Нажмите «Приложения» в меню слева и добавьте новое приложение. Используйте данные, показанные Sentry во всплывающем окне настройки установки.

GitLab отобразит идентификатор приложения и секретный ключ. Вернитесь во всплывающее окно Sentry и введите эти значения. Добавьте URL-адрес своего сервера GitLab (gitlab.com для GitLab SaaS) и введите относительный путь URL-адреса к вашей группе GitLab (например, my-group). Интеграция не работает с личными проектами.

Нажмите фиолетовую кнопку «Отправить», чтобы создать интеграцию. Sentry теперь сможет отображать информацию GitLab рядом с вашими ошибками. Это включает в себя фиксацию, вызвавшую ошибку, и трассировку стека, ссылающуюся на файлы GitLab. Пользователи Sentry на платных планах могут связывать проблемы GitLab и Sentry друг с другом.

Отключение Sentry в разработке

Вам не обязательно использовать Sentry при локальном запуске приложения в процессе разработки. Не вызывайте Sentry.init(), если вы хотите работать с отключенным Sentry. Вы можете проверить наличие локальной переменной среды и отключить Sentry, если она установлена.

if (process.env.NODE_ENV === "production") {
    Sentry.init({
        dsn: "my-dsn"
    });
}

npm install @sentry/tracing

import {Integrations} from "@sentry/tracing";
 
Sentry.init({
    dsn: "my-dsn",
    integrations: [new Integrations.BrowserTracing()],
    tracesSampleRate: 1.0
});