使用Raygun对Web和移动应用程序进行错误和性能监视

当您知道错误的产生原因时，修复它要容易得多，但事实并非总是如此。 软件交付后，您将受客户的摆布，他们可能并不总是报告崩溃。

当代码崩溃时，您将错误记录在日志文件中，从而继续开发人员通过查看日志文件来跟踪错误的发生。 从日志文件中猜测崩溃的根本原因可能会花费您很多宝贵的时间。

有没有更简单的方法来解决软件应用程序中的错误原因？ Raygun提供了一组有趣的解决方案，以密切关注Web和移动应用程序中出现的错误。

根据官方文档，Raygun提供：

全面了解您的用户所遇到的问题以及工作流工具，以团队为单位快速解决这些问题。

Raygun提供了四种工具，可以更轻松地处理应用程序中的错误和崩溃：

• Raygun 崩溃报告工具可帮助您监视和复制应用程序中发生的每个崩溃和错误。
• 真实用户监视工具有助于捕获每个用户会话以及其他相关信息，以评估用户体验。
• 用户跟踪工具有助于根据应用程序用户对崩溃和错误进行分类。
• Raygun 部署跟踪工具使跟踪每个版本变得更加容易，并向您展示了它如何影响软件应用程序的整体性能。

在本教程中，您将学习如何将Raygun工具与Web应用程序集成以监视和跟踪错误。 在本教程中，您将把Raygun工具与Angular Web应用程序集成在一起。

Raygun入门

您可以将Raygun与多种编程语言和框架一起使用。 为了本教程的缘故，让我们看一下如何将Raygun与Angular Web应用程序一起使用。

首先，您需要在Raygun上创建一个帐户。 创建帐户后，将显示一个屏幕，供您选择首选语言或框架。

在本教程中，您将学习如何在Angular Web应用程序上使用Raygun。

在Raygun中使用Angular

从框架列表中，选择Angular框架。 将显示一个屏幕，以选择Angular（v2 +）或Angular1.x 。

由于您将学习如何将Raygun与Angular 4集成，因此请重点关注Angular（v2 +）选项卡。

在将Raygun与Angular集成之前，您需要创建一个Angular应用程序。 让我们开始创建一个Angular应用程序。

首先，您需要全局安装Angular CLI。

npm install -g @angular/cli

使用Angular CLI创建Angular应用。

ng new AngularRaygun

您将使用所需的依赖项创建并安装Angular应用程序。

导航到项目目录并启动应用程序。

cd AngularRaygun

npm start

您将在http：// localhost：4200 /上运行该应用程序。

使用节点软件包管理器（npm）安装raygun4js库。

npm install raygun4js --save

在src/config文件夹中，创建一个名为app.raygun.setup.ts的文件。

复制Angular (v2+) Step 2中的设置代码，并将其粘贴到app.raygun.setup.ts文件中。

将RaygunErrorHandler导入Angular应用程序内的app.module.ts文件中，然后添加自定义错误处理程序。 这是app.module.ts文件的外观：

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文件中。

import { Router } from '@angular/router';

修改构造函数方法，如下所示：

constructor(private router: Router) {}

由于尚未将其导入AppModule中，因此在运行应用程序时，以上代码将引发错误。 让我们看看Raygun如何捕获错误。 保存以上更改，然后重新启动应用程序。

将浏览器指向http：// localhost：4200 。 检查浏览器控制台，您将记录错误。

雷枪仪表板

运行该应用程序时，浏览器控制台中将记录一个错误。

NullInjectorError: No provider for Router!

在Raygun应用程序中，单击左侧的Dashboard选项卡，您将获得有关Raygun记录的请求的详细信息。

如在Raygun仪表板中看到的，它显示与您使用Raygun配置的Angular应用程序相关的会话计数，最近请求，错误实例计数等。

单击显示在仪表板右侧的最近请求，您将获得与特定请求相关的详细信息。

Raygun崩溃报告

在处理软件应用程序时，应用程序崩溃是常见的情况。 这些崩溃中有很多是在实时情况下发生的，因此，如果没有适当的崩溃报告系统，就很难进行跟踪。

Raygun提供了一个名为Crash Reporting的工具，该工具可以更深入地了解应用程序崩溃。 让我们看一下崩溃报告的工作方式。

您的Angular应用中存在一个错误，该错误将其崩溃。 让我们看看如何使用Raygun Crash Reporting报告它。

单击左侧菜单中的崩溃报告选项卡。 您将列出错误报告。

在“ Raygun崩溃报告”选项卡中，它显示了应用程序中发生的错误。 在上面显示的选项卡中，错误已分类为有效 ， 解决 ， 忽略和永久忽略 。

运行该应用程序时遇到的错误已记录在“ 活动”选项卡下。

单击列出的错误后，您将被重定向到另一页，其中包含与该错误有关的详细信息。 在此页面上，您将具有诸如错误摘要，HTTP信息，发生错误的环境详细信息（例如操作系统，浏览器等），原始错误信息以及错误堆栈跟踪之类的信息。

在显示与特定错误相关的信息时，Raygun为您提供了根据您的修复程序更改错误状态的功能。 您可以将状态更改为有效，已解决，已忽略等。

Raygun的崩溃报告工具提供了对错误添加注释的功能，这对于在团队合作中讨论有关该错误的详细信息非常有帮助。

崩溃报告：设置

崩溃报告附带一些设置，使用户可以更轻松地管理应用程序中发生的错误。

它为您提供了启用实时刷新，错误组上的首次看到日期以及仪表板上的用户计数的选项。

您可以选择更改批量错误状态，也可以选择删除应用程序中发生的所有错误。

崩溃报告：入站过滤器

Raygun提供了一个基于IP地址，计算机名称等过滤请求的选项。如果您不想跟踪来自特定IP地址的错误，则可以创建一个入站过滤器，并在该应用程序上运行的应用程序中的错误IP地址不会被进一步跟踪。

让我们尝试为运行在127.0.0.0.1上的应用程序添加一个过滤器，并查看是否被跟踪。

在左侧菜单的“ 崩溃报告”标签下，单击“ 入站过滤器”链接。 将IP地址127.0.0.0.1添加到过滤器列表。

现在，如果您尝试运行该应用程序，则在崩溃时将不会被跟踪，因为它已被过滤掉。

您还可以基于计算机名称，HTTP，构建版本，标签和用户代理添加过滤器。

Raygun用户跟踪

用户使用该软件时遇到的大多数问题均未报告。 沮丧的用户报告问题的可能性非常低。 因此，您倾向于失去用户反馈以提高软件质量。

Raygun提供了受影响的用户跟踪报告。 此报告显示您的应用程序中遇到错误的用户列表。 它提供了该特定用户如何遇到该特定错误的完整视图。 您可以通过单击屏幕左侧的“ 用户”选项卡来查看此报告。

在Angular应用程序中，您尚未使用Raygun的受影响的用户详细信息功能。 因此，在受影响的用户跟踪报告中，您将找到匿名的用户详细信息以及错误详细信息。

单击用户跟踪信息中的Anon用户链接，您将看到与该特定匿名用户有关的详细信息。 详细信息（例如活动的错误信息，用户体验，会话，用户使用的设备等）都将显示在用户报告中。

您可以将用户信息详细信息添加到Raygun配置文件中。 将以下代码添加到config/app.raygun.setup.ts文件中，以将用户信息详细信息发送到Raygun。

rg4js('setUser', {

  identifier: 'roy_agasthyan_unique_id',

  isAnonymous: false,

  email: 'royagasthyan@gmail.com',

  firstName: 'Roy',

  fullName: 'Roy Agasthyan'

});

这是config/app.raygun.setup.ts文件的外观：

import * as rg4js from 'raygun4js';

import { ErrorHandler } from '@angular/core';



const VERSION_NUMBER = '1.0.0.0';



rg4js('apiKey', 'FehB7YwfCf/F+KrFCZdJSg==');

rg4js('setVersion', VERSION_NUMBER);

rg4js('enableCrashReporting', true);

rg4js('enablePulse', true);

rg4js('setUser', {

  identifier: 'roy_agasthyan_unique_id',

  isAnonymous: false,

  email: 'royagasthyan@gmail.com',

  firstName: 'Roy',

  fullName: 'Roy Agasthyan'

});



export class RaygunErrorHandler implements ErrorHandler {

  handleError(e: any) {

    rg4js('send', {

      error: e,

    });

  }

}

保存以上更改，然后重新加载Angular Web应用程序。 转到Raygun应用程序控制台，然后从左侧菜单中单击“ 用户”选项卡。 您将能够看到新用户显示在受影响的用户列表中。

单击用户名以查看与特定用户关联的详细信息。

Raygun真实用户监控

Raygun的“真实用户监视”工具使您可以深入了解实时用户会话。 它使您能够确定用户从用户环境与应用程序进行交互的方式，以及它如何影响应用程序的性能。

让我们运行Angular应用程序，看看如何在Real User Monitoring工具中对其进行监视。 单击左侧菜单中的“ 真实用户监视”选项卡。 您将能够查看实时用户详细信息和会话。

通过单击不同的选项卡，您可以监视所请求页面的性能。

它提供有关最慢页面和最请求页面的信息。 基于许多指标，您可以监视加载时间较长的页面并进行修复，以提高应用程序的性能。

真实用户监控中还有许多其他选项卡，可基于不同的参数（例如浏览器，平台和用户位置）对用户信息进行有用的洞察。

Raygun部署跟踪

当您发布软件的新版本时，预计它会是一个更好的版本，其中包含针对早期版本中报告的问题的错误修复和补丁程序。

Raygun提供了一种工具来跟踪部署过程并监视发布。 单击左侧菜单中的“ 部署”选项卡，将为您提供有关如何使用部署系统配置Raygun的信息。 配置完成后，您将可以查看与每个版本相关的详细报告。

设置部署跟踪系统将使您能够更深入地了解每个版本。 您可以监视趋势并查看您是在提高构建质量还是降低构建质量。 对于每个新版本，您可以比较错误率并跟踪在这些版本中出现的任何新错误。

我建议阅读官方文档，以了解如何将Raygun部署跟踪与您的部署系统集成。

包起来

在本教程中，您了解了如何在Angular Web应用程序中使用Raygun 。 您学习了如何使用“崩溃报告”工具来监视和跟踪崩溃的发生。 使用真实用户监视工具，您了解了如何了解用户体验的详细信息，例如页面加载时间，平均加载时间等。

用户跟踪工具使您可以根据应用程序用户监视和分类错误和崩溃。 部署跟踪工具可帮助您跟踪应用程序的每个发行版是否崩溃和错误，并让您知道它如何影响应用程序的整体运行状况。

有关将Raygun与其他语言和框架集成的详细信息，我建议阅读Raygun官方文档 。

如果您对今天的教程有任何疑问和意见，请在下面发布。

翻译自: https://code.tutsplus.com/tutorials/error-and-performance-monitoring-for-web-mobile-apps-using-raygun--cms-30311