Aracılığıyla paylaş

Application Insights JavaScript SDK'sı için çerçeve uzantısını etkinleştirme

Çekirdek SDK'ya ek olarak React eklentisi, React Native eklentisi ve Angular eklentisi gibi belirli çerçeveler için kullanılabilir eklentiler de vardır.

Bu eklentiler, belirli bir çerçeveyle ek işlevsellik ve tümleştirme sağlar.

Önkoşullar

  • JavaScript SDK'sını yükleyin.
  • Yüklemek istediğiniz React eklentisinin sürümünün Application Insights sürümünüzle uyumlu olduğundan emin olun. Daha fazla bilgi için bkz . React eklentisi için Uyumluluk Matrisi.

Eklenti neyi etkinleştirir?

Application Insights JavaScript SDK'sı için React eklentisi şunları sağlar:

  • Yönlendirici geçmişini izleme
  • İstisnaları izleme
  • Bileşen kullanımını izleme
  • React Bağlamı ile Application Insights kullanma

Eklenti ekleme

Eklenti eklemek için bu bölümdeki adımları izleyin.

paketini yükleyin


npm install @microsoft/applicationinsights-react-js @microsoft/applicationinsights-web

Uzantıyı kodunuza ekleme

Not

31 Mart 2025’te izleme anahtarı alımı desteği sona erecektir. İzleme anahtarı alımı çalışmaya devam edecek, ancak artık özellik için güncelleştirme veya destek sağlamayacağız. Yeni özelliklerden yararlanmak için bağlantı dizelerine geçiş yapın.

Application Insights'a bağlantı başlatma:

Not

Geçmiş sürüm 5 veya üzerini kullanıyorsanız, basename seçeneği artık createBrowserHistory'de desteklenmez.

const browserHistory = createBrowserHistory({ basename: '' }); yerine const browserHistory = createBrowserHistory(); kullanın.

Hangi geçmiş sürümünü kullandığınızı denetlemek için komutunu çalıştırın npm list history.

import React from 'react';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactPlugin } from '@microsoft/applicationinsights-react-js';
import { createBrowserHistory } from "history";
const browserHistory = createBrowserHistory({ basename: '' });
var reactPlugin = new ReactPlugin();
// *** Add the Click Analytics plug-in. ***
/* var clickPluginInstance = new ClickAnalyticsPlugin();
   var clickPluginConfig = {
     autoCapture: true
}; */
var appInsights = new ApplicationInsights({
    config: {
        connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
        // *** If you're adding the Click Analytics plug-in, delete the next line. ***
        extensions: [reactPlugin],
     // *** Add the Click Analytics plug-in. ***
     // extensions: [reactPlugin, clickPluginInstance],
        extensionConfig: {
          [reactPlugin.identifier]: { history: browserHistory }
       // *** Add the Click Analytics plug-in. ***
       // [clickPluginInstance.identifier]: clickPluginConfig
        }
    }
});
appInsights.loadAppInsights();

(İsteğe bağlı) Tıklama Analizi eklentisini ekleme

Tıklama Analizi eklentisini eklemek istiyorsanız:

  1. Tıklama Analizi satırlarını açıklamayı kaldırın.

  2. Hangi eklentiyi eklediğinize bağlı olarak aşağıdakilerden birini yapın:

    • React için extensions: [reactPlugin], öğesini kaldırın.
    • React Native için extensions: [RNPlugin] öğesini silin.
    • Angular için extensions: [angularPlugin], öğesini silin.

  3. Kurulum işlemine devam etmek için bkz . Tıklama Analizi eklentisini kullanma.

Yapılandırma

Bu bölüm, Application Insights JavaScript SDK'sı için çerçeve uzantılarının yapılandırma ayarlarını kapsar.

Yönlendirici geçmişini izleme

Adı Türü Gerekli mi? Varsayılan Açıklama
geçmiş nesne İsteğe bağlı boş Yönlendirici geçmişini izleyin. Daha fazla bilgi için React yönlendirici paketi belgelerine bakın.

Yönlendirici geçmişini izlemek için kullanıcıların çoğu JavaScript SDK yapılandırmasındaki enableAutoRouteTrackingalanı kullanabilir. Bu alan, sayfa görünümleri için nesneyle history aynı verileri toplar.

Tarayıcı URL'sini güncellemeyen bir yönlendirici uygulaması kullanıyorsanız, yapılandırmanın dinlediği history nesnesini kullanın. Birden çok sayfa görünümü olayı elde ettiğiniz için hem alanı hem enableAutoRouteTracking de history nesneyi etkinleştirmemelisiniz.

Aşağıdaki kod örneğinde alanın nasıl etkinleştirileceği gösterilmektedir enableAutoRouteTracking .

var reactPlugin = new ReactPlugin();
var appInsights = new ApplicationInsights({
    config: {
        connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
        enableAutoRouteTracking: true,
        extensions: [reactPlugin]
    }
});
appInsights.loadAppInsights();

İstisnaları izleme

React hata sınırları , React uygulamasında gerçekleştiğinde yakalanmayan özel durumu düzgün bir şekilde işlemek için bir yol sağlar. Böyle bir özel durum oluştuğunda, büyük olasılıkla özel durumun günlüğe kaydedilmesi gerekir. Application Insights için React eklentisi, oluştuğunda özel durumu otomatik olarak günlüğe kaydeden bir hata sınırı bileşeni sağlar.

import React from "react";
import { reactPlugin } from "./AppInsights";
import { AppInsightsErrorBoundary } from "@microsoft/applicationinsights-react-js";

const App = () => {
    return (
        <AppInsightsErrorBoundary onError={() => <h1>I believe something went wrong</h1>} appInsights={reactPlugin}>
            /* app here */
        </AppInsightsErrorBoundary>
    );
};

AppInsightsErrorBoundary'ye iki prop'un geçirilmesi gerekir. Bunlar ReactPlugin , uygulama için oluşturulan örnektir ve bir özel durum oluştuğunda işlenecek bir bileşendir. İşlenmeyen bir özel durum oluştuğunda, trackException hata sınırına sağlanan bilgilerle çağrılır ve onError bileşen görüntülenir.

Cihaz bilgilerini toplama

Tarayıcı, işletim sistemi, sürüm ve dil içeren cihaz bilgileri Application Insights web paketi tarafından zaten toplanıyor.

Yapılandırma (diğer)

Bileşen kullanımını izleme

React eklentisine özgü bir özellik, belirli bileşenleri ayarlayarak ve bunları ayrı ayrı izleyerek takip edebilmenizdir.

React bileşenlerini kullanım izleme için withAITracking üst düzey bileşen işlevini uygulayın. Bir bileşen için Application Insights'ı etkinleştirmek için bileşenin etrafında sarmalayın withAITracking :

import React from 'react';
import { withAITracking } from '@microsoft/applicationinsights-react-js';
import { reactPlugin, appInsights } from './AppInsights';

// To instrument various React components usage tracking, apply the `withAITracking` higher-order
// component function.

class MyComponent extends React.Component {
    ...
}

// withAITracking takes 4 parameters (reactPlugin, Component, ComponentName, className). 
// The first two are required and the other two are optional.

export default withAITracking(reactPlugin, MyComponent);

ComponentDidMount olayından ComponentWillUnmount olayına kadar geçen süreyi ölçer. Sonucu daha doğru hale getirmek için, React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time kullanıcının boşta olduğu süreyi çıkararak hesaplar.

Verilerinizi keşfetme

Azure İzleyici ölçüm gezginini kullanarak React Component Engaged Time (seconds) özel ölçüm adı için bir grafik çizin ve bu özel ölçümü 'e göre Component Namebölün.

Bileşen Adı'na göre bölünmüş özel React Bileşeni Katılım Süresi (saniye) ölçümünü gösteren grafiği gösteren ekran görüntüsü

Ayrıca, gereksinimlerinize göre raporlar ve görselleştirmeler oluşturmak için Application Insights verilerini bölmek için özel sorgular da çalıştırabilirsiniz. Özel sorgu örneği aşağıda verilmiştır. Test etmek için doğrudan sorgu düzenleyicisine yapıştırın.

customMetrics
| where name contains "React Component Engaged Time (seconds)"
| summarize avg(value), count() by tostring(customDimensions["Component Name"])

Yeni özel ölçümlerin Azure portalında görünmesi 10 dakika kadar sürebilir.

React Bağlamı ile Application Insights kullanma

Tek tek bileşenler için değişiklik izlemeyi özelleştirmenize olanak sağlayan genel kancalar sağlıyoruz. Alternatif olarak, bileşenlerdeki değişiklikleri izlemek için sağladığımız önceden tanımlanmış kişiler olan useTrackMetric veya useTrackEvent kullanabilirsiniz.

Application Insights için React Hook'ları, bunu içeren bir yapı olarak React Context'i kullanacak şekilde tasarlanmıştır. Bağlam'ı kullanmak için Application Insights'ı başlatın ve bağlam nesnesini içeri aktarın:

import React from "react";
import { AppInsightsContext } from "@microsoft/applicationinsights-react-js";
import { reactPlugin } from "./AppInsights";

const App = () => {
    return (
        <AppInsightsContext.Provider value={reactPlugin}>
            /* your application here */
        </AppInsightsContext.Provider>
    );
};

Bu Bağlam Sağlayıcısı, Application Insights'ın tüm alt bileşenlerde bir useContext Kanca olarak kullanılabilirliğini sağlar.

import React from "react";
import { useAppInsightsContext } from "@microsoft/applicationinsights-react-js";

const MyComponent = () => {
    const appInsights = useAppInsightsContext();
    const metricData = {
        average: engagementTime,
        name: "React Component Engaged Time (seconds)",
        sampleCount: 1
      };
    const additionalProperties = { "Component Name": 'MyComponent' };
    appInsights.trackMetric(metricData, additionalProperties);
    
    return (
        <h1>My Component</h1>
    );
}
export default MyComponent;
useTrackMetric

Kanca, useTrackMetric yapısına başka bir bileşen eklemeden yüksek dereceli bileşenin işlevselliğini withAITracking yinelemektedir. Kanca (programlama bağlamında) iki argüman alır:

  • Hook'tan useAppInsightsContext elde edilebilen Application Insights örneği.
  • İzleme için bileşenin adı gibi bir tanımlayıcı.
import React from "react";
import { useAppInsightsContext, useTrackMetric } from "@microsoft/applicationinsights-react-js";

const MyComponent = () => {
    const appInsights = useAppInsightsContext();
    const trackComponent = useTrackMetric(appInsights, "MyComponent");
    
    return (
        <h1 onHover={trackComponent} onClick={trackComponent}>My Component</h1>
    );
}
export default MyComponent;

Daha üst düzey bileşen gibi çalışır, ancak bileşen yaşam döngüsü yerine Hooks yaşam döngüsü olaylarına yanıt verir. Belirli etkileşimlerde çalıştırılması gerekiyorsa, Hook'un kullanıcı olaylarına açıkça sağlanması gerekir.

izlemeEtkinliğiniKullan

Düğme tıklaması useTrackEvent veya başka bir API çağrısı gibi bir uygulamanın izlemesi gerekebilecek herhangi bir özel olayı izlemek için Kanca'yı kullanın. Dört bağımsız değişken alır:

  • useAppInsightsContext Hook'tan elde edilebilen Application Insights örneği.
  • Olayın adı.
  • İzlenecek değişiklikleri kapsülleyen olay veri nesnesi.
  • skipFirstRun (isteğe bağlı) bayrağı, başlatmada trackEvent çağrısını atlamak için. Varsayılan değer, Hook olmayan sürümün çalışma şeklini daha yakından taklit etmek için olarak ayarlanır true . useEffect Kancalar ile etki, değerin ilk ayarı da dahil olmak üzere her değer güncelleştirmesi üzerinde tetikler. Sonuç olarak izleme çok erken başlar ve bu da istenmeyebilecek olayların izlenmesine neden olur.
import React, { useState, useEffect } from "react";
import { useAppInsightsContext, useTrackEvent } from "@microsoft/applicationinsights-react-js";

const MyComponent = () => {
    const appInsights = useAppInsightsContext();
    const [cart, setCart] = useState([]);
    const trackCheckout = useTrackEvent(appInsights, "Checkout", cart);
    const trackCartUpdate = useTrackEvent(appInsights, "Cart Updated", cart);
    useEffect(() => {
        trackCartUpdate({ cartCount: cart.length });
    }, [cart]);
    
    const performCheckout = () => {
        trackCheckout();
        // submit data
    };
    
    return (
        <div>
            <ul>
                <li>Product 1 <button onClick={() => setCart([...cart, "Product 1"])}>Add to Cart</button></li>
                <li>Product 2 <button onClick={() => setCart([...cart, "Product 2"])}>Add to Cart</button></li>
                <li>Product 3 <button onClick={() => setCart([...cart, "Product 3"])}>Add to Cart</button></li>
                <li>Product 4 <button onClick={() => setCart([...cart, "Product 4"])}>Add to Cart</button></li>
            </ul>
            <button onClick={performCheckout}>Checkout</button>
        </div>
    );
}

export default MyComponent;

Kanca kullanıldığında, bir veri yükü sağlanarak Application Insights'ta depolandığında olaya daha fazla veri eklenebilir.

Örnek uygulama

Application Insights React tanıtımına göz atın.

Sonraki adımlar