あなたの反応アプリをやっているとどのように我々はそれを監視するのですか?🤔

私が多くのプロジェクトで早めに行われた何かに相談していたとき、いくつかの監視/ログインプラットホームを統合することでした.これは、IOがどのくらい時間がかかるか、アプリケーション内でデータフローをトレースしたり、期待されて予期しないエラーを処理するなどの一般的なシナリオを洞察するのを助けるために使用されます.これらのすべてはAPIエンドポイントに焼かれて、一般にちょうどスムーズに走りました.
しかし、それは常に優先順位を付けられなかった1つの場所、ブラウザです.時々、Google Analyticsは統合されるでしょう(あるいは、あなたが若干の本当の楽しみが欲しかったならば)、しかし、それが公共のウェブサイト/マーケティングサイトであったならば、それはより多くでした、そして、本当に本当のモニタリングでなく、交通源に集中しました.
今日、私はどのように我々の監視ソリューションを設定することができます見てみたかったReact 使用Azure AppInsights .

AppInsightとは

AppInsights (長い形式でのアプリケーションの洞察)はAzure Monitor プラットフォームとは、Webから携帯電話へのアプリケーションで使用できるパフォーマンス監視プラットフォームです.
私はここでのすべての機能をカバーしない一方、Webアプリケーション(スパまたはそれ以外の場合)を持っている最も興味深い機能は、ページビュー、エラー(処理と未処理)とAjaxの呼び出し(XML HTTPのリクエストとフェッチ)などの情報を取得しています.この両方のクライアントとサーバーを組み合わせることで、サイト上のユーザーの相互作用を完全に表示することができます.

始める

このデモのためにGatsby e-commerce starter kit そして、あなたは完成したデモを見つけるでしょうon my GitHub .
私は、それを使うために、それを広げましたJavaScript SDK for AppInsights どれだけがあるかReact extension .

appInsightの設定

まず最初に、我々は我々が使用することができますAppInsightインスタンスを持っている必要がありますし、それを行う必要がありますcreate a resource in Azure (もしあなたが既にAzureアカウントを持っていないならsign up for a free trial ) をコピーし、instrumentation key .
インストゥルメントキーを作成すると.env.development gatsbyが探す環境変数を設定するファイル

APPINSIGHTS_KEY=<instrumentation key here>

ここでAppInsightをアプリケーションに組み込む準備が整いました.そして、インストゥルメントを設定するサービスを作成します.

// AppInsights.js
import { ApplicationInsights } from '@microsoft/applicationinsights-web'
import { ReactPlugin, withAITracking } from '@microsoft/applicationinsights-react-js'
import { globalHistory } from "@reach/router"

const reactPlugin = new ReactPlugin();
const ai = new ApplicationInsights({
    config: {
        instrumentationKey: process.env.APPINSIGHTS_KEY,
        extensions: [reactPlugin],
        extensionConfig: {
            [reactPlugin.identifier]: { history: globalHistory }
        }
    }
})
ai.loadAppInsights()

export default (Component) => withAITracking(reactPlugin, Component)
export const appInsights = ai.appInsights

このファイルは2つのものに対して責任があります.最初に提供されているキーを使用してAppInsight接続を設定しますenvironment variable 2つ目のジョブは、それぞれの環境で異なるものを使うことができるようにするためにHigher Order Component (HOC) これは、我々のAppInsightインスタンスをReactive Extensions(これは単に便利なアプローチです)によって提供されるように提供します.
ここでの反応拡張のドキュメントからの主な違いはhistory インフォメーション.ギャツビー用途 @reach/router ない react-router , それで、我々は歴史オブジェクトを作成しません、我々はルータが我々のために定めるものを使いますglobalHistory から@reach/router パッケージ).

ページのトラッキング

AppInsight今我々のアプリケーションで利用可能なので、我々はページの訪問と任意の未処理のエラーを追跡することができますすべてのページにそれを有効にすることから始めましょう.我々がこれをする最高の場所は、我々がアクセスする最も高い構成要素の上にあります<App /> DOMに入るコンポーネント.Gatsbyでは、そのコンポーネントへのアクセスはありません.代わりにpages ディレクトリが、このテンプレートを使用してcomponents/Layout 年以降のページではなく<Layout /> すべてのページで一番上のコンポーネントが使用されます.
以下のようにコンポーネントをラップします.

import React from 'react'
import Headroom from 'react-headroom'
import { Container } from 'semantic-ui-react'
import Footer from '../Footer'
import Header from '../Header'
import withAppInsights from '../../AppInsights';
import 'semantic-ui-css/semantic.min.css'

const Layout = ({ location, children }) => (
  <>
    <Headroom
      upTolerance={10}
      downTolerance={10}
      style={{ zIndex: '20', height: '6.5em' }}
    >
      <Header location={location} />
    </Headroom>
    <Container text>{children}</Container>
    <Footer />
  </>
)

export default withAppInsights(Layout)

あなたの周りのナビゲーションを開始し、開発者ツールのネットワークタブを調べる場合は、AppInsightに行われている要求を参照してください!

上記のスクリーンショットでは、出力ペイロードにいくつかのオブジェクトを持っていますconfigurable ), つは、以前のページのメトリクス情報です.
ページ全体をラップする必要がないことに注意してください.反応拡張によって提供されたHOWTOはあなたのコンポーネントを<div> そして、「イベントが相互に作用したとき」のイベントを追跡することができるように、イベント・ハンドルをユーザー・インタラクション・イベント(クリック、マウス・ムーブメントとタッチ)に付けてください.Hostがアンマウントされているとき、コンポーネントがどのように相互に作用したかについて、AppInsightにメトリクスを送ります.ここでは、ページビューとコンポーネントの相互作用を一つの例に組み合わせる.
今、私たちは、ユーザーがどれくらいのページをページに費やし、どのページが訪れたかを追跡し始めています.

特定のユーザの相互作用の監視

あなたがサイトのユーザーふるまいを理解しようとしていると言いましょう、そして、あなたは特定の行動について知りたいです.これを行うには trackEvent カスタムメトリックトラッキング:

const handleSubmit = async () => {
    appInsights.trackEvent({ name: 'Add To Cart', properties: { productId } })
    // snip
  }

ここで我々はappInsights AppInsightインスタンスを設定し、いくつかのデータを通過する場所からエクスポートするオブジェクトですtrackEvent , 我々が追跡しているイベントの名前(Azureポータルでフィルタリングすることができます)、そして、我々がイベントに含めたいどんなカスタム・プロパティでも.ここで我々は通過しているproductId , それで、特定の製品がカートにどれくらい頻繁に加えられるかを決定することができました、しかし、あなたは理解して、イベントに文脈を提供するのに役に立つどんな情報も加えることができました.

監視失敗

アプリケーションはバグを持っています、それは生命の事実です、しかし、我々はそれらの失敗が起こるとき、知りたいです.これらがJavaScriptで起こるとき、それはしばしば捕らえられません、彼らがユーザーに完全に静かであるかもしれません、そして、彼らがページを再ロードするまで、相互作用の結果は失敗します.AppInsight JavaScript SDKは、トリガされていない例外処理をキャプチャしますwindow.onerror とthis PR is merged しかし、しかし、我々が扱うことができる誤りについてはどうですか?多分、ネットワーク要求が失敗して、ユーザにメッセージを見せたので、クライアントとサーバのメトリクスを関連付けることができるように、そのイベントを試してみたいと思うかもしれません.
これを行うには trackException メソッド:

const handleSubmit = async () => {
    appInsights.trackEvent({ name: 'Add To Cart', properties: { productId } })

    const cartId = await localStorage.getItem('mcart')

    const error = validate(quantity)
    setError(error)
    if (!error) {
      setLoading(true)
      Moltin.addToCart(cartId, productId, quantity)
        .then(() => {
          addToCart(quantity, cartId)
          setLoading(false)
          setQuantity(quantity)
          setVisible(true)
          toggleMessage()
        })
        .catch(err => {
          setError(`Error: ${err.errors[0].detail}` || 'Something went wrong')
          setLoading(false)
          appInsights.trackException({ error: new Error(err), severityLevel: SeverityLevel.Error })
        })
    }
  }

約束の果てにcatch 電話しているtrackException とエラー情報とseverityLevel のためにError . The severityLevel AzureがAppInsightで定義されている警告規則をトリガーするのに使用できるように制御するのは重要です.

Azureにおけるメトリクスの表示

我々がサイトのまわりを進むとき、我々がメトリクスを生成し始めている今、Azureポータルに頭を任せましょうLog (Analytics) 監視部の下で.
これは、あなたのアプリケーションからキャプチャされているAppInsightデータに対してクエリを作成することができますし、合理的にピックアップを容易にする場所ですquery language . ページビューを表示する簡単なクエリを開始します.

pageViews
| limit 50

これはpageViews テーブルとパイプを使用します| ) コマンドを示す文字、この場合、実行中のコマンドlimit 値のコマンド50 , これはクエリで返される結果の数を50に制限します.

スクリーンショットは、返された結果を示します.そこでは、私が移動したページの束が見えます.
我々のカスタムイベントを見ましょう.

customEvents
| where name == "Add To Cart" 
| limit 50

このクエリのためにcustomEvents テーブルが定義済みのメトリック型ではなく、where フィルターをかけるname に制限するAdd To Cart .

そこに3つの追加カートの操作が表示され、どの製品がカートに追加されました.クエリーを使用すると、特定の製品またはイベントでキャプチャした他の情報を探すために、条件節を展開できます.

結論

このポストは私たちにAzure AppInsights , 特にReact extension . 我々はどのように我々はAzureポータル内のデータを表示を開始することができます見て前に、特定の相互作用と最終的にエラー追跡に対してカスタムメトリックを追跡するだけでなく、ページビューのトラッキングを統合する方法を見てきました.