Настройте Airbrake-js с помощью приложения ReactJS и веб-пакета

Question

Я пытаюсь интегрировать Airbrake-js в мои настройки dev, чтобы сообщать об ошибках JavaScript. Мое приложение представляет собой приложение React, которое использует веб-пакет.

Я искал в Интернете пару часов, чтобы выяснить, как должна быть настроена система. Я не смог указать в их документации, где их стартовый код:

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

на самом деле должны быть расположены. Я думаю, что я хочу, чтобы мое существующее приложение было обернуто в их функцию переноса (для краткости показываю только часть моего файла app.js):

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'));

Итак, я добавил это в свой файл точки входа app.js (где я также обрабатываю свою логику маршрутизатора), но он там не вызывается, поэтому я должен что-то делать не так. Я также точно не знаю, что именно делает вторая строка (прямо под первым комментарием).

Кто-нибудь может объяснить и помочь правильно настроить Airbrake? Airbrake-js вообще собирается работать с приложением React?

Любая помощь в правильном направлении очень ценится!

Answer 1

Вы должны создать воздушный тормоз с

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

поэтому сначала вы можете попробовать просто добавить это в существующий код. Обратите внимание, что мы используем window глобальная область для доступа к экземпляру Airbrake из любой дочерней области. Обычно это не очень хорошая практика, но выглядит достаточно справедливо для целей Airbreake.

Эта линия

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

это просто пример, используемый в документации, что-то, что может вызвать ошибку. Вы можете удалить его из своего кода.

Это должно обернуть Airbrake вокруг определенных функций.

startApp = airbrake.wrap(myApp);

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

Вы можете удалить его из своего кода.

Вы можете использовать это для отладки, если Airbrake на самом деле ловит ошибки:

// Remove it for production or use an enviroment conditional

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