All Projects → WebCloud → react-error-guard

WebCloud / react-error-guard

Licence: MIT license
⚛️An overlay for displaying stack frames based on create-react-app/packages/react-error-overlay

Programming Languages

javascript
184084 projects - #8 most used programming language

Projects that are alternatives of or similar to react-error-guard

bugsnag-java
Bugsnag error reporting for Java.
Stars: ✭ 51 (+183.33%)
Mutual labels:  error-monitoring, error-handling, error-reporting, exception-handling, exception-reporting
Bugsnag Js
Javascript error handling tool for Bugsnag. Monitor and report JavaScript bugs & errors.
Stars: ✭ 625 (+3372.22%)
Mutual labels:  error-monitoring, error-handling, error-reporting, exception-handling
Bugsnag Php
Bugsnag error monitoring and crash reporting tool for PHP apps
Stars: ✭ 475 (+2538.89%)
Mutual labels:  error-monitoring, error-handling, error-reporting, exception-handling
Bugsnag React Native
Error monitoring and reporting tool for native exceptions and JS errors in React Native apps
Stars: ✭ 374 (+1977.78%)
Mutual labels:  error-monitoring, error-handling, error-reporting, exception-handling
bugsnag-symfony
Bugsnag notifier for the Symfony PHP framework. Monitor and report errors in your Symfony apps.
Stars: ✭ 42 (+133.33%)
Mutual labels:  error-monitoring, error-reporting, exception-handling, exception-reporting
Emperror
The Emperor takes care of all errors personally
Stars: ✭ 201 (+1016.67%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Bugsnag Cocoa
Bugsnag crash reporting for iOS, macOS and tvOS apps
Stars: ✭ 167 (+827.78%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Bugsnag Ruby
Bugsnag error monitoring & reporting software for rails, sinatra, rack and ruby
Stars: ✭ 211 (+1072.22%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Bugsnag Android Ndk
DEPRECATED - this project now lives at bugsnag/bugsnag-android
Stars: ✭ 42 (+133.33%)
Mutual labels:  error-monitoring, error-handling, error-reporting
bugsnag-wordpress
Bugsnag error monitoring for WordPress sites
Stars: ✭ 20 (+11.11%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Bugsnag Laravel
Bugsnag notifier for the Laravel PHP framework. Monitor and report Laravel errors.
Stars: ✭ 746 (+4044.44%)
Mutual labels:  error-monitoring, error-handling, error-reporting
bugsnag-vue
[DEPRECATED] This package now lives within the monorepo for our Universal JS notifier "@bugsnag/js" • https://github.com/bugsnag/bugsnag-js
Stars: ✭ 26 (+44.44%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Exceptionless
Exceptionless server and jobs
Stars: ✭ 2,107 (+11605.56%)
Mutual labels:  error-monitoring, error-handling, error-reporting
TrackJS-Node
TrackJS Error Monitoring agent for NodeJS
Stars: ✭ 26 (+44.44%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Raygun4net
Raygun provider for .NET
Stars: ✭ 107 (+494.44%)
Mutual labels:  error-monitoring, error-handling, error-reporting
elmah.io
ELMAH error logger for sending errors to elmah.io.
Stars: ✭ 31 (+72.22%)
Mutual labels:  error-monitoring, error-handling, error-reporting
raygun4ruby
The Ruby & Ruby on Rails provider for Raygun
Stars: ✭ 37 (+105.56%)
Mutual labels:  error-monitoring, error-handling, error-reporting
raygun4android
Android crash reporting provider for Raygun
Stars: ✭ 19 (+5.56%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Bugsnag Node
[DEPRECATED] Please upgrade to our Universal JS notifier "@bugsnag/js" • https://github.com/bugsnag/bugsnag-js
Stars: ✭ 48 (+166.67%)
Mutual labels:  error-monitoring, error-handling, error-reporting
Bugsnag Go
Automatic panic monitoring for Go and Go web frameworks, like negroni, gin, and revel
Stars: ✭ 155 (+761.11%)
Mutual labels:  error-monitoring, error-handling, error-reporting

⚛️ React Error Guard Component ⚛️

Setup your consuming project

Firs install the package with yarn add react-error-guard (or npm i --save). Then you can consume the component like bellow.

const MyReactContainer = ({ children }) => {
  let ErrorBoundaryContainer = null;

  if (process.env.NODE_ENV !== 'production') {
    ErrorBoundaryContainer = require('react-error-guard').DeveloperErrorBoundary;
  } else {
    ErrorBoundaryContainer = require('react-error-guard').ProductionErrorBoundary;
  }

  return <ErrorBoundaryContainer>{children}</ErrorBoundaryContainer>;
}

ℹ️ Notice: This component right now is only compatible with React 16. But there are plans to support React 15 but much more limited version, unstable_handleError.

<DeveloperErrorBoundary />

It is meant to be used as a drop-in helper on development environments. It is a declarative component, abstracted from the react-error-overlay. The error screen from the development server from create-react-app.

DeveloperErrorBoundary preview

DeveloperErrorBoundary example

<ProductionErrorBoundary />

It is meant to be used on production environments, as a helper to provide a fallback error screen and also automated reports to your preferred tool via the dispatchErrorReporting prop.

Customizing <ProductionErrorBoundary />

ProductionErrorBoundary is highly customisable through its props.

Default ProductionErrorBoundary preview (with no dispatchErrorReporting provided)

<ProductionErrorBoundary>
  {children}
</ProductionErrorBoundary>

The code above will produce the following default error message component render:

no dispatchErrorReporting preview

Default ProductionErrorBoundary preview (with dispatchErrorReporting provided)

<ProductionErrorBoundary dispatchErrorReporting={dispatchErrorReporting}>
  {children}
</ProductionErrorBoundary>

The code above will produce the following default error message component render:

no dispatchErrorReporting preview

You can even replace the default error message by passing errorMessageComponent prop.

const ErrorMessageComponent = (
  <div className="error-message">
    <h1>🚨 Whoopsie, we crashed 🚨</h1>
    <p>Don't worry, an automated error report has been sent to our team of cats to handle this.</p>
  </div>
);

const IconClose = <span></span>;

const dispatchErrorReporting = ({ error, info }) => {
  Raven.captureException(error, {
    extra: {
      ...info, reactVersion: React.version
    },
    tags: { version, reactVersion: React.version }
  });
}

const MyReactContainer = ({ children }) => (
  <ProductionErrorBoundary
    errorMessageComponent={ErrorMessageComponent}
    closeIcon={<IconClose />}
    dispatchErrorReporting={dispatchErrorReporting}
  >
    {children}
  </ProductionErrorBoundary>
)

▶️ The example above uses raven-js but any reporting tool can be used.

🌟 This project started, and still is, an abstraction taken from the amazing works of the create-react-app team.

Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].