Logrocketで生産に記録するReduxロギング

Logrocket：WebアプリケーションDVR、Redux Applicationのデバッグを支援

Logrocketは、WebアプリケーションのDVRのような革新的な開発者ツールであり、Webサイトで発生するすべてのイベントを記録しています。 Reduxアクションとステータス、コンソールログ、JavaScriptエラー、スタックトレース、ネットワークリクエスト/応答、ブラウザメタデータ、カスタムログを記録し、最も複雑なシングルページアプリケーションのピクセルレベルの正確なビデオを再現します。

Webアプリケーションで問題を理解することは困難です。神秘的なJavaScriptエラーから、ユーザーが報告したバグからQAで見つかった問題まで、開発者はユーザーに影響を与える問題を解決するために一生懸命働いてきました。そして、これらは明らかな問題です。ほとんどのバグは、悪い経験に遭遇したユーザーが静かに去るか耐えるだけであるため、実際に報告されることはありません。

この問題を解決するために、開発者は、Reduxのような現代の州の管理図書館が豊かな監査跡を残すため、ますますフロントエンドのロギングツールを採用しています。生産環境でのアクションとステータスの記録により、バグやユーザーが報告した問題を簡単に理解できます。

この記事では、Logrocketを使用してReduxロギングをセットアップし、レッドックスアプリケーションをデバッグしやすくするテクニックについて説明します。

この記事はもともとlogrocket.comで公開され、著者の許可を得てここで再現されました。

logrocket：dvr for webアプリケーション

Logrockockeは、新しいタイプの開発者ツールです。これは、WebアプリケーションのDVRのようなもので、実際にWebサイトで発生するすべてを記録します。どんなフレームワークを使用しても、どのアプリケーションでも完全に機能し、React、Redux、Vue.JS、Angularの追加コンテキストを記録できるプラグインがあります。 Logrocketを使用すると、バグやユーザーの問題を含むセッションを再生して、問題が発生する理由を推測せずに根本原因をすばやく理解できます。

Reduxアクションとステータスのログに加えて、LoGrocketはコンソールログ、JavaScriptエラー、スタックトレース、ヘッダーとボディ、ブラウザーメタデータ、カスタムログを使用したネットワークリクエスト/応答を記録します。また、DOMを検出してページにHTMLとCSSを記録し、最も複雑なシングルページアプリケーションのピクセルレベルの正確なビデオを再現します。

logrocket

を設定します

ログロケットのセットアップは簡単です。アプリに数行のコードを追加するだけでいいです。

NPMを使用して

インストール：

。

https://app.logrocket.comで無料アカウントを作成し、アプリケーションIDに注意してください。
1. npm i --save logrocketアプリのLogrocketを初期化：
Reduxミドルウェアの追加：

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

4. これが基本的なセットアップです。Logrockockeの使用を開始するために必要なすべてを以下に示します。

Logrocketは、NGRXやVuexなどの他のフラックス実装のプラグインも提供しています。これについては、こちらについて読むことができます。

ユーザーセッションを再生します



Logrocketでのセッションをリプレイすることは、自分のブラウザでそれが起こっているのを見るようなものです。完全なアクションペイロードや前および次のステータスなど、Reduxアクションを確認できます。



Logrockockeはネットワークのリクエストと応答をキャプチャし、特定のリクエストを掘り下げてヘッダーとボディを表示することができます。ウォーターフォールチャートにはタイミングが表示され、どのリクエストが遅いか、潜在的な人種条件が発生したかどうかを簡単に確認できます。



時々、Reduxログだけでは、特にユーザーが報告された問題に対処する場合、バグを理解するには十分ではありません。 Logrocketのビデオ再生は、ユーザーがアプリで表示されるものを正確に確認できるようにすることで役立ちます。

このビデオは実際にはDOMの再構築であるため（実際のビデオではなく）、HTML/CSSを視覚的なバグを確認するか、2倍の速度で再生して、サポートを扱うときにユーザーがアプリでどのように行うかをすばやく理解できます。何が起こったのかを問題にします。

ワークフローにreduxログを統合します

ユーザーセッションを再生してReduxログを表示する機能は、開発ワークフロー全体で非常に役立ちます。

bug

を修正します



Logrocketは、SentryやBugsnagなどのバグレポートツールと統合され、各バグのReduxログとビデオを表示できます。これは、バグを修正するのに役立つだけでなく、いくつかのJavaScriptエラーがまったく無関係であるため、エラーの影響を理解するのにも役立ちます。エラーが発生したときにビデオを視聴することで、実際にユーザーに影響を与えるか、無視できるかどうかを簡単に判断できます。

サポート

ユーザーは多くの場合、問題を報告しますが、何が起こっているのかを正確に理解するのに十分なコンテキストを提供しません。

Intercomなどのチャットサポートツールを使用している場合、ユーザーがチャットを開始したときに録音されたURLにコメントを直接統合することができます。



より一般的な分析ツールと統合している場合は、以下に示すように追跡APIを使用して録音URLを追加できます。

import LogRocket from 'logrocket';
// 使用您的应用ID初始化LogRocket
LogRocket.init('<your_application_id>');

生産環境でのReduxロギングを最大限に活用
生産環境ロギングはすべてのReduxアプリケーションですぐに役立ちますが、ロギングを念頭に置いてアプリケーションを構築することにより、問題をデバッグするときにロギングが最も役立つことを確認できます。

州のほとんどをRedux

に保存してみてください

ここでは、地方の状態とredux状態の間の議論について議論したくありませんが、特定の状態部分がreduxであるべきかどうかを決定するとき、質問をデバッグするときにその状態を見るのに役立つかどうかを自問してください。答えが「はい」の場合は、その状態をReduxに入れて、クラッシュレポートやユーザーの問題とともに記録されるようにすることを検討してください。

reduxを使用してデータ収集ライブラリを使用します

Apollo-Client（GraphQL用）やRedux-Query（REST用）などのライブラリはすべて、ネットワークからReduxを介してフェッチするデータを容易にします。 Reduxを永続レイヤーとして使用します。つまり、問題をデバッグするときに、Reduxログをチェックして、これらのクライアントがどのデータを取得しているかを確認できます。
より単純なアプローチを好む場合は、ネットワークからデータをクエリして受信するときに明示的なアクションをスケジュールするだけで、独自のデータを作成して「フレームワーク」を取得できます。
reduxを使用して不確実性の原因を処理します
WebSocket、Local Storage、IndexEdDB、さらには日付（）などのAPIからのデータにアクセスする場合、結果を含むReduxアクションのスケジューリングを検討して、将来このデータを簡単にデバッグできるようにします。たとえば、WebSocketを聴くときは、各メッセージにReduxアクションをスケジュールしてください。これにより、Reduxログにデータが表示されます。
他のコンソールapisを使用します

Console.time（）、Console.count（）、Console.group（）などのコンソールメソッドを使用すると、Reactコンポーネントレンダリングカウント、トランザクションタイミング、コンポーネントライフサイクルログなど、ログにリッチデータを追加できます。

ソースマップをBuild and Upload logrocket

にアップロードします

Logrockockeは、CLI経由でアップロードできるソースマッピングをサポートしています。これを行うことで、JavaScriptエラー、Reduxアクション、コンソールログ、およびネットワークリクエストの象徴されたスタックトレースを確認できます。これにより、コードの特定のアクションがトリガーされる場所を確認できます。

結論

反応とreduxは、多くの場合、

保守可能なアプリケーションを構築するためのツールとして歓迎されます。生産環境でReduxデータを記録することは、バグやその他のユーザーが報告した問題をReduxステータス、ネットワークリクエスト、およびDOMをチェックすることで簡単にデバッグできるため、このような洞察を提供できます。

Logrocketを使用したReduxロギングは、バグの修正とサポートユーザーの作業を大幅に簡素化できます。ここでLogrocketの使用を開始できます。 Logrockockeを使用して、生産環境でのReduxロギングに関する FAQ（FAQ） reduxロギングのログロケットの主な機能は何ですか？

Logrocketは、開発者がWebアプリケーションでユーザーのインタラクションを追跡、記録、理解するのに役立つ強力なツールです。ネットワークリクエスト、コンソールログ、さらにはユーザーアクションなど、アプリケーションで何が起こっているかについての包括的なビューを提供します。これにより、開発者は問題の原因を正確に確認できるため、問題を識別して修正しやすくなります。 Logrockockeは、Reduxアプリケーションで特に役立ちます。これは、Reduxアクションと状態を記録できるため、イベントシーケンスを明確に表示できるためです。

ロググラケットは他のロギングツールとどう違うのですか？

ログロケットは、セッションのリプレイ機能で際立っています。この機能により、開発者は問題のあるセッションを再生し、ユーザーが表示するものを正確に表示できます。これは、バグの識別と修正において非常に貴重です。さらに、LogrocketはシームレスにReduxと統合され、Reduxアクションと状態を簡単に記録できます。

ログロケットをreduxアプリケーションと統合する方法は？

LogrocketとReduxアプリケーションの統合は非常に簡単です。 npmを介してLogrocketをインストールした後、アプリケーションのエントリファイルに初期化できます。その後、LoggrocketのReduxミドルウェアを使用して、Reduxアクションとステータスを記録できます。このミドルウェアは、Reduxストレージを作成するときに追加できます。

生産環境でLogrocketを使用できますか？

はい、Logrockockeは生産環境で使用するように設計されています。機密性の高いユーザーデータやパフォーマンスの最適化を保護するプライバシーコントロールや、アプリケーションが遅くならないようにするプライバシーコントロールなど、生産の使用に適したさまざまな機能があります。

どのような種類のデータが記録できますか？

Logrocketは、ネットワークリクエスト、コンソールログ、Reduxアクションとステータス、ユーザーインタラクションなど、さまざまなデータを記録できます。これにより、アプリケーションで何が起こっているかについての包括的な見解が提供され、問題を識別して修正しやすくなります。

Logrocketは敏感なユーザーデータをどのように処理しますか？

Logrocketには、機密のユーザーデータを保護できる強力なプライバシーコントロールがあります。これらのコントロールを構成して、特定のデータが記録されないようにすることができます。たとえば、ユーザーのパスワードを保護するために、フォーム入力のロギングを防ぐことができます。

他の州の管理ライブラリと一緒にLogrocketを使用できますか？

はい、LogrocketはシームレスにReduxを統合しますが、他の州の管理ライブラリとも使用することもできます。 MobxやVuexなど、いくつかの一般的なライブラリにミドルウェアを提供します。

ログラケットはどのようにデバッグに役立ちますか？

Logrocketのセッションリプレイ機能は、デバッグに非常に価値があります。問題のあるセッションを再生することにより、開発者はユーザーが表示するものを正確に表示し、バグを識別して修正しやすくすることができます。さらに、Loggrocketのネットワーク要求、コンソールログ、およびユーザーインタラクションの包括的なロギングは、デバッグ時に貴重なコンテキストを提供できます。

Logrocketで記録されたデータをカスタマイズできますか？

はい、LoGrocketは非常にカスタマイズ可能です。ログするデータを構成することもできます。また、アプリケーション内の特定のイベントまたは状態を追跡するためにカスタムログを追加することもできます。

ログロケットは大規模なアプリケーションに適していますか？

はい、LoGrocketは大規模なアプリケーションを処理するように設計されています。アプリケーションが減速されず、多くのログを処理できるようにするためのパフォーマンスの最適化があります。さらに、Logrocketの強力な検索およびフィルタリング機能により、大きなデータセットで関連するログを簡単に見つけることができます。

以上がLogrocketで生産に記録するReduxロギングの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。