为以客户为中心的团队使用 Raygun 进行应用程序性能监控
0/5 (0投票)
Raygun 的工具套件对那些正在寻找解决方案来监控面向客户的应用程序问题的开发人员来说是救星。
Raygun 的工具套件对那些正在寻找解决方案来监控面向客户的应用程序问题的开发人员来说是救星。有了错误跟踪和崩溃报告、真实用户监控 (RUM)和应用程序性能监控 (APM)工具，就可以采取有力措施在错误成为用户问题之前定位并消除它们。
以客户为中心的团队始终致力于减轻客户的摩擦和负担，而立即发现和阻止问题以及快速进行故障排除是其中很大一部分。
Raygun 提供六种工具来协助开发人员处理错误、崩溃和性能监控。
在本教程中，我们将向您展示如何开始使用 Raygun，以及如何使用上述每种工具来监控您的应用程序，并确保您的客户获得您能为他们提供的最佳、最无错误的体验。
开始使用 Raygun
Raygun 提供 14 天免费试用，在此期间您可以试用所有三种产品，因此您不妨注册试用一下。在本教程中，我们将以一个演示 React 应用为例。
设置演示 React 应用
在此示例中，我们可以使用演示 React 照片应用程序 SnapShot。它非常容易上手。您可以使用任何应用程序进行学习，尤其是 React 应用程序，它将与我们的应用程序具有相同的说明，但如果您希望使用我们这里的应用程序，可以按照以下步骤进行：
- 从 GitHub 下载代码。
- 如果您希望为演示图像集使用自己的 Flikr 帐户，请在 src/api 文件夹中创建一个 *config.js* 文件，并在其中写入：
export const apiKey = "YOUR_FLIKR_API_KEY";. - 在 *src* 文件夹内打开终端并运行 yarn install 以下载依赖项。
- 最后，运行 `yarn start` 启动服务器并本地托管站点。
对于本教程的所有客户端部分，您都需要将 Raygun 库包含在您的应用程序中。首先，让我们将其添加到我们的 *index.html* 中，从 CDN 包含它。
<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 您正在启用哪个服务，并提供一个 API 密钥来标识您的应用程序。
<script type="text/javascript">
rg4js('apiKey', 'YXpPX23Gc6DJCykzoWByg');
</script>
您需要将 API 密钥替换为您自己的密钥，可以在应用程序设置屏幕中获取。
最后，如果您希望启用用户跟踪，请在之前的代码段后面插入一个用户跟踪代码段，使其看起来像这样：
<script type="text/javascript">
rg4js('apiKey', 'YXpPX23Gc6DJCykzoWByg');
rg4js('setUser', {
identifier: '662607004',
isAnonymous: false,
email: 'ronald@raygun.com',
firstName: 'Ronald',
fullName: 'Ronald Raygun',
});
</script>
一旦您一切就绪，就可以将用户跟踪变量连接到当前登录的用户配置文件，将他们的姓名、电子邮件或 ID 添加到这些字段中，而不是使用占位符。在某些情况下，这对于将错误与用户关联起来非常有用。
错误跟踪
错误/崩溃报告通过插入一些 JavaScript 代码来工作，该代码会查找错误、捕获它们并将它们发送到 Raygun。此外，您还可以自动接收崩溃报告的实时警报。
为了启用错误跟踪，您需要在 Raygun 配置块中添加一行，紧跟在 apiKey 行之后。
rg4js('enableCrashReporting', true);
这会让 Raygun 知道您希望从此应用程序跟踪崩溃报告。
实际演示
现在，让我们看看崩溃报告是如何工作的！Raygun 建议我们在应用程序的其中一个页面中插入一行代码来抛出错误。
throw new Error('Congratulations! Raygun is set up and capturing errors');
在我们的演示 React 应用中，我们将这一行直接放在 App.js 的中间，看看会抛出什么类型的错误。我们还将其复制到了 *index.html* 中（在 script 标签内），希望得到预期的“恭喜”消息。如果我们查看 Raygun 中我们应用程序的崩溃报告选项卡，我们会看到错误图表同时捕获了这两个条目。
它们就在那里！让我们点击第一项。我们得到一个充满了信息的屏幕。
此报告告诉我们什么出了问题，何时发生的，是什么类型的异常，以及如果可能，在哪个文件和哪一行。它会记录被请求的 URL，有多少用户受到此错误的影响，以及在什么时间段内，并且允许在发生事实调查或实施修复时，将评论汇集在报告下方。
能够看到哪些用户受到了影响，不仅有助于定位错误（通过用户访问过的位置和他们拥有的权限来缩小范围），而且也是主动进行客户支持或纠正您的客户可能遇到的任何潜在错误或问题的机会（无论他们是否意识到）。它还可以提供有关如何与客户沟通停机或问题的信息，以及哪些是未影响任何（或许多）客户的次要修复。
在右上角，有一个可以手动更新的状态，指示错误是活动问题、已解决、暂时忽略还是永久忽略。如果您的 Raygun 帐户团队中有多个用户，还可以将其分配给团队成员，从而可以将用户转交给最相关的响应者。
这是一个巨大的信息量，尤其是在您寻找未知问题时，可以大大缩短定位和响应代码中错误所需的时间。
崩溃报告设置
崩溃报告还有一些可以切换的设置。也许最方便的是在仪表板中启用和禁用实时刷新。您也可以在这里批量更改状态，或者按状态删除错误。
崩溃报告入站过滤器
崩溃报告产品中的入站过滤器允许您根据 IP 地址、机器名称、产品版本或其他元数据信息过滤入站报告。您可以使用这些过滤器丢弃特定版本、机器或其他来源的数据。当您尝试仅从生产环境隔离报告时，这尤其有用，同时仍然允许开发环境连接到 Raygun。这也可以帮助您避免计划的月费限制。
真实用户监控 (RUM)
Raygun 的真实用户监控 (RUM) 功能可帮助您回答有关应用程序性能及其对最终用户体验影响的最大问题。
- 深入了解每个用户会话的实例级性能。
- 重新跟踪用户会话，查看他们在每个页面的体验，以便更快地解决错误。
- 优先处理影响人数最多的性能改进。
设置真实用户监控
要设置真实用户监控，我们需要另外两项。第一项是启用 RUM 的一行。
rg4js('enablePulse', true);
您可以将其添加到您已添加的 `apiKey` 行之后。接下来，您还需要在路由器的路由更改回调中添加一个事件跟踪行。要在我们当前的演示应用程序中做到这一点，我们需要更改一些内容。
// App.js
import React, { Component } from "react";
import PhotoContextProvider from "./context/PhotoContext";
import { HashRouter, Route, Switch, Redirect } from "react-router-dom";
import Header from "./components/Header";
import Item from "./components/Item";
import Search from "./components/Search";
import NotFound from "./components/NotFound";
import { withRouter } from 'react-router'
import rg4js from 'raygun4js';
class App extends Component {
constructor(props) {
super(props);
// The listener
this.props.history.listen((location, action) => {
rg4js('apiKey', 'CjoU0A4Kie1DAyEzLRh7Jg');
rg4js('trackEvent', { type: 'pageView', path: location.pathname });
});
}
// Prevent page reload, clear input, set URL and push history on submit
handleSubmit = (e, history, searchInput) => {
e.preventDefault();
e.currentTarget.reset();
let url = `/search/${searchInput}`;
history.push(url);
};
render() {
return (
<PhotoContextProvider>
<HashRouter basename="/SnapScout">
<div className="container">
<Route
render={props => (
<Header
handleSubmit={this.handleSubmit}
history={props.history}
/>
)}
/>
<Switch>
<Route
Exact path="/" render={() => <Redirect to="/mountain" />}
/>
<Route
path="/mountain" render={() => <Item searchTerm="mountain" />}
/>
<Route path="/beach" render={() => <Item searchTerm="beach" />} />
<Route path="/bird" render={() => <Item searchTerm="bird" />} />
<Route path="/food" render={() => <Item searchTerm="food" />} />
<Route
path="/search/:searchInput" render={props => (
<Search searchTerm={props.match.params.searchInput} />
)}
/>
<Route component={NotFound} />
</Switch>
</div>
</HashRouter>
</PhotoContextProvider>
);
}
}
export default withRouter(App);
在 *App.js* 中，我们导入了 `withRouter` 和 `rg4js`。我们添加了一个构造函数和一个监听器来监听 Raygun 将跟踪的事件。最后，我们在文件末尾使用了 `withRouter`。在 *index.js* 文件中，我们导入了 `BrowserRouter` 并使用了它。现在，我们已经为应用程序设置了路由，以防我们需要它，并且为 Raygun 跟踪路由事件。
// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
import { BrowserRouter, Route } from 'react-router-dom';
ReactDOM.render(
<BrowserRouter>
<App />
</BrowserRouter>,
document.getElementById('root')
);
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();
查看真实用户监控的实际运行情况
现在，我们的概述页面上已经有一些 RUM 结果。您可以看到 SnapShot 主页是唯一被访问过的页面，因为现在它是一个单视图应用程序。您可以在此处看到最常请求的页面、最常查看的虚拟页面、最慢和最常请求的页面、按客户端时间划分的最慢的页面以及按服务时间划分的最慢的页面等指标。
您还可以获得最常请求的 XHR 列表以及花费在这些请求上的时间。这对于改善客户用户体验非常有用，因为您可以轻松找出大型文件或高延迟问题，并尝试快速解决这些问题以加快应用程序的性能。
您还可以通过单击页面来深入了解该页面的详细信息。
页面的详细视图将为您提供该页面随时间的历史数据、加载该页面所需的其他请求，以及该页面的最新最慢请求——以及哪个用户正在进行该请求。同样，这是一个绝佳的性能改进数据点，因为您将能够开始关联哪些客户加载速度最慢的趋势，这可能有助于为是否在另一个 CDN 节点或在哪个区域托管另一个服务器等决策提供信息。
RUM 产品中还有许多其他选项卡。您可以从会话、用户、浏览器等角度监控数据。用户是一个感兴趣的点，因为您可以在此处绘制“用户满意度”图表。此指标基于用户的总体加载时间。您还可以在“实时”选项卡下看到实时会话的地图，以及最新的崩溃以及哪些用户正在经历这些崩溃。
尝试我们的 14 天免费试用，亲身体验应用程序性能监控。
应用程序性能监控 (APM)
虽然我们的 React 演示应用程序没有后端，但 Raygun 也提供了监控服务器端性能的解决方案。通过应用程序性能监控产品，您将能够发现服务器端性能瓶颈，直至代码级别。这自然也完善了产品线，因为并非所有性能问题都是客户端的。有了 APM，您可以快速有效地处理其中一种或两种。
部署跟踪
通过 Raygun 部署跟踪，您可以更快、更自信地发布。您可以集成 Raygun 与您的部署系统来监控每次部署，或者自动化调用 Raygun 的部署 API 端点。
一旦 Raygun 看到部署，您将能够在错误和性能图表中看到与版本和部署相关的数据。这将帮助您了解哪些部署对应用程序的健康状况或客户体验产生了负面影响。
此外，这还提供了另一个可以用来排查问题的指标，了解问题是在特定部署期间引入的，或者将修复任务分配给与该特定部署相关的工程师。
部署跟踪还将为您提供主动进行 bug 修复和性能调整的工具。您将能够看到引入修复（或未引入修复，您仍有工作要做）后统计数据呈下降趋势。
用户跟踪
在用户跟踪选项卡中，您将看到使用我们在开头设置的用户跟踪代码段跟踪的所有用户的列表。在此演示中，只有 Ronald Raygun，但如果您已将该代码段与应用程序中的用户会话信息相关联，您将看到更广泛的结果。
这为您提供了一个窗口，可以查看您的应用程序的错误、崩溃或加载速度对用户的影响。如果您深入了解任何特定用户，您将看到一个更详细的用户面板。它告诉您有关他们的所有信息，包括以下项目（及更多）：
- 用户体验摘要
- 会话次数
- 会话平均时长
- 平均浏览页面数
更重要的是，它还向您展示了该用户暴露于多少错误，以及其中有多少尚未解决。这些信息可能对客户服务代表至关重要，他们可以亲眼看到用户可能遇到的问题，点击进入问题，查看分配给谁，阅读有关问题的评论，并在客户提问时提供更好的答案。
尝试我们的 14 天免费试用，了解真实用户会话信息如何加快分辨率。
仪表板
Raygun 提供可自定义的仪表板，供您用于监控和报告从应用程序接收到的数据。它们可以包含多个小部件，为您提供应用程序状态和性能的实时可见性。
借助这些指标、图表、列表等在一个易于使用的仪表板中，可以轻松地向同事和利益相关者展示您团队的软件性能如何。您可以设置多个仪表板，只添加来自特定应用程序或一组应用程序的小部件，或者将数据合并到大型汇总报告中——随您喜欢。
结论
Raygun 在某种意义上是一种粘合剂，可以将您的应用程序或多个应用程序的各个部分连接起来，并提供应用程序监控、崩溃和错误报告、故障排除、问题跟踪、服务实时状态更新和客户服务辅助。Raygun 与 Jira、Slack、Zendesk、PagerDuty 等服务的众多集成使这一切更加容易，因为您可以直接在他们已经使用的应用程序中，为只需要特定信息的人提供他们所需的数据。
通过在发生时显示错误和性能限制，并提供有关复现和解决它们的详细信息，Raygun 使工程团队能够在短时间内提高整体应用程序质量。
尝试免费试用，了解 Raygun 可以告诉您有关您的应用程序的信息。