简介
perr是一个前端项目的错误日志采集工具，通过该工具，可以迅速找出前端项目中出现的错误，定位问题并进行修复。本文将介绍perr的使用方法，以及一些实践经验。
使用方法
安装perr
首先，需要在项目中安装perr，使用npm安装。
npm install --save perr
引入perr
在需要使用perr的地方，引入该包。
import Perr from 'perr'
初始化perr
使用perr之前，还需要初始化配置。
Perr.init({
url: 'http://localhost:8080/error-reporter', //上报的接口地址
extendInfo: () => ({ //扩展信息
screen: window && window.screen.width,
ua: window && window.navigator.userAgent
})
})其中，url是将错误信息上报的接口地址，可以根据实际情况进行配置，extendInfo是一个函数，用于添加上报的扩展信息。
监听错误
接下来，我们需要在前端项目中捕获错误，并将其传递给perr进行处理。
window.addEventListener('error', err => {
Perr.handleError(err)
})上报错误信息
当出现错误时，我们还需要将错误信息上报到服务器。
window.addEventListener('error', err => {
Perr.handleError(err)
Perr.report()
})demo
以下是一个基本的使用示例：
-- -------------------- ---- ------- --------- ----- ------ ------ --------------------- ------- ------ --------------- ----------------------- ------- -------------------------- ------- -------
-- -------------------- ---- -------
------ ---- ---- ------
-----------
---- ---------------------------------------
----------- -- -- --
------- ------ -- --------------------
--- ------ -- --------------------------
--
--
-------------------------------- --- -- -
---------------------
-------------
--实践经验
上报信息的合并
由于前端项目中往往会遇到大量错误，如果每个错误都单独进行上报，会占用大量带宽和服务器资源。因此，我们需要对错误进行合并，将多个错误信息合并到一个上报请求中，从而降低网络负担。一个可行的方案是：
- 使用一个队列存储错误信息，每当出现新的错误时，将其添加到队列中。
- 定期发送一次请求，将队列中的所有错误信息进行上报。
- 在成功上报之后，清空队列，等待下一次错误上报。
-- -------------------- ---- -------
----- --------- - --
--- -----
-------- ----------- ----- -
-------------------
-- -------- -
----- - ------------- -- -
----------------------
---------------- - -
----- - ----
-- -----
-
-错误信息的过滤
在实际项目中，我们通常只需要关心一部分的错误信息，而忽略掉一些无关紧要的错误。因此，我们需要对错误信息进行过滤，只保留需要的部分。一个可行的方案是：
- 在添加到队列中时，通过自定义函数对错误信息进行过滤。
- 在上报错误信息之前，对队列中的每个错误信息进行打标记，将要过滤掉的错误信息标记为删除。
- 在上报错误信息的时候，只将未被标记为删除的错误信息进行上报。
-- -------------------- ---- -------
----- --------- - --
--- -----
-------- ----------- ----- -
----- ----------- - ----------------
-- ------------- -
---------------------------
-
-- -------- -
----- - ------------- -- -
-----------
-------------------------------- -- ---------------
---------------- - -
----- - ----
-- -----
-
-
-------- ----------- ----- -
-- --------
-
-------- --------- -- -
--------------------- -- -
-- ------------------- -
------------ - ----
-
--
-
-------- ------------ ----- -
-- --------
-结论
perr是一个非常有用的前端错误日志采集工具，可以让我们快速定位前端项目中出现的错误，从而加快项目的开发进度。在实际应用中，我们需要对错误信息进行合理管理，避免出现网络负荷过大等问题。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600551d381e8991b448cf3bc