https://github.com/michalkvasnicak/react-error-reporter

Simple error reporting using React components.
https://github.com/michalkvasnicak/react-error-reporter

components error-handling react react-native sentry

Last synced: 11 months ago
JSON representation

Simple error reporting using React components.

• Host: GitHub
• URL: https://github.com/michalkvasnicak/react-error-reporter
• Owner: michalkvasnicak
• License: mit
• Created: 2017-06-05T09:08:27.000Z (about 9 years ago)
• Default Branch: master
• Last Pushed: 2017-08-25T12:28:03.000Z (almost 9 years ago)
• Last Synced: 2025-07-06T07:04:19.258Z (about 1 year ago)
• Topics: components, error-handling, react, react-native, sentry
• Language: JavaScript
• Homepage:
• Size: 94.7 KB
• Stars: 5
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

README

          
# react-error-reporter

[![npm](https://img.shields.io/npm/v/react-error-reporter.svg)](https://www.npmjs.com/package/react-error-reporter)

[![CircleCI](https://circleci.com/gh/michalkvasnicak/react-error-reporter.svg?style=svg)](https://circleci.com/gh/michalkvasnicak/react-error-reporter)

![gzip size](http://img.badgesize.io/https://unpkg.com/react-error-reporter/dist/react-error-reporter.min.js?compression=gzip&label=gzip%20size)

![size](http://img.badgesize.io/https://unpkg.com/react-error-reporter/dist/react-error-reporter.min.js?label=size)

![module formats: umd, cjs, esm](https://img.shields.io/badge/module%20formats-umd%2C%20cjs%2C%20esm-green.svg)

Simple error reporting using React components.

`npm install --save react-error-reporter`

## Example

```js

import ErrorReporter, { CaptureException } from 'react-error-reporter';

 console.error(error, ...args)}>

  

```

## Advanced Example

```js

import GraphQL from 'react-apollo-graphql';

import ErrorReporter, { CaptureException } from 'react-error-reporter';

   {

    if (queries.projects.error) {

      return ;

    }

    if (queries.projects.loading) {

      return ;

    }

    return queries.projects.data.projects.map(

      project => 
{project.title}

    );

  }} />


```

## API

### ``

Provides `captureException` to the `context`. Your app must be wrapped using this component.

```js

type Props = {

  captureException(error: Error, ...args: any): void,

}

```

### ``

Captures exception, passing `error` and `extra` to `captureException` handler. This components renders `null`.

Captures exception on `componentWillMount()` if the `error` prop is set and `componentDidUpdate()` if the `error` props has changed and is set.

```js

type Props = {

  // optional error

  // will be passed to captureException() as the first argument.

  error: ?Error,

  // passes extra data to captureException()

  // each item in array is passed to captureException(error, item0, item1) as respective argument after the error

  // for example extra={[{ test: 1 }, { test: 2 }]}

  // will call captureException(error, { test: 1 }, { test: 2 })

  extra: ?Array,

}

```