Setup Airbrake-js with a ReactJS app and webpack

I'm trying to integrate Airbrake-js into my dev setup to report on JavaScript errors. My app is a React app that uses webpack.

I've been scouring the web for a couple of hours now to figure out how the setup should be. I haven't been able to pinpoint in their documentation where their starting code:

var airbrakeJs = require('airbrake-js');
var airbrake = new airbrakeJs({projectId: 1, projectKey: 'abc'});

should actually be positioned. My thinking is that I want my existing app wrapped in their wrap function (showing only part of my app.js file for brevity):

var airbrakeJs = require('airbrake-js'),
    React  = require('react'),
    ReactDOM = require('react-dom'),
    Relay = require('react-relay'),
    App = require('./components/app'),
    Router = require ('react-router'),
    Route = require Router.Route, 
    createBrowserHistory = require('history/lib/createBrowserHistory');

var startApp = function() {
  // This will throw if the document has no head tag.
  // ****What does this exactly do?**** 
  document.head.insertBefore(document.createElement("style"));
}
startApp = airbrake.wrap(myApp);

// Any exceptions thrown in startApp will be reported to Airbrake.
startApp();

ReactDOM.render((
  <Router history={createBrowserHistory()} createElement={ReactRouterRelay.createElement}>
    <Route component={App} queries={AppQueries} {...renderProps}>
      <Route path="/somewhere" component={Somewhere} queries={SomewhereQueries} />
    </Route>
  </Router>
), document.getElementById('academy-body'));

So, I added this to my entry point app.js file (where I also handle my Router logic) but it is not being called there, so I must be doing something wrong. I also don't exactly know what the second line (right below the first comment) exactly does.

Can anyone explain and help get Airbrake properly setup? Is Airbrake-js even going to work with a React app?

Any help in the right direction is very appreciated!

Solution

You should instantiate airbrake with

window.airbrake = new airbrakeJs({projectId: 1, projectKey: 'abc'});
// replace projectId and projectKey with your project values

so first you may try just adding that to your existing code. Note that we are using window global scope to access Airbrake's instance from any child scope. Usually this is not a good practice but looks fair enough for Airbreake's purposes.

This line

 document.head.insertBefore(document.createElement("style"));

it is just an example, used at the documentation, of something that may throw an error. You can remove it from yout code.

This is to wrap Airbrake around specific functions.

startApp = airbrake.wrap(myApp);

// Any exceptions thrown in startApp will be reported to Airbrake.
startApp();

You can remove it from your code.

You can use this to debug if Airbrake is actually catching errors:

// Remove it for production or use an enviroment conditional

airbrake.addReporter(function(notice) {
  console.log(notice);
});