Мониторинг ошибок и производительности для веб-приложений и мобильных приложений с использованием Raygun
Март 3, 2019
Исправить ошибку намного проще, когда вы знаете, как она произошла, но это не всегда так. После того как программное обеспечение было доставлено, вы остаетесь во власти клиентов, которые не всегда могут сообщить о сбое.
Когда происходит сбой кода, вы регистрируете ошибки в файле журнала и, следовательно, продолжаете путешествие разработчика, чтобы отследить возникновение ошибки, просматривая файлы журнала. Угадайте основную причину сбоя из файла журнала, это может занять много вашего драгоценного времени.
Есть ли более простой способ устранить причину ошибки в вашем программном приложении?Raygun предлагает набор интересных решений для отслеживания ошибок, возникающих в веб-приложениях и мобильных приложениях.
Из официальной документации Raygun предлагает:
Полное представление о проблемах, с которыми сталкиваются ваши пользователи, и инструменты рабочего процесса для быстрого их решения в команде.
Raygun предлагает четыре инструмента для облегчения работы с ошибками и сбоями в вашем приложении:
Средство Raygun Crash Reporting помогает отслеживать и воспроизводить каждый сбой и ошибку, возникшую в вашем приложении.
Инструмент Real User Monitoring помогает регистрировать каждый пользовательский сеанс и другую связанную информацию, чтобы оценить пользовательский опыт.
Инструмент отслеживания пользователей помогает классифицировать сбои и ошибки в зависимости от пользователей приложения.
Инструмент отслеживания развертывания Raygun упрощает отслеживание каждого выпуска и показывает, как он влияет на общую производительность программного приложения.
В этом руководстве вы узнаете, как интегрировать инструменты Raygun с вашим веб-приложением для мониторинга и отслеживания ошибок. В этом руководстве вы будете интегрировать инструменты Raygun с веб-приложением Angular.
Начало работы с Raygun
Вы можете использовать Raygun с несколькими языками программирования и фреймворками. Ради этого урока давайте посмотрим, как начать использовать Raygun с веб-приложением Angular.
Для начала вам необходимо создать аккаунт на Raygun . После того, как вы создали учетную запись, вам будет представлен экран для выбора предпочтительного языка или структуры.
В этом руководстве вы узнаете, как начать использовать Raygun в веб-приложении Angular.
Использование Angular с Raygun
Из списка рамок выберите Угловую рамку. Вам будет представлен экран для выбора Angular (v2 +) или Angular1.x .
Поскольку вы собираетесь научиться интегрировать Raygun с Angular 4, сфокусируйтесь на вкладке Angular (v2 +) .
Прежде чем интегрировать Raygun с Angular, вам нужно создать приложение Angular. Давайте начнем с создания приложения Angular.
Во-первых, вам нужно установить Angular CLI глобально.
1
npm install -g @angular/cli
Создайте приложение Angular с помощью Angular CLI.
1
ng new AngularRaygun
Приложение Angular будет создано и установлено с необходимыми зависимостями.
Перейдите в каталог проекта и запустите приложение.
Установите библиотеку raygun4js с помощью диспетчера пакетов Node (npm).
1
npm install raygun4js —save
Внутри папки src/config создайте файл с именем app.raygun.setup.ts .
Скопируйте установочный код из Step 2Angular (v2+) и вставьте его в файл app.raygun.setup.ts .
Импортируйте RaygunErrorHandler в файле app.module.ts внутри приложения Angular и добавьте пользовательский обработчик ошибок. Вот как app.module.ts файл app.module.ts :
01
02
03
04
05
06
07
08
09
10
11
12
13
14
15
16
17
18
19
20
import { BrowserModule } from ‘@angular/platform-browser’;
import { NgModule } from ‘@angular/core’;
import { ErrorHandler } from ‘@angular/core’;
import { RaygunErrorHandler } from ‘../config/app.raygun.setup’;
import { AppComponent } from ‘./app.component’;
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule
],
providers: [{
provide: ErrorHandler,
useClass: RaygunErrorHandler
}],
bootstrap: [AppComponent]
})
export class AppModule { }
Теперь вы добавили собственный обработчик ошибок RaygunErrorHandler , который будет обрабатывать ошибки.
Давайте добавим немного кода, чтобы создать ошибку. Импортируйте Router в файл app.component.ts .
1
import { Router } from ‘@angular/router’;
Измените метод конструктора, как показано:
1
constructor(private router: Router) {}
Приведенный выше код выдаст ошибку при запуске приложения, поскольку оно не было импортировано в AppModule. Давайте посмотрим, как Raygun фиксирует ошибки. Сохраните вышеуказанные изменения и перезапустите приложение.
Когда вы запустите приложение, вы получите сообщение об ошибке в консоли браузера.
1
NullInjectorError: No provider for Router!
В приложении Raygun перейдите на вкладку Dashboard с левой стороны, и вы получите подробную информацию о запросах, зарегистрированных в Raygun.
Как видно из панели инструментов Raygun, она показывает количество сеансов, недавний запрос, количество экземпляров ошибок и т. Д., Связанных с приложением Angular, которое вы настроили с помощью Raygun.
Нажмите на последние запросы, отображаемые в правой части панели инструментов, и у вас будет подробная информация, относящаяся к конкретному запросу.
Raygun Crash Reporting
Сбои приложений являются распространенным сценарием при работе с программными приложениями. Многие из этих сбоев происходят в сценариях в реальном времени и, следовательно, их трудно отследить без надлежащей системы отчетности о сбоях.
Raygun предоставляет инструмент под названием Crash Reporting, который обеспечивает более глубокое понимание сбоев приложений. Давайте посмотрим, как работает Crash Reporting.
У вас есть ошибка в вашем приложении Angular, которая вылетает. Давайте посмотрим, как об этом сообщают с помощью отчетов Raygun Crash.
Нажмите на вкладку Crash Reporting в меню с левой стороны. У вас будет отчет об ошибке в списке.
На вкладке отчетов о сбоях Raygun отображаются ошибки, произошедшие в приложении. На вкладках, показанных выше, ошибки были классифицированы как активные , разрешенные , игнорируемые и постоянно игнорируемые .
Ошибка, с которой вы столкнулись при запуске приложения, была зарегистрирована на вкладке Active .
При нажатии на перечисленную ошибку вы будете перенаправлены на другую страницу с подробной информацией, связанной с ошибкой. На этой странице у вас будет такая информация, как сводка ошибок, информация HTTP, сведения о среде, в которой произошла ошибка (например, ОС, браузер и т. Д.), Необработанная информация об ошибках и трассировка стека ошибок.
При отображении информации, связанной с конкретной ошибкой, Raygun предоставляет вам функции для изменения состояния ошибок в соответствии с вашим исправлением. Вы можете изменить статус на активный, разрешенный, игнорируемый и т. Д.
Инструмент отчетов о сбоях Raygun предоставляет возможность добавлять комментарии к ошибкам, что очень полезно при обсуждении подробностей об ошибке при работе в команде.
Отчет о сбоях: настройки
Отчет о сбоях поставляется с несколькими настройками, которые упрощают управление ошибками, возникшими в приложении.
Он предоставляет вам возможность включить обновление в реальном времени, дату первого просмотра в группе ошибок и количество пользователей на панели мониторинга.
У вас есть возможность вносить массовые изменения статуса ошибки и возможность удалить все ошибки, которые произошли в приложении.
Отчет о сбоях: входящие фильтры
Raygun предоставляет возможность фильтрации запросов на основе IP-адреса, имени компьютера и т. Д. Если вы не хотите отслеживать ошибку с определенного IP-адреса, вы можете создать входящий фильтр и ошибку из приложения, запущенного на этом IP-адрес не будет отслеживаться дальше.
Давайте попробуем добавить фильтр для вашего приложения, работающего на 127.0.0.0.1, и посмотрим, отслеживается ли оно.
В левом боковом меню на вкладке « Отчеты о сбоях» нажмите ссылку « Входящие фильтры» . Добавьте IP-адрес 127.0.0.0.1 в список фильтров.
Теперь, если вы попытаетесь запустить приложение, при сбое оно не будет отслеживаться на экране отчетов о сбоях, поскольку оно было отфильтровано.
Вы также можете добавить фильтры по именам компьютеров, HTTP, версиям сборки, тегам и пользовательским агентам.
Отслеживание пользователей Raygun
Большинство проблем, возникающих при использовании программного обеспечения, остаются незарегистрированными. Вероятность того, что разочарованный пользователь сообщит о проблеме, довольно низка. Следовательно, вы склонны терять обратную связь с пользователем, чтобы улучшить качество вашего программного обеспечения.
Raygun предоставляет отчет об отслеживании уязвимых пользователей. Этот отчет показывает список пользователей из вашего приложения, которые столкнулись с ошибками. Это дает полное представление о том, как этот конкретный пользователь столкнулся с этой конкретной ошибкой. Вы можете просмотреть этот отчет, нажав на вкладку « Пользователи » в левой части экрана.
В вашем приложении Angular вы еще не использовали уязвимую функцию пользовательских данных Raygun. Следовательно, в отчете об отслеживании затронутых пользователей вы найдете анонимную информацию о пользователе, а также информацию об ошибке.
Нажмите на ссылку Anon User в информации об отслеживании пользователей, и вы увидите подробную информацию, относящуюся к этому конкретному анонимному пользователю. Подробные сведения, такие как информация об активной ошибке, взаимодействие с пользователем, сеансы, используемые пользователем устройства и т. Д., Будут отображаться в отчете пользователя.
Вы можете добавить информацию о пользователе в конфигурационный файл Raygun. Добавьте следующий код в файл config/app.raygun.setup.ts чтобы отправить сведения о пользователе в Raygun.
export class RaygunErrorHandler implements ErrorHandler {
handleError(e: any) {
rg4js(‘send’, {
error: e,
});
}
}
Сохраните вышеуказанные изменения и перезагрузите веб-приложение Angular. Перейдите в консоль приложения Raygun и нажмите на вкладку Users в левом меню. Вы сможете увидеть новых пользователей, отображаемых в списке затронутых пользователей.
Нажмите на имя пользователя, чтобы просмотреть сведения, связанные с конкретным пользователем.
Raygun Real User Monitoring
Инструмент мониторинга реальных пользователей Raygun дает вам представление о сессиях живых пользователей. Это позволяет вам определить, как пользователь взаимодействует с вашим приложением из пользовательской среды и как это влияет на производительность вашего приложения.
Давайте запустим ваше приложение Angular и посмотрим, как оно контролируется в инструменте Real User Monitoring. Нажмите на вкладку Real User Monitoring в меню слева. Вы сможете просматривать в реальном времени информацию о пользователях и сессиях.
Нажимая на разные вкладки, вы можете отслеживать эффективность запрошенных страниц.
Он дает информацию о самых медленных и самых запрашиваемых страницах. Основываясь на ряде показателей, вы можете отслеживать страницы с большим временем загрузки и исправлять их, чтобы повысить производительность приложения.
В Real User Monitoring есть ряд других вкладок, которые дают полезную информацию о пользователях на основе различных параметров, таких как браузеры, платформы и местоположения пользователей.
Отслеживание развертывания Raygun
Когда вы выпускаете новую версию своего программного обеспечения, ожидается, что это будет лучшая версия с исправлениями ошибок и исправлениями для проблем, о которых сообщалось в предыдущих версиях.
Raygun предоставляет инструмент для отслеживания процесса развертывания и мониторинга выпусков. Нажмите на вкладку « Развертывания » в левом боковом меню, и вам будет представлена информация о том, как настроить Raygun с вашей системой развертывания. После того, как вы его настроите, вы сможете просмотреть подробный отчет, связанный с каждым выпуском.
Настройка системы отслеживания развертывания позволит вам глубже понять каждый из выпусков. Вы можете отслеживать тренд и видеть, улучшаете ли вы качество сборки или снижаете его. С каждым новым выпуском вы можете сравнивать частоту появления ошибок и отслеживать любые новые ошибки, возникающие в выпусках.
Я рекомендую прочитать официальную документацию, чтобы узнать, как интегрировать отслеживание развертывания Raygun с вашей системой развертывания.
Завершение
В этом уроке вы увидели, как начать использовать Raygun с веб-приложением Angular. Вы узнали, как использовать инструмент создания отчетов о сбоях для мониторинга и отслеживания возникновения сбоя. Используя инструмент Real User Monitoring, вы увидели, как понять детали взаимодействия с пользователем, например время загрузки страницы, среднее время загрузки и т. Д.
Инструмент отслеживания пользователей позволяет отслеживать и классифицировать ошибки и сбои в зависимости от пользователей приложения. Средство отслеживания развертывания помогает отслеживать каждый выпуск приложения на наличие сбоев и ошибок и позволяет узнать, как оно влияет на общее состояние вашего приложения.
Для получения подробной информации об интеграции Raygun с другими языками и средами, я бы рекомендовал прочитать официальную документацию Raygun .
Если у вас есть какие-либо вопросы и комментарии к сегодняшнему учебнику, пожалуйста, оставьте их ниже.
