当您知道它是如何发生的时，修复错误会容易得多，但情况并非总是如此。软件交付后，您将任由客户摆布，他们可能并不总是报告崩溃。
当代码崩溃时，您将错误记录在日志文件中，从而继续开发人员通过查看日志文件来跟踪错误发生的旅程。从日志文件中猜测崩溃的根本原因可能会占用您大量宝贵的时间。
有没有更简单的方法来解决您的软件应用程序中的错误原因？Raygun提供了一组有趣的解决方案，可以在您的 Web 和移动应用程序中出现错误时密切关注它们。
根据官方文档，Raygun 提供：
全面了解您的用户遇到的问题和工作流工具，以作为一个团队快速解决这些问题。
Raygun 提供了四种工具，可以更轻松地处理应用程序中的错误和崩溃：
Raygun崩溃报告 工具可帮助您监控和复制应用程序中发生的每个崩溃和错误。
真实用户监控工具有助于捕获每个用户会话和其他相关信息，以衡量用户体验。
用户跟踪工具有助于根据应用程序用户对崩溃和错误进行分类 。
Raygun 部署跟踪工具可以更轻松地跟踪每个版本，并向您展示它如何影响软件应用程序的整体性能。
在本教程中，您将学习如何将 Raygun 工具与您的 Web 应用程序集成以监控和跟踪错误。在本教程中，您将把 Raygun 工具与 angular Web 应用程序集成。
开始使用 Raygun
您可以将Raygun与多种编程语言和框架一起使用。为了本教程的目的，让我们看看如何开始将 Raygun 与 Angular Web 应用程序一起使用。
首先，您需要在Raygun上创建一个帐户。创建帐户后，您将看到一个选择首选语言或框架的屏幕。
在本教程中，您将学习如何开始在 Angular Web 应用程序上使用 Raygun。
使用 Angular 和 Raygun
从框架列表中，选择 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.
从中复制设置代码 并将Step 2其Angular (v2+)粘贴到app.raygun.setup.ts文件中。
在 Angular 应用程序内RaygunErrorHandler的文件中导入 ，并添加自定义错误处理程序。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。检查浏览器控制台，您将记录错误。
Raygun仪表板
当您运行该应用程序时，您将在浏览器控制台中记录一个错误。
NullInjectorError: No provider for Router!
在 Raygun 应用程序中，单击左侧的仪表板选项卡，您将获得有关 Raygun 记录的请求的详细信息。
正如在 Raygun 仪表板中所见，它显示了与您使用 Raygun 配置的 Angular 应用程序相关的会话计数、最近请求、错误实例计数等。
单击仪表板右侧显示的最近请求，您将获得与特定请求相关的详细信息。
Raygun 崩溃报告
应用程序崩溃是处理软件应用程序时的常见情况。许多此类崩溃发生在实时场景ios中，因此如果没有适当的崩溃报告系统就很难跟踪。
Raygun 提供了一个名为 Crash Reporting 的工具，可以更深入地了解应用程序崩溃。让我们看看崩溃报告是如何工作的。
您的 Angular 应用程序中有一个错误，导致它崩溃。让我们看看它是如何使用 Raygun Crash Reporting 报告的。
单击左侧菜单中的崩溃报告选项卡。您将列出错误报告。
在 Raygun 崩溃报告选项卡中，它显示了应用程序中发生的错误。在上面显示的选项卡中，错误已分类为Active、Resolved、Ignored和Permanently ignore。
您在运行应用程序时遇到的错误已记录在“活动”选项卡下。
单击列出的错误后，您将被重定向到另一个页面，其中包含与该错误相关的详细信息。在此页面上，您将获得错误摘要、HTTP 信息、发生错误的环境详细信息（如操作系统、浏览器等）、原始错误信息和错误堆栈跟踪等信息。
在显示与特定错误相关的信息时，Raygun 为您提供了根据您的修复更改错误状态的功能。您可以将状态更改为活动、已解决、已忽略等。
Raygun 的崩溃报告工具提供了向错误添加注释的功能，这对于在团队中讨论有关错误的详细信息非常有帮助。
崩溃报告：设置
崩溃报告带有一些设置，使用户更容易管理应用程序中发生的错误。
它为您提供了启用实时刷新、错误组的首次出现日期以及仪表板上的用户计数的选项。
您可以选择批量更改错误状态，也可以选择删除应用程序中发生的所有错误。
崩溃报告：入站过滤器
Raygun提供了一个基于 IP 地址、机器名称等过滤请求的选项。如果您不想跟踪来自特定 IP 地址的错误，您可以创建一个入站过滤器，以及来自运行的应用程序的错误该 IP 地址将不会被进一步跟踪。
让我们尝试为在 127.0.0.0.1 上运行的应用程序添加一个过滤器，看看它是否被跟踪。
在左侧菜单的崩溃报告选项卡下，单击入站过滤器链接。将 IP 地址添加127.0.0.0.1到过滤器列表中。
现在，如果您尝试运行应用程序，在崩溃时它不会在崩溃报告屏幕中被跟踪，因为它已被过滤掉。
您还可以根据机器名称、HTTP、构建版本、标签和用户代理添加过滤器。
Raygun 用户跟踪
用户使用该软件时遇到的大多数问题都未报告。沮丧的用户报告问题的可能性非常低。因此，您往往会丢失用户反馈以提高软件的质量。
Raygun 提供受影响的用户跟踪报告。此报告显示您的应用程序中遇到错误的用户列表。它提供了该特定用户如何遇到该特定错误的完整视图。您可以通过单击屏幕左侧 的“用户”选项卡来查看此报告。
在您的 Angular 应用程序中，您尚未使用 Raygun 的受影响的用户详细信息功能。因此，在受影响的用户跟踪报告中，您会发现匿名的用户详细信息以及错误详细信息。
单击用户跟踪信息中的匿名用户链接，您将看到与该特定匿名用户相关的详细信息。活动错误信息、用户体验、会话、用户使用的设备等详细信息都将显示在用户报告中。
您可以将用户信息详细信息添加到 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 部署跟踪与您的部署系统集成。
概括
在本教程中，您了解了如何开始将Raygun与 Angular Web 应用程序一起使用。您学习了如何使用崩溃报告工具来监控和跟踪崩溃的发生。使用真实用户监控工具，您了解了如何了解页面加载时间、平均加载时间等用户体验细节。
用户跟踪工具可让您根据应用程序用户监控和分类错误和崩溃。部署跟踪工具可帮助您跟踪应用程序的每个版本的崩溃和错误，并让您了解它如何影响应用程序的整体运行状况。
- 使用 Angular 和 Raygun
- Raygun仪表板
- 崩溃报告：设置
- 崩溃报告：入站过滤器
![如何删除Word中的空白页[4种简单方法]](https://www.weixiaolive.com/en/zb_users/upload/2023/07/20230702124855168827333590644.png "如何删除Word中的空白页[4种简单方法]")
