Redux-Raven-Middleware 使用教程

Redux-Raven-Middleware 使用教程

redux-raven-middleware:bird: Redux middleware for sending error reports to Sentry through raven-js.项目地址:https://gitcode.com/gh_mirrors/re/redux-raven-middleware

1. 项目的目录结构及介绍

redux-raven-middleware/
├── LICENSE
├── README.md
├── dist/
│   ├── index.js
│   └── index.js.map
├── package.json
├── src/
│   └── index.js
└── webpack.config.js

• LICENSE: 项目的许可证文件。
• README.md: 项目的说明文档。
• dist/: 编译后的文件目录，包含 index.js 和其源映射文件 index.js.map。
• package.json: 项目的依赖和脚本配置文件。
• src/: 源代码目录，包含项目的核心逻辑文件 index.js。
• webpack.config.js: Webpack 的配置文件，用于项目的构建。

2. 项目的启动文件介绍

项目的启动文件位于 src/index.js，这是 Redux-Raven-Middleware 的核心逻辑文件。该文件导出了一个 Redux 中间件，用于在 Redux 应用中集成 Sentry 的错误报告功能。

import Raven from 'raven-js';

const ravenMiddleware = (options = {}) => store => next => action => {
  try {
    return next(action);
  } catch (err) {
    Raven.captureException(err, {
      extra: {
        action,
        state: store.getState()
      }
    });
    throw err;
  }
};

export default ravenMiddleware;

3. 项目的配置文件介绍

package.json

package.json 文件包含了项目的依赖、脚本和其他元数据。以下是关键部分：

{
  "name": "redux-raven-middleware",
  "version": "1.0.0",
  "description": "Redux middleware for sending error reports to Sentry through Raven",
  "main": "dist/index.js",
  "scripts": {
    "build": "webpack",
    "prepublish": "npm run build"
  },
  "dependencies": {
    "raven-js": "^3.27.2"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0"
  }
}

• name: 项目名称。
• version: 项目版本。
• description: 项目描述。
• main: 项目的主入口文件。
• scripts: 包含构建和发布前的脚本。
• dependencies: 项目运行时的依赖。
• devDependencies: 开发时的依赖。

webpack.config.js

webpack.config.js 文件用于配置 Webpack 的构建过程。以下是关键部分：

const path = require('path');

module.exports = {
  entry: './src/index.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'index.js',
    libraryTarget: 'umd'
  },
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader',
          options: {
            presets: ['env']
          }
        }
      }
    ]
  }
};

• entry: 入口文件路径。
• output: 输出文件的配置，包括路径和文件名。
• module: 模块的加载规则，使用 Babel 加载器处理 JavaScript 文件。

redux-raven-middleware:bird: Redux middleware for sending error reports to Sentry through raven-js.项目地址:https://gitcode.com/gh_mirrors/re/redux-raven-middleware