https://github.com/dmitrymalakhov/react-bullet-holes

Awesome ErrorBoundary. Show errors of React components where they occurred.
https://github.com/dmitrymalakhov/react-bullet-holes

devtools react styledcomponents

Last synced: about 1 month ago
JSON representation

Awesome ErrorBoundary. Show errors of React components where they occurred.

• Host: GitHub
• URL: https://github.com/dmitrymalakhov/react-bullet-holes
• Owner: dmitrymalakhov
• License: mit
• Created: 2017-09-29T20:42:44.000Z (about 7 years ago)
• Default Branch: master
• Last Pushed: 2017-10-01T20:34:47.000Z (about 7 years ago)
• Last Synced: 2024-10-18T18:47:35.490Z (2 months ago)
• Topics: devtools, react, styledcomponents
• Language: JavaScript
• Homepage:
• Size: 9.69 MB
• Stars: 1
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# react-bullet-holes

Awesome ErrorBoundary. Show errors of React components where they occurred. Based on componentDidCatch from React 16.

![react-bullet-holes](docs/demo.gif)

### Install

```bash

yarn add -D react-bullet-holes

```

or

```bash

npm install --save-dev react-bullet-holes

```

### Usage

```javascript

import React from 'react';

import ErrorBoundary from 'react-bullet-holes';

/../

render() {

  return (

    


      

        

      

    

  );

}


```

## Props

#### onError: func(error: { message: string, stack: string }, info: { componentStack: string })

This callback is called when throwing error in wrapped component.

## Tips & Tricks

For more detailed trace you can add [babel-plugin-transform-react-jsx-source](https://babeljs.io/docs/plugins/transform-react-jsx-source/)

![extended trace](docs/extended-trace.png)

After that in trace will be displayed exactly source file and line where error occurred.