在前端开发中，应用的错误收集和日志记录是非常重要的。redux-raven-middleware 就是一个辅助 redux 收集错误并上报到 Sentry 的中间件。它可以帮助我们实现简单而高效的错误统计和管理，提高开发效率。
接下来，我们将为大家详细介绍如何使用该 npm 包。
安装
redux-raven-middleware 可以使用 npm 或 yarn 进行安装，通过以下命令进行安装：
npm install --save redux-raven-middleware yarn add redux-raven-middleware
使用方法
使用 redux-raven-middleware 很简单，我们只需要进行配置，并将其包装到 applyMiddleware 中即可。
以下是一个最基本的使用方式：
-- -------------------- ---- ------- ------ - ------------ --------------- - ---- -------- ------ --------------------- ---- ------------------------- ------ ----------- ---- ------------- ------ ----- ---- ----------- -- ------ -- --- ----- ------------------------------------------ ----- ----------- - ------------------------------- ----- ----- - ------------ ------------ ------------------------------- --
在这个最简单的例子中，我们将 Raven 实例直接传入到 createRavenMiddleware 中，即可创建一个 redux 中间件并将其添加到 applyMiddleware 中。这个中间件会自动捕获所有的 redux 动作，将其转化为一个事件，并上报到 Sentry。
深入配置
除了上面这个简单的用法外，我们还可以对 redux-raven-middleware 进行更深入的配置以满足自己的需求。下面是一些常见的配置项：
actionTransformer option
actionTransformer 可以将原始 redux 动作转换为更适合上报的事件对象。默认情况下此选项为“identity”，将每个动作转换为其自己。但是我们可以通过传递一个转换函数来自定义转换：
-- -------------------- ---- -------
----- ------- - -
------------------ -------- -- --
----- ------------
----- ------------
-------- - ----- -------------- -
--
--
----- ----------- - ----------------------------- ----------在这个例子中，我们将动作转换为包含更多信息的对象。
breadcrumbCategory option
breadcrumbCategory 选项允许我们在事件上添加一个面包屑列表，以帮助我们更好地理解事件发生的上下文。例如：
const options = {
breadcrumbCategory: 'redux'
};
const middlewares = [createRavenMiddleware(Raven, options)];在这个例子中，我们将其中的所有面包屑分类为 redux。
breadcrumbMessage option
breadcrumbMessage 选项允许我们在事件上添加一个面包屑消息。例如：
const options = {
breadcrumbMessage: '这是一条消息'
};
const middlewares = [createRavenMiddleware(Raven, options)];filterBreadcrumbActions option
filterBreadcrumbActions 选项允许我们控制在何种情况下向事件添加面包屑。它是一个函数，接受动作和当前状态作为参数，如果我们希望跳过此次动作，可以返回 false。
-- -------------------- ---- -------
----- ------- - -
------------------------ -------- ------ -- -
-- ------------ --- ---------------- -
------ ------
-
------ -----
-
--
----- ----------- - ----------------------------- ----------在上述代码中，如果动作类型是 QUERY_REQUEST，则不收集面包屑。
breadcrumbDataFromState option
breadcrumbDataFromState 选项允许我们从状态中提取数据，将其添加到面包屑中。
const options = {
breadcrumbDataFromState: (state) => ({
user: state.user,
location: state.router.location.pathname
})
};在上述代码中，我们将用户和当前路径添加到面包屑中。
breadcrumbLevel option
breadcrumbLevel 选项允许我们定义添加到面包屑的等级。默认情况下，所有面包屑都添加到“info”等级。我们可以使用此选项将面包屑添加到“warning”或“error”等级。
const options = {
breadcrumbLevel: 'warning'
};在上述代码中，将所有面包屑添加到“warning”级别。
结论
使用 redux-raven-middleware，我们可以很容易地将 redux 应用程序中的错误收集和日志记录集成到 Sentry 中。同时，它还提供了许多自定义选项，以便我们可以完全控制随事件发布的数据。
希望这篇教程能帮助到大家，谢谢阅读！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60067011e361a36e0bce8d81