Airbrake-jsをReactJSアプリとwebpackでセットアップする

Question

JavaScriptエラーを報告するために、Airbrake-jsを私のdev setupに統合しようとしています。私のアプリはwebpackを使ったReactアプリです。

セットアップの仕方を理解するために、私は数時間ウェブを精練しています。

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

が実際に配置する必要があります。私は彼らのdocumentationその出発コードはどこにピンポイントすることができていません。私の考えは、私は私の既存のアプリは自分のラップ機能に包まれたいということである（簡潔にするために私のapp.jsファイルの一部のみを示す）：だから、私は私のエントリポイントにこれを追加

​​

すること（ここで、ファイルをapp.js私もルータのロジックを扱っていますが、そこには呼び出されていないので、何か間違っている必要があります。私はまた、正確に2番目の行（最初のコメントのすぐ下）が何をしているのか正確には分かりません。

誰でもエアブレーキの設定を説明し、手助けすることはできますか？ 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コードから削除することができます。

これは、Airbrakeを特定の機能の周りにラップするためのものです。

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