babel-plugin-component-did-catch-source

babel-plugin-component-did-catch-source

Add fiber source to componentDidCatch info argument.

Installation

npm install --save-dev babel-plugin-component-did-catch-source

The Problem

Need access to the source fiber but react's componentDidCatch does not provide it. Maintaining a fork of React is not as flexible as a compile time change.

Example

Before

class ErrorBoundary extends Component {
  componentDidCatch(error, { componentStack }) {
    errorLogger(componentStack)
  }
}

After

class ErrorBoundary extends Component {
  componentDidCatch(error, { componentStack, source }) {
    const { props, state } = source.stateNode

    errorLogger(componentStack, props, state)
  }
}

Usage

Via .babelrc.js (Recommended)

.babelrc

{
  "env": {
    "production": {
      "plugins": ["component-did-catch-source"]
    }
  }
}

Via CLI

babel --plugins component-did-catch-source script.js

Via Node

require('babel-core').transform('code', {
  plugins: [
    'component-did-catch-source',
  ],
});

Options

None yet

Notes

This plugin will likely only work with v16 of React.

License

MIT