Improving Redux Saga Error Readability

When Redux-Saga encounters errors during execution, they are actually very hard to understand. The official documentation mentions this, and the solution is to introduce babel-plugin-redux-saga to improve readability.

Let’s get started

Plugin Installation

$ yarn add babel-plugin-redux-saga -D

Note

• Although the version number is already 1.1.2 complaining about the official's poor semver management, the official says this is still beta, so it’s not robust and has risks
• But since this only serves development debugging, I personally think the risk is not high

Webpack Configuration

loader: 'babel-loader',
    options: {
        plugins: [
            'babel-plugin-redux-saga'
        ]
    }

Note

babel-plugin-redux-saga must be introduced as a babel-loader plugin. If the project uses ts-loader, it won’t work. The solution is either to switch ts-loader to babel-loader, or directly add babel-loader.

Effect

Notice that the file names and line numbers of effects will be printed out

Reference Documentation

• https://redux-saga.js.org/docs/Troubleshooting.html