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
  • Özel durumları 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

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ı dizesi geçiş.

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

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 öğesini silin extensions: [reactPlugin],.
    • React Native için öğesini silin extensions: [RNPlugin].
    • Angular için öğesini silin extensions: [angularPlugin],.
  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 alanı kullanabilirenableAutoRouteTracking. Bu alan, sayfa görünümleri için nesneyle history aynı verileri toplar.

Yapılandırmanın history dinlediği tarayıcı URL'sini güncelleştirmeyen bir yönlendirici uygulaması kullanırken nesnesini kullanın. Birden çok sayfa görünümü olayı elde ettiğiniz için hem alanı hem history de enableAutoRouteTracking 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();

Özel durumları 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>
    );
};

için AppInsightsErrorBoundary 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 izleyebilmeniz ve bunları ayrı ayrı izleyebilmektir.

React bileşenlerini kullanım izleme ile izlemek için daha yüksek sıralı bileşen işlevini uygulayın withAITracking . 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);

Olaydan olaya kadar ComponentWillUnmount olan ComponentDidMount süreyi ölçer. Sonucu daha doğru hale getirmek için, kullanarak React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle timekullanıcının boşta olduğu süreyi çıkarır.

Verilerinizi keşfetme

Azure İzleyici ölçüm gezginini kullanarak özel ölçüm adı React Component Engaged Time (seconds) için bir grafik çizin ve bu özel ölçümü ile 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 Kancaları, React Bağlamı'nı bu bağlamı içeren bir özellik olarak 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 Kanca olarak useContext kullanılabilir olmasını 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 bileşen yapısına başka bir bileşen eklemeden yüksek sıralı bileşenin işlevselliğini withAITracking çoğaltır. Kanca iki bağımsız değişken 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 yüksek sıralı 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.

useTrackEvent

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:

  • Hook'tan useAppInsightsContext elde edilebilen Application Insights örneği.
  • Olayın adı.
  • İzlenecek değişiklikleri kapsülleyen olay veri nesnesi.
  • başlatmada çağrıyı trackEvent çağırmayı atlamak için skipFirstRun (isteğe bağlı) bayrağı. 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, Application Insights'ta depolandığında olaya daha fazla veri eklemek için ona bir veri yükü sağlanabilir.

Örnek uygulama

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

Sık sorulan sorular

Bu bölüm, sık sorulan soruların yanıtlarını sağlar.

Application Insights tarayıcı, işletim sistemi, dil ve model gibi cihaz bilgilerini nasıl oluşturur?

Tarayıcı, isteğin HTTP üst bilgisinde Kullanıcı Aracısı dizesini geçirir. Application Insights alma hizmeti, veri tablolarında ve deneyimlerinde gördüğünüz alanları oluşturmak için UA Ayrıştırıcısı'nı kullanır. Sonuç olarak, Application Insights kullanıcıları bu alanları değiştiremez.

Bazen, kullanıcı veya kuruluş tarayıcı ayarlarında Kullanıcı Aracısı göndermeyi devre dışı bırakırsa bu veriler eksik veya yanlış olabilir. UA Ayrıştırıcısı kayıt defteri tüm cihaz bilgilerini içermeyebilir. Veya Application Insights en son güncelleştirmeleri benimsememiş olabilir.

Sonraki adımlar