使用ReactJS应用程序和webpack设置Airbrake-js

Question

我正在尝试将Airbrake-js集成到我的开发设置中，以报告JavaScript错误。我的应用是一个使用了webpack的React应用。

我已经在网上搜索了几个小时，想弄清楚设置应该是怎样的。我还没能在他们的documentation中指出他们的起始代码在哪里：

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