Airbrake-js에 ReactJS 앱과 webpack을 설치하십시오.

Question

Airbrake-js을 내 dev 설치 프로그램에 통합하여 JavaScript 오류를보고하려고합니다. 내 응용 프로그램은 webpack을 사용하는 React 응용 프로그램입니다.

저는 설치가 어떻게되어야하는지 알아 내기 위해 몇 시간 동안 웹을 수색했습니다.

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

실제로 위치해야합니다 : 나는 그들의 documentation 자신의 시작 코드는 어디에서 찾아 낼 수 없었다. 내 생각이 내 기존 응용 프로그램은 자신의 랩 기능에 싸여 할 것입니다 (간결 내 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 

과 에어 브레이크를 인스턴스화해야합니다. 모든 범위에서 Airbrake의 인스턴스에 액세스하려면 window 전역 범위를 사용합니다. 보통 이것은 좋은 습관이 아니지만 Airbreake의 목적에 충분히 적합합니다.

이 줄

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

이 오류가 발생 할 수 있습니다 뭔가, 문서에 사용 된 단지 예이다. Yout 코드에서 제거 할 수 있습니다.

에어 브레이크를 특정 기능으로 감싸는 것입니다.

startApp = airbrake.wrap(myApp); 

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

코드에서 제거 할 수 있습니다.

당신은 에어 브레이크가 실제로 잡는 경우 오류를 디버깅하기 위해 이것을 사용할 수 있습니다 :

// Remove it for production or use an enviroment conditional 

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