错误监控实战

处理错误和崩溃，无论是开发应用程序时，还是更糟糕的在生产环境中，都是应用程序开发人员的日常。我们习惯于需要对问题进行故障排除，因为它是每个开发职位不可或缺的一部分。在本地开发和测试时，我们通常可以利用自己的开发工具和日志，但当用户开始报告错误时，我们需要更多。

Raygun 错误监控使故障排除更加容易，并可在调试过程中节省您数小时。它将持续从您的应用程序中提取错误数据，并将其提供给易于理解的报告。我们将能够看到有多少独立用户遇到了这个问题，在哪些页面上，使用什么浏览器，以及在什么时间。您将能够将错误分配给您帐户中的用户，并跟踪解决错误过程中的评论和进展。

此外，如果您的应用程序中使用捆绑的 JavaScript，您可以上传源映射并将堆栈跟踪分解成可理解的部分，以便您能够快速找到实际导致错误的文件的根源。

在本文中，我们将深入探讨如何设置应用程序、配置崩溃报告，并开始使用它来定位用户遇到的错误。我们将使用一个开源的演示 React 应用程序，如果需要，任何人都可以查看并跟着操作。

我们将研究几种不同的配置和错误报告场景，并努力确保我们为应对生产网站中可能遇到的任何此类挑战做好准备。

设置我们的测试应用程序

首先，我们需要设置我们的测试应用程序。今天我们将使用 RealWorld 演示应用程序，它可以在 GitHub 上找到。

您可以登录您的开发服务器并克隆存储库，如下所示

git clone https://github.com/gothinkster/react-redux-realworld-example-app.git

下载应用程序后，您可以运行 npm install 来安装 RealWorld 的所有必需依赖项，然后运行 npm start 来启动您的开发服务器。此应用程序将从一个定期清除的公共后端获取数据，立即为我们提供测试数据。在以后的教程中，我们可能会用我们自己的后端替换它，但目前，我们保留默认设置。为了与 Raygun 进行测试，我们可以选择在生产模式下启动，而不是使用开发版本，以模拟生产站点的故障排除工作。只需

npm run build
serve -s build

请注意，如果您选择提供生产版本，当您对应用程序代码进行更改时，您将需要创建一个新的构建并提供它，而不是开发服务器将自动更新。然而，当处理 Raygun 中的源映射时（我们稍后将更深入讨论的主题），使用静态生产构建可能会有所帮助。

启动后，应用程序应该看起来像这样

连接到 Raygun

前往您的 Raygun 仪表板并创建一个应用程序。您可以选择 React 作为技术，并且会获得放置在您网站上的代码片段，将其连接到 Raygun 的监控。

<script type="text/javascript">
     !function(a,b,c,d,e,f,g,h){a.RaygunObject=e,a[e]=a[e]||function(){
     (a[e].o=a[e].o||[]).push(arguments)},f=b.createElement(c),g=b.getElementsByTagName(c)[0],
     f.async=1,f.src=d,g.parentNode.insertBefore(f,g),h=a.onerror,a.onerror=function(b,c,d,f,g){
     h&&h(b,c,d,f,g),g||(g=new Error(b)),a[e].q=a[e].q||[],a[e].q.push({
     e:g})}}(window,document,"script","//cdn.raygun.io/raygun4js/raygun.min.js","rg4js");
   </script>

调用 Raygun 脚本，提供您的应用程序密钥，并将 enableCrashReporting 和 enablePulse 设置为 true。

<script type="text/javascript">
     rg4js('apiKey', 'kFetsl3D7yDDqE3yM0cNGn');
     rg4js('enableCrashReporting', true);
     rg4js('enablePulse', true);
   </script>

您可以将其放在您的 index 文件中，就在 body 标签关闭之前。

在 React 中，路由事件的报告可能与传统 Web 应用程序不同。如果您想了解如何增强 React 应用程序的报告，请阅读这篇关于 Raygun4JS 和 React 之间增强集成的帖子。

崩溃报告场景 1

一切连接后，我们应该能够在 Raygun 中看到应用程序错误。为了测试这一点，我们来制造一个错误。

在这里，我们打开了 App.js 文件并向下滚动到第 48 行，将 this.props.onLoad() 改为 this.prop.onLoad()。仅仅是一个字母的差异，它足以引发一个错误，让我们看看崩溃报告是如何工作的。看看 Raygun。当您打开崩溃报告标签时，您会看到一个列表。点击列表中的错误（可能是唯一的那个），您将看到如下所示的报告

在我们的示例中，第一条消息告诉我们查看的位置。在 App.js 的第 48 行，我们看到在评估 "this.prop.onLoad" 时 "undefined is not an object"。经验告诉我们这个语法是错误的，缺少一个字符，但即使没有经验，您现在也知道从哪里开始调查。

源映射

如果您的报告是一个堆栈跟踪，其中包含一堆对捆绑 JavaScript 的引用，请不要害怕。这只意味着 Raygun 无法立即找到正确的方法来映射您的捆绑 JavaScript 并将其分解以协助故障排除。如果发生这种情况，请转到侧边栏中的“应用程序设置”，然后是“JS 源映射中心”。在这里，您可以上传您的编译后的 JS 和映射（在此演示中，位于 build/static/js）。

上传 .js 文件和 .map 文件。完成后，返回崩溃报告屏幕并点击重新映射按钮。如果这不起作用，请稍等片刻，刷新页面，然后重试。现在，无用的混淆堆栈跟踪被分解成非常具体的报告信息。

崩溃报告场景 2

既然我们已经使用 Raygun 的崩溃报告解决了一个问题，并了解了 Raygun 的源映射功能，那么我们再分析一种情况。

Banner.js 组件接受两个输入：appName 和 token。在我们的组件内部，会检查 token 的状态——如果它已定义，则会有一个结果；如果未定义，则会有一个默认结果。然而，appName 只是被使用，并期望有值。让我们创建一个场景，其中 Banner.js 接收到的 appName 的值实际上是 null。我们只需在函数内部将其重新定义为 null。

无条件地将 appName 显示为首页的 H1 现在导致应用程序崩溃。太好了！我们来看看 Raygun。

同样，在正确进行源映射后，这里报告的错误清晰明了。当我们读到在评估 toLowerCase 语句时 null 不是一个对象，并且给出了文件和行号时，我们立即就知道发生了什么。某个地方，以某种方式，appName 被设置为 null。现在我们可以回溯到值应该来源于哪里并进行检查。

此外，这正是我们可能更希望检查 appName 是否有值的地方，并在 appName 为空时将 H1 标签默认设置为某个标准值。

崩溃报告侧边栏

当我们调查此错误或之前的错误时，请注意作为崩溃报告功能集一部分设置的极其有用的侧边栏。

在这里，我们将能够找到关于错误发生的大量信息。首先是错误的状态——它目前处于活动状态，但也可以被解决或忽略。它可以分配给我们 Raygun 账户的特定成员。

此外，还可以查看遇到此错误的用户集合，以及问题最初发生的时间与最新实例发生时间的对比时间线。最后，我们还有关于用户所用浏览器的详细信息。

结论

Raygun 错误监控提供用户遇到错误的自动跟踪、用户之间的关联、时间戳、堆栈跟踪等。将此功能与捆绑应用程序的自定义源映射结合使用，您将看到一个极其强大和灵活的解决方案，可应对生产网站中偶尔出现的错误，甚至在开发过程中。如果您将崩溃报告与 Raygun 的客户体验监控功能结合使用，您还可以进一步包含导致错误的整个用户旅程和性能故事。

Raygun 错误监控的计划起价仅为每月 4 美元，是一种经济高效的方式，可让您了解崩溃和错误。 立即注册免费 14 天试用。