使用 ReactJS 应用程序和 webpack 设置 Airbrake-js
Setup Airbrake-js with a ReactJS app and webpack
我正在尝试将 Airbrake-js 集成到我的开发设置中以报告 JavaScript 错误。我的应用程序是一个使用 webpack 的 React 应用程序。
我已经在网上搜索了几个小时,以了解应该如何设置。我无法在他们的 documentation 中查明他们的起始代码:
var airbrakeJs = require('airbrake-js');
var airbrake = new airbrakeJs({projectId: 1, projectKey: 'abc'});
实际应该定位。我的想法是,我希望我现有的应用程序包含在它们的 wrap 函数中(为简洁起见,仅显示我的 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 应用程序一起使用吗?
非常感谢任何正确方向的帮助!
你应该用
实例化气刹
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);
});
我正在尝试将 Airbrake-js 集成到我的开发设置中以报告 JavaScript 错误。我的应用程序是一个使用 webpack 的 React 应用程序。
我已经在网上搜索了几个小时,以了解应该如何设置。我无法在他们的 documentation 中查明他们的起始代码:
var airbrakeJs = require('airbrake-js');
var airbrake = new airbrakeJs({projectId: 1, projectKey: 'abc'});
实际应该定位。我的想法是,我希望我现有的应用程序包含在它们的 wrap 函数中(为简洁起见,仅显示我的 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 应用程序一起使用吗?
非常感谢任何正确方向的帮助!
你应该用
实例化气刹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);
});