Sentry поиск ошибок

Время на прочтение
6 мин

Количество просмотров 8.2K

Сегодня я расскажу вам об отслеживании ошибок в реальном времени в приложении React. Приложение внешнего интерфейса обычно не используется для отслеживания ошибок. Некоторые компании часто откладывают отслеживание ошибок, возвращаясь к нему после документации, тестов и прочего. Однако, если вы можете изменить свой продукт в лучшую сторону, то просто сделайте это!

1. Зачем вам нужен Sentry?

Я предполагаю, что вы заинтересованы в отслеживании ошибок в процессе производства

Вы думаете, что этого недостаточно?

Хорошо, давайте посмотрим на детали.

Основные причины использования Sentry для разработчиков:

  • Позволяет избавляться от рисков при развертывании кода с ошибками
  • Помощь QA в тестировании кода
  • Получение быстрых уведомлений о проблемах
  • Возможность быстрого исправления ошибок
  • Получение удобного отображения ошибок в админ-панели
  • Сортировка ошибок по сегментам пользователя / браузера

Основные причины для CEO / Lead проекта

  • Экономия денег (Sentry можно установить на ваших серверах)
  • Получение отзывов пользователей
  • Понимание того, что не так с вашим проектом в режиме реального времени
  • Понимание количества проблем, возникающих у людей с вашим приложением
  • Помощь в поиске мест, где ваши разработчики допустили оплошность

Я думаю, что разработчики были бы заинтересованы в этой статье в первую очередь. Вы также можете использовать этот список причин, чтобы убедить начальство интегрировать Sentry.

Будьте осторожны с последним пунктом в списке для бизнеса.

Вы уже заинтересованы?

Что такое Sentry?

Sentry – это приложения для отслеживания ошибок с открытым исходным кодом, которое помогает разработчикам отслеживать, исправлять сбои в режиме реального времени. Не забывайте и о том, что приложение позволяет повышать эффективности и улучшать пользовательское использование. Sentry поддерживает JavaScript, Node, Python, PHP, Ruby, Java и другие языки программирования.

2. Войдите и создайте проект

  • Откройте ваш Sentry аккаунт. Возможно, вам придется войти в систему. (Обращаю внимаю что Sentry можно установить на ваших серверах)
  • Следующий шаг создать проект
  • Выберите ваш язык из списка. (Мы собираемся выбрать React. Нажмите «Создать проект»)

Настройте ваше приложение. Базовый пример, как интегрировать Sentry в контейнер, вы можете увидеть ниже:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://63bbb258ca4346139ee533576e17ac46@sentry.io/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app 

class ExampleBoundary extends Component {
    constructor(props) {
        super(props);
        this.state = { error: null };
    }

    componentDidCatch(error, errorInfo) {
      this.setState({ error });
      Sentry.withScope(scope => {
        Object.keys(errorInfo).forEach(key => {
          scope.setExtra(key, errorInfo[key]);
        });
        Sentry.captureException(error);
      });
    }

    render() {
        if (this.state.error) {
            //render fallback UI
            return (
              <a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
            );
        } else {
            //when there's not an error, render children untouched
            return this.props.children;
        }
    }
}

В Sentry есть полезный Мастер, который поможет вам понять, что вы должны делать дальше. Вы можете выполнить следующие шаги. Я хочу показать вам, как создать первый обработчик ошибок. Отлично, мы создали проект! Перейдем к следующему шагу

3. Интеграция React и Sentry

Вы должны установить npm пакет в ваш проект.

npm i @sentry/browser

Инициализируйте Sentry в вашем контейнере:

Sentry.init({
 // dsn: #dsnUrl,
});

DSN находится в Projects -> Settings -> Client Keys. Вы можете найти клиентские ключи в строке поиска.

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. Отслеживание первой ошибки

Я например использовал простое музыкально приложение с API Deezer. Вы можете видеть это здесь. Нам нужно создать ошибку. Одним из способов является обращение к свойству «undefined»

Мы должны создать кнопку, которая вызывает console.log с user.email. После этого действия мы должны получить сообщение об ошибке: Uncaught TypeError (не удается прочитать свойство из неопределенного email) из-за отсутствия объекта пользователя. Вы также можете использовать исключение Javascript.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

Весь контейнер выглядит так:

import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";

const Search = Input.Search;

const mapState = state => ({
  list: state.root.list,
  loading: state.root.loading
});

const mapDispatch = {
  getList
};

class Container extends Component {
  constructor(props) {
    super(props);

    Sentry.init({
      dsn: "https://fc0edcf6927a4397855797a033f04085@sentry.io/1417586",
    });
  }

  componentDidCatch(error, errorInfo) {
    Sentry.withScope(scope => {
      Object.keys(errorInfo).forEach(key => {
        scope.setExtra(key, errorInfo[key]);
      });
      Sentry.captureException(error);
    });
  }
  render() {
    const { list, loading, getList } = this.props;
    const user = undefined;
    return (
      <div className="App">
        <button
          type="button"
          onClick={() => console.log(user.email)}
        >
          test error1
        </button>
        <div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
        <h1>Music Finder</h1>
        <br />
        <Search onSearch={value => getList(value)} enterButton />
        {loading && <Skeleton avatar title={false} loading={true} active />}
        {!loading && (
          <List
            itemLayout="horizontal"
            dataSource={list}
            locale={{ emptyText: <div /> }}
            renderItem={item => (
              <List.Item>
                <List.Item.Meta
                  avatar={<Avatar src={item.artist.picture} />}
                  title={item.title}
                  description={item.artist.name}
                />
              </List.Item>
            )}
          />
        )}
      </div>
    );
  }
}

export default connect(
  mapState,
  mapDispatch
)(Container);

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

У нас есть первая ошибка

Whoo-hoo!

Если вы нажмете на ошибку заголовка, вы увидите трассировку стека.

Сообщения выглядят плохо. Конечно, мы видели сообщения об ошибках, не понимая, где этот код. По умолчанию речь идет об исходной карте в ReactJS, потому что они не настроены.

Я также хотел бы предоставить инструкции по настройке исходной карты, но это сделало бы эту статью намного длиннее, чем я планировал.

Вы можете изучить эту тему здесь. Если вы заинтересованы в этой статье, Dmitry Nozhenko опубликует вторую часть об интеграции source map. Итак, нажимайте больше лайков и подписывайтесь на Dmitry Nozhenko, чтобы не пропустить вторую часть.

5. Использование Sentry с конечной точкой API

Окей. Мы рассмотрели исключение javascript в предыдущих пунктах. Однако, что мы будем делать с ошибками XHR?

Sentry также имеет пользовательскую обработку ошибок. Я использовал его для отслеживания ошибок api.

Sentry.captureException(err)

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

superagent
  .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
  .set("X-RapidAPI-Key", #id_key)
  .end((err, response) => {
    if (err) {
      Sentry.configureScope(
        scope => scope
          .setUser({"email": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Я хотел бы использовать общую функцию для API catch.

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

export const apiCatch = (error, getState) => {
  const store = getState();
  const storeStringify = JSON.stringify(store);
  const { root: { user: { email } } } = store;

  Sentry.configureScope(
    scope => scope
      .setLevel("Error")
      .setUser({ email })
      .setExtra("store", storeStringify)
  );
    // Sentry.showReportDialog(); - If you want get users feedback on error
  return Sentry.captureException(error);
};

Импортируйте эту функцию в вызов api.

export default query => (dispatch, getState) => {
  superagent
    .get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
    .set("X-RapidAPI-Key", #id_key)
    .end((error, response) => {
      if (error) {
        return apiCatch(error, getState)
      }

      if (response) {
        return dispatch(setList(response.body.data));
      }
    });
};

Давайте проверим методы:

  • setLevel позволяет вставить ошибку уровня в панель мониторинга sentry. Он имеет свойства — ‘fatal’, ‘error’, ‘warning’, ‘log’, ‘info, ‘debug’, ‘critical’).
  • setUser помогает сохранить любые пользовательские данные (id, адрес электронной почты, план оплаты и т. д.).
  • setExtra позволяет задать любые данные, которые вам нужны, например, магазин.

Если вы хотите получить отзывы пользователей об ошибке, вам следует использовать функцию showReportDialog.

Sentry.showReportDialog();

Вывод:

Сегодня мы описали один из способов интеграции Sentry в приложение React.

→ Телеграм-чат по Sentry

Источник

В этом блоге я расскажу вам об отслеживании ошибок в реальном времени для JavaScript. Попытка отлова ошибокв интерфейсном приложении может оказаться непростой задачей, поскольку проблемы возникают редко или когда вы не просматриваете трассировку журнала.

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

Я не работаю в Sentry, и меня не попросили написать это. Это просто инструмент, который мне показался полезным, и я хотел поделиться с вами своим опытом.

Одна из причин, по которой Sentry мне так нравится, заключается в том, что она имеет открытый исходный код и может использоваться бесплатно.

План:

  1. О часовом
  2. Войти и создать проект
  3. Интеграция Sentry в JavaScript
  4. Первое отслеживание ошибок

<сильный>1. Что такое часовой?

Sentry — это отслеживание ошибок с открытым исходным кодом, которое помогает разработчикам отслеживать и исправлять сбои в режиме реального времени. Не забывайте о повышении эффективности, улучшении пользовательского опыта. Sentry поддерживает JavaScript, Node, Python, PHP, Ruby, Java и другие языки программирования.

Начнем

<сильный>2. Войдите и создайте проект

Шаг 1: Откройте свою учетную запись Sentry. Возможно, вам потребуется войти в систему. Перейдите здесь

Шаг 2: Затем создайте проект

Шаг 3: Выберите свой язык из списка («мы собираемся выбрать JS»)

Шаг 4: Установите настройки оповещения по умолчанию (мы собираемся выбрать первый вариант)

Шаг 5: Дайте вашему проекту имя и нажмите кнопку «Создать проект».

3. Интегрируйте Sentry в JavaScript

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

У нас есть два варианта установки Sentry SDK с помощью npm или yarn.

# Using yarn
yarn add @sentry/browser @sentry/tracing
# Using npm
npm install --save @sentry/browser @sentry/tracing

Настроить:

Конфигурация должна происходить как можно раньше в жизненном цикле вашего приложения.

Как только это будет сделано, JavaScript SDK Sentry фиксирует все необработанные исключения и транзакции.

import * as Sentry from "@sentry/browser";
import { Integrations } from "@sentry/tracing";

Sentry.init({
  dsn: "https://[email protected]/0",
  release: "[email protected]",
  integrations: [new Integrations.BrowserTracing()],
  // Set tracesSampleRate to 1.0 to capture 100%
  // of transactions for performance monitoring.
  // We recommend adjusting this value in production
  tracesSampleRate: 1.0,
});

Как найти свойство DSN:

Свойство DSN есть в Настройках->Проекты->Клиентские ключи(DSN). Или вы можете найти ключи клиента в поиске.

4. Отслеживание первой ошибки

Давайте выкинем простую ошибку, и вы увидите, что первая проблема появится на панели инструментов Sentry.

myUndefinedFunction();

И если вы перейдете на страницу Sentry, вы увидите эту приятную ошибку.

У-у-у! 🎉 🎉 🎉

Если вы нажмете на ошибку заголовка, вы увидите трассировку стека.

Вывод:

Сегодня мы описали один из способов отслеживания ошибок JavaScript. Я надеюсь, что вы начнете ловить каждую ошибку, используя Sentry.

Спасибо

Источник

Эта статья была создана в сотрудничестве с Sentry . Спасибо за поддержку партнеров, которые делают возможным использование SitePoint.

Написание кода может быть веселым. Тестирование это другое дело. Конечно, читатели SitePoint всегда создают безошибочные приложения, но ошибки все равно могут попасть в лучший производственный код. Как вы можете обнаружить эти проблемы? …

тесты

Написание программного обеспечения для тестирования программного обеспечения является одним из вариантов. Модульное и интеграционное тестирование может быть принято для проверки функций и интерфейсов соответственно. К сожалению:

  1. Может быть трудно написать тесты, когда требования к продукту меняются.
  2. Вы уверены, что ваши тесты охватывают все варианты и пути?
  3. Кто проверяет ваши тесты?

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

Кроме того, тестирование браузера, как известно, усложняется из-за:

  • Несколько устройств и приложений . У настольных ПК, планшетов, смартфонов, телевизоров, игровых консолей, интеллектуальных часов, устройств IoT и многого другого есть длинный хвост старых, новых и малоизвестных браузеров. Невозможно все проверить.
  • Пользовательский контроль . Любой пользователь может выбрать, загружать, блокировать или изменять любую часть вашего приложения. Например, Firefox заблокирует Google Analytics, когда отслеживание отключено; запись события Analytics может привести к сбою всего приложения.
  • Сетевые сбои . Даже если пользователь разрешает каждый файл, который вы ему бросаете, нет гарантии, что он получит все изображения, CSS, JavaScript и другие ресурсы. Путешествие или использование грязного отеля Wi-Fi усугубляет проблему.

Обратная связь с пользователем

Вы когда-нибудь видели, как кто-то использует ваше программное обеспечение? Они всегда делают то, чего ты никогда не ожидал. Я морщусь каждый раз, когда вижу, как кто-то вводит URL в окно поиска Google.com.

Люди умеют находить свои собственные методы для выполнения задач на основе предыдущего опыта. Эти процессы могут или не могут быть эффективными, но они редко будут соответствовать вашим ожиданиям, потому что ваш опыт отличается. Ошибка может возникнуть из-за того, что последовательность задач решается нелогично.

Кроме того, большинство пользователей никогда не сообщат об ошибке. Они не будут знать, произошла ли ошибка в вашем приложении, браузере или ОС. Многие могут винить себя, не будут знать, с кем связаться, или просто переключатся на конкурирующий продукт.

Пользователи, которые сообщают о проблемах, редко смогут описать проблему, если у них нет опыта разработки программного обеспечения. Огорчительно сталкиваться с десятками заявок на выдачу «ProductX не работает» .

В конечном счете, мы должны полагаться на клиентов, чтобы сообщить о проблемах?

логирование

Регистрация ошибок возможна, но:

  1. Как вы регистрируете ошибки, которые являются совершенно неожиданными?
  2. Будет ли код регистрации работать, если ваше приложение завершится сбоем?
  3. Как вы регистрируете ошибки в средах вне вашего контроля, таких как браузер?
  4. Одна ошибка может регистрироваться десятки тысяч раз после развертывания. Выявление критических недостатков среди известных проблем может быть затруднено.

К счастью, Sentry.io предлагает решение для регистрации стероидов, которое может охватить самые непонятные проблемы.

Sentry.io Quickstart

Sentry.io – это система отслеживания ошибок полного стека с открытым исходным кодом, которая поддерживает широкий спектр серверных, браузерных, настольных и родных мобильных языков и сред, включая PHP, Node.js, Python, Ruby, C #, Java, Go, React, Angular, Vue, JavaScript и многое другое. Система используется Dropbox, AirBnB, PayPal, Uber, Reddit, Mozilla, MailChimp и Microsoft для мониторинга тысяч приложений.

Учетные записи разработчиков Sentry.io бесплатны с коммерческими опциями для более крупных команд, генерирующих тысячи событий в нескольких проектах. Вы можете быстро зарегистрироваться, используя учетную запись GitHub, Azure DevOps или Sentry.io.

При входе в систему вам будет предложено начать новый проект, введя его имя и выбрав технологию:

Настройки проекта Sentry.io

Затем вам будет выдан код для вставки в ваше приложение. Типичный пример клиентского JavaScript требует нескольких новых строк:

Настройки интеграции Sentry.io

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

Весь процесс занимает несколько минут. После развертывания приложения любые ошибки, с которыми сталкиваются пользователи, независимо от того, знают они о них или нет , автоматически регистрируются и отслеживаются в реальном времени в потоке проблем Sentry.io:

Sentry.io выпуск потока

Одинаковые проблемы представлены в виде единой записи, в которой сообщается, сколько раз оно было запущено и сколько пользователей было затронуто. Дополнительные сведения можно узнать, чтобы определить версию продукта, серьезность проблемы, ОС, браузер, IP-адрес, даты, стек вызовов и т. Д.

введите описание изображения здесь

Возможности Sentry.io помимо базовых:

  • параметры конфигурации для определения версий выпуска, хранилищ кода, имен серверов, URL-адресов и т. д.
  • информация о пользователях, сообщения, пометки и пользовательские события
  • виджеты обратной связи с пользователями для записи дополнительной информации
  • правила фильтрации входящих сообщений
  • назначение задания членам команды
  • закладки, решение, игнорирование, совместное использование и удаление проблем
  • отчеты о деятельности и проблемах
  • исполняемый файл командной строки для сообщения о проблемах ОС или сборки
  • полный API для отправки, извлечения, обновления, удаления и управления данными о событиях
  • локальные установки
  • надежная защита с дополнительной двухфакторной аутентификацией
  • интеграция чата со Slack, HipChat и другими
  • варианты коммерческой и общественной поддержки.

Sentry.io регистрирует более 20 миллиардов ошибок в месяц (в основном из моего кода!). Учетные записи разработчиков бесплатны и включают 5000 ошибок в месяц. Используйте Sentry.io как нового члена вашей команды Q & A сегодня !

Источник

Sentry — удобный инструмент мониторинга ошибок на вашем проекте. Но что делать, чтобы мониторить только то что вам надо?

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

Много кто использует на проектах такой удобный инструмент мониторинга как Sentry. Он позволяет просматривать где именно произошла ошибка. Кто и как отправлял запросы и тд.

По умолчанию Sentry отлавливает все исключения и отправляет все это в сервис мониторинга. Но это бывает иногда слишком избыточно. Так как например все запросы от ботов будут генерировать исключения что страница не найдена. А бесплатная версия имеет ограничение на количество записей в месяц. Поэтому логично будет эти исключения игнорировать.

Чтобы настроить что именно надо мониторить, можно установить игнорирование некоторых исключений или тегов. Ниже будет приведен пример как это можно сделать для проекта написанного на Symfony. Для этого необходимо в конфигурации сервисов (config/packages/sentry.yaml) и (config/services.yaml) прописать следующее:

sentry:
    options:
        integrations:
            - 'SentryIntegrationIgnoreErrorsIntegration'
services:
    SentryIntegrationIgnoreErrorsIntegration:
        arguments:
            $options:
                ignore_exceptions:
                    - SymfonyComponentHttpKernelExceptionNotFoundHttpException
                    - SymfonyComponentHttpKernelExceptionMethodNotAllowedHttpException
                    - SymfonyComponentHttpKernelExceptionAccessDeniedHttpException
                ignore_tags:
                    - [client_os.name, Windows]

Кроме исключений фреймворка можно указать и свои кастомные исключения. Ограничений нет. Также можно посмотреть какие теги попадают в мониторинг и при необходимости их игнорировать.test_domains (Выкатывать обычные домены)

Источник

Сервис Sentry позволяет удаленно мониторить баги в фронтенд-приложениях, написанных на JavaScript.

Попытка устранить проблемы в фронтенд-приложениях на JavaScript может оказаться непростой задачкой, поскольку они возникают в браузере пользователя, к чему, зачастую, у вас нет доступа. Однако, Sentry дает возможность удаленно мониторить баги.

Здесь можно скачать решения, которые рассматривались в этой статье.

Что необходимо

Если вы хотите воспользоваться этими примерами, то вам понадобятся:

  • Node.js: Многофункциональный инструмент для разработки, который не является частью приложения. Мы скачивали последнюю LTS-версию (8.12.0)
  • Sentry: Либо Аккаунт в сервисе Sentry (можно бесплатно записывать до 10 тыс. багов в месяц) либо установленный локальный Sentry — https://github.com/getsentry/onpremise

Установка на ваш сервер

Чтобы установить Sentry On-Premise на ваши сервер можно пойти 2 путями

  1. Собрать rpm и установить их — https://habr.com/ru/post/500632/

  2. Воспользоваться официальным установщиком:

Установить на сервер docker и docker-compose
git clone https://github.com/getsentry/onpremise.git
./install.sh

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

Чтобы начать, добавьте с сайта сервиса новый Sentry-проект для приложения. После выбора нужного языка вы получите соответствующую документацию. В нашем случае мы выбрали JavaScript.

Первый пример — стандартный JavaScript. Здесь две кнопки: «Hello» (Привет) и «Error» (Ошибка).

После того, как вы кликнете по кнопке «Hello», экран перезагрузится, а блок try обнаружит и поймает баг. После того, как баг «пойман», отчет об ошибке вручную пересылается на сервис Sentry.

Кнопка «Error» позволяет просто обнаружить баг.

vanilla / index.html

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
  <button id="hello">Hello</button>
  <button id="error">Error</button>
  <div id="output"></div>
  <script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
  <script>
    (function () {
      'use strict';
      Sentry.init({ dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664' });
      var helloEl = document.getElementById('hello');
      var errorEl = document.getElementById('error');
      var outputEl = document.getElementById('output');
      helloEl.addEventListener('click', handleHelloClick);
      errorEl.addEventListener('click', handleErrorClick);
      function handleHelloClick() {
        outputEl.innerHTML = 'Hello World';
        try {
          throw new Error('Caught');
        } catch (err) {
          Sentry.captureException(err);
        }
      }
      function handleErrorClick() {
        throw new Error('Uncaught');
      }
    })();
  </script>
</body>
</html>

Примечания:

  • Sentry устанавливается из CDN и отображается как глобальная переменная
  • Чуть раньше мы запустили Sentry в нашем JavaScript-е

Чтобы протестировать этот пример, можем воспользоваться статической веб-серверной платформой Node.js: http-сервером. Заходим в папку, где хранится файл index.html, и вводим (опция с отключает кэширование) следущую строку, чтобы открыть в браузере адрес http://localhost:8080.

Как отображаются пойманные баги

Сперва кликаем кнопку «Hello».

Мы словили баг, поэтому он не всплывет вверх по стеку вызовов, поэтому и не мониторится в консоли. Однако, поскольку мы отсылаем в Sentry отчет о баге вручную, то увидим сообщение о нем в аккаунте.

Примечания:

  • Можем проследить, в какой строчке (24) затесался баг
  • К тому же, навигационная цепочка отображает действия браузера, что привели к ошибке.

Как отображаются непойманные баги

Кликаем кнопку «Error».

Баг всплывает вверх по стеку вызовов и, таким образом, на консоле отображается сообщение об ошибке. После этого Sentry автоматически мониторит баг, без каких-либо дополнительных действий.

Примечания:

  • Мы можем увидеть, в какой строчке (30) затерялся баг
  • Не предустмотрена навигационная цепочка (не совсем понимаю, почему)

Как обеспечить безопасность проекта

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

Чтобы этого не было, нужно ограничить количество доменов, которые могут заносить в наш проект отчеты об ошибках. В этом примере мы использовали localhost (локальный хост). Данная опция настраивается во вкладке настроек Sentry-проекта, Sentry Project Setting.

Релизы

Если подумать о том, как использовать Sentry в разных вариациях нашего приложения, то здесь нужен некий механизм, который будет помечать ошибки номером версии.

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

Чтобы решить проблему, нужно вписать идентификатор релиза (версии) при запуске Sentry.

vanilla / index.html

...
var RELEASE = '0.1.0';
Sentry.init({
  dsn: 'https://b5bf359072254626aba8e64368e77b7d@sentry.io/1289664',
  release: RELEASE,
});
...

После этого все новые ошибки будут отмечены как release (0.1.0), то есть будут привязаны к правильной версии кода.

Примечания:

  • Мы разобрали простой способ как использовать релизы
  • Sentry позволяет применять более сложное их использование, которое тесно связано с GitHub. Такая функция дает возможность отслеживать баги до совершения определенных операций.

P.S. Вторая часть более длинная, поэтому она будет в отдельном посте.

P.S Телеграм чат Sentry https://t.me/sentry_ru

P.S. Забыл указать что это перевод поста https://codeburst.io/sentry-error-reporting-by-example-part-1-999b2df11556

Источник

Понравилась статья? Поделить с друзьями:
  • Sensor defect рено магнум ошибка
  • Sensor cover ошибка
  • Senseit l208 ошибка зарядки
  • Sensapi dll ошибка
  • Sendlog aion ошибка