michalkvasnicak/react-error-reporter

Simple error reporting using React components.

react-error-reporter

Simple error reporting using React components.

npm install --save react-error-reporter

Example

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

<ErrorReporter captureException={(error, ...args) => console.error(error, ...args)}>
  <CaptureException error={new Error('Test Error')} extra={[{ contextToError: true }]} />
</ErrorReporter>

Advanced Example

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

<ErrorReporter captureException={console.error}>
  <GraphQL queries={{ projects: ... }} render={(queries) => {
    if (queries.projects.error) {
      return <CaptureException error={queries.projects.error} />;
    }

    if (queries.projects.loading) {
      return <Loading />;
    }

    return queries.projects.data.projects.map(
      project => <div key={project.id}>{project.title}</div>
    );
  }} />
</ErrorReporter>

API

<ErrorReporter />

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

type Props = {
  captureException(error: Error, ...args: any): void,
}

<CaptureException />

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.

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<any>,
}