Flare Error tracking made for Laravel
Features Pricing Docs Log in Start free trial
  • Docs
  • Videos

Documentation

  • General

    • Welcome
    • Projects
    • Errors
    • Error occurrences
    • Sharing error occurrences
    • Spike protection
  • Ignition for Laravel

    • Installation
    • Configuration
    • Controlling collected data
    • Sending logs to Flare
    • Sharing errors
    • Identifying users
    • Adding custom context
    • Adding glows
    • Writing custom middleware
    • Adding custom tabs
    • First party extensions
    • Third party extensions
  • Flare for generic PHP projects

    • Installation
    • Controlling collected data
    • Identifying users
    • Adding custom context
    • Adding glows
    • Writing custom middleware
  • Javascript error tracking

    • Installation
    • Framework integrations
    • Adding custom context
    • Adding glows
    • Solution Providers
    • Resolving Bundled Code
  • Solutions

    • Introduction
    • Adding custom solutions
    • Making solutions runnable
    • Using solution providers
    • Writing good solutions
  • Notifications

    • Configuring notifications
    • Mail
    • Slack
    • SMS
    • Webhooks
  • Team management

    • Using multiple teams
    • Subscribing to a plan
    • Receiving invoices
    • Managing team members
    • Inviting guests to projects

Framework Integrations

If a framework you use is not yet supported, feel free to let us know, or write a custom integration for it yourself (we'll retweet you).

React ^16.0.0

Yarn

yarn add @flareapp/flare-react

NPM

npm install @flareapp/flare-react

React's error handling works similarly to how it works in vanilla JavaScript. You can wrap parts of your component tree in error boundary components, which can stop the error from bubbling further up the tree and crashing your entire application.

In your app's root file (/src/App.js for creact-react-app), wrap your entire component tree in the provided FlareErrorBoundary component:

import { FlareErrorBoundary } from '@flareapp/flare-react';

render(
    <FlareErrorBoundary>
        <Root />
    </FlareErrorBoundary>,
    document.getElementById('app')
)

Note: If you bundle React for development, you will see that many errors are reported twice. This is expected behaviour and will not occur in a production bundle (read more: https://github.com/facebook/react/issues/10474).

You should use a combination of Flare's and your own error boundaries, continue reading to find out how to report errors to Flare in your own error boundary components.

Reporting React errors in your own error boundaries

If you have your own error boundary components, e.g. for displaying a fallback component when something goes wrong, the error won't bubble up to Flare's error boundary and the error won't be reported to the Flare app automatically.

If you still want to know about these errors, you can do this pretty easily:

import { reportReactError } from "@flareapp/flare-react";

export default class ErrorBoundary extends React.Component {
    componentDidCatch(error, info) {
        reportReactError(error, info);
    }
}

Vue ^2.0.0

Yarn

yarn add @flareapp/flare-vue

NPM

npm install @flareapp/flare-vue

Vue uses a global error handler that we can easily plug into. Simply register the extension as a Vue plugin, in the same place where you created your Vue instance:

import { flareVue } from "@flareapp/flare-vue";
import Vue from 'vue';

Vue.use(flareVue);

const app = new Vue({ el: "#app" });
Previous topic Next topic

On this page

  • React ^16.0.0
  • Reporting React errors in your own error boundaries
  • Vue ^2.0.0

About Flare

  • Home
  • Features
  • Pricing
  • Support

Resources

  • Blog
  • Docs
  • Ignition
  • Videos

App

  • Log in
  • Start free trial
SPATIE
  • Service status
  • Terms of use
  • Privacy & cookie policy