Airbrake-js mit einer ReactJS App und einem Webpack einrichten

Question

Ich versuche Airbrake-js in mein Dev-Setup zu integrieren, um über JavaScript-Fehler zu berichten. Meine App ist eine React-App, die Webpack verwendet.

Ich habe das Web für ein paar Stunden durchforstet, um herauszufinden, wie das Setup sein sollte. Ich habe nicht in der Lage gewesen, in ihren documentation wo ihr Startcode zu lokalisieren:

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

soll eigentlich positioniert werden. Mein Denken ist, dass ich meine bestehende App auf ihrer Wrap-Funktion eingewickelt werden soll (zeigt nur einen Teil meiner app.js Datei der Kürze halber):

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

Also, ich dies zu meinem Einstiegspunkt hinzugefügt app.js Datei (wobei Ich verarbeite auch meine Routerlogik, aber es wird dort nicht angerufen, also muss ich etwas falsch machen. Ich weiß auch nicht genau, was die zweite Zeile (genau unter dem ersten Kommentar) genau macht.

Kann jemand erklären und helfen, Airbrake richtig einzurichten? Wird Airbrake-js sogar mit einer React App arbeiten?

Jede Hilfe in die richtige Richtung wird sehr geschätzt!

Answer 1

Sie sollten airbrake mit

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

instanziiert so Zunächst einmal sollten Sie versuchen Sie nur, dass zu Ihren vorhandenen Code. Beachten Sie, dass wir den globalen Bereich window verwenden, um von jedem untergeordneten Bereich auf die Airbrake-Instanz zuzugreifen. Normalerweise ist das keine gute Übung, sieht aber für Airbreakes Zwecke fair aus.

Diese Linie

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

es ist nur ein Beispiel, bei der Dokumentation verwendet, von etwas, das einen Fehler melden kann. Sie können es aus dem Yout-Code entfernen.

Dies dient dazu, die Airbrake um bestimmte Funktionen zu wickeln.

startApp = airbrake.wrap(myApp); 

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

Sie können es aus Ihrem Code entfernen.

können Sie diese verwenden, um zu debuggen, wenn Airbrake tatsächlich fangen Fehler:

// Remove it for production or use an enviroment conditional 

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