在前端开发一个站点或者应用，我们不仅要关注功能的实现，更要重视应用性能的优化。而在性能优化的过程中，日志是必不可少的。本文将会介绍一个 npm 包 reportback，用它我们可以快速的收集应用的信息，方便我们进行优化。
什么是 reportback
reportback 是一个原生的 JavaScript 包，它的作用是帮助我们收集应用的服务器连接和请求信息，以集中统计分析应用性能的瓶颈。
前置条件
在开始操作本文中的代码示例之前，需要先安装 node 环境和 npm 包管理器。另外，建议您使用最新版本的 Chrome 浏览器。
如何安装 reportback
我们可以使用 npm 包管理器来安装 reportback，要执行以下命令：
--- ------- ----------
安装完成后，我们需要在应用的 JavaScript 文件中引入报告包：
----- ---------- - ---------------------
如何使用 reportback
使用 reportback 是非常简单的，只需要跟随以下步骤即可：
初始化 reportback：
在你的项目中，初始化 reportback：
---------------- ------------------------ -------- ---------- -------------- - -------- ----- ------------------- - - --这里的 reportback.url 是报告后端服务器的 API URL 地址，myApp 是应用程序的名称，myGroup 是将要收集信息的服务器分组名称，mySecretKey 是您的凭据的安全密钥。timeout 和 maxConnectAttempts 参数分别是等待响应和发起连接尝试的最大次数，如果设置为 -1，它将等待响应，直到状态为 200。
发生错误时上报：
在您的应用程序中发生错误时，如下列出而报告：
----------------------------- ----------------
这里的 "Error" 是分组名称，"NetworkError" 是事件名称，即发生错误类型。
请求完成后上报：
当您的应用程序发送 AJAX 或 Fetch 请求并完成请求时，可以上传请求和响应信息，以此来了解您的服务器和网络的性能：
----- --- - --- ----------------- ---------------------------- ----------- - ------------------------------- ---- --------- - ---- ---------------- ------- ----------- -------------- ---------------------------- ----- ------------- -------- ---------- - --------- --- --- ----------------------------- ----------- - ------------------------------- ---- ------- - ---- ---------------- ------- ----------- -------------- ---------------------------- ----- ------------- -------- ---------- - --------- --- --- ----- --------- - ----------- --------------- ------------- -----------
以上代码利用 XMLHttpRequest 发起了一个 GET 请求，如果请求成功则通过 reportback 上报分组为 "Network"，事件名称为 "XHR Success" 其他参数包括请求 URL、状态、请求头、响应体以及延迟。
总结
通过 reportback，我们可以更加自如的收集我们应用和服务器的性能数据。希望本文能够帮助您理解并快速使用 reportback，以此来提升您的应用性能。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/77225