Installing Airbrake in a Redux application

Features

  • Easy and flexible installation options including NPM, Bower and a public CDN
  • Send uncaught errors to Airbrake or manually using a try/catch
  • Add custom parameters to your errors for more context
  • Private sourcemap support
  • Control which errors you send with customizable filtering options

Installation

npm install airbrake-js redux-airbrake --save

Configuration

After you have installed the airbrake-js notifier and the redux-airbrake middleware, the remaining steps are to import the dependencies and configure the middleware.

Import dependencies

import AirbrakeClient from 'airbrake-js';
import airbrakeMiddleware from 'redux-airbrake';

Configure the AirbrakeClient and middleware

const airbrake = new AirbrakeClient({
    projectId: '******',         // replace with actual project id
    projectKey: '**************' // replace with actual project api key
});

const errorMiddleware = airbrakeMiddleware(airbrake);

export const store = createStore(
    rootReducer,
    applyMiddleware(
        errorMiddleware
    )
);

export default store;

The redux-airbrake middleware also supports additional options like sending last action & state to Airbrake and Adding extra details to errors before they are sent.

Going Further

Installation and configuration is just the beginning. The airbrake-js notifier supports many other advanced uses and options including:

Please visit the airbrake-js GitHub repo for more usage and configuration examples.