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

Makale
11/05/2024

Ç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

React Native Eklentisi

Varsayılan olarak React Native Eklentisi paketi kullanırreact-native-device-info. Bu paketi yüklemeniz ve bu pakete bağlanmanız gerekir. react-native-device-info Uygulamanızı kullanarak en son cihaz adlarını toplamak için paketi güncel tutun.

v3'ten bu yana DeviceInfo'ya erişim desteği, kendi cihaz bilgileri modülünüzü kullanmanıza /ayarlamanıza olanak tanımak için bir arabirimde IDeviceInfoModule soyutlanmıştır. Bu arabirim aynı işlev adlarını ve sonucunu react-native-device-infokullanır.
```
npm install --save @microsoft/applicationinsights-react-native @microsoft/applicationinsights-web
npm install --save react-native-device-info
react-native link react-native-device-info
```
React Native Manual Device Plugin

React Native Expo kullanıyorsanız React Native Eklentisi yerine React Native Manual Device Plugin'i ekleyin. React Native Eklentisi, React Native Expo'nun desteklemediği paketini kullanır react-native-device-info package .
```
npm install --save @microsoft/applicationinsights-react-native @microsoft/applicationinsights-web
```

npm install @microsoft/applicationinsights-angularplugin-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();

React Native Eklentisi

Bu eklentiyi kullanmak için eklentiyi oluşturmanız ve mevcut Application Insights örneğinize bir extension olarak eklemeniz gerekir.

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactNativePlugin } from '@microsoft/applicationinsights-react-native';
// *** Add the Click Analytics plug-in. ***
// import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';
var RNPlugin = new ReactNativePlugin();
// *** 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: [RNPlugin]
     // *** Add the Click Analytics plug-in. ***
     /* extensions: [RNPlugin, clickPluginInstance],
             extensionConfig: {
                 [clickPluginInstance.identifier]: clickPluginConfig
          } */
    }
});
appInsights.loadAppInsights();

React Native Manual Device Plugin

Bu eklentiyi kullanmak için, uzantıyı kodunuza ekledikten sonra otomatik cihaz bilgileri toplamayı devre dışı bırakmanız veya kendi cihaz bilgileri toplama sınıfınızı kullanmanız gerekir.

Eklentiyi oluşturun ve mevcut Application Insights örneğinize bir extension olarak ekleyin.

import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { ReactNativePlugin } from '@microsoft/applicationinsights-react-native';

var RNMPlugin = new ReactNativePlugin();
var appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        extensions: [RNMPlugin]
    }
});
appInsights.loadAppInsights();

Aşağıdakilerden birini yapın:

Otomatik cihaz bilgisi toplamayı devre dışı bırakın.

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

var RNMPlugin = new ReactNativeManualDevicePlugin();
var appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        disableDeviceCollection: true,
        extensions: [RNMPlugin]
    }
});
appInsights.loadAppInsights();

Kendi cihaz bilgileri toplama sınıfınızı kullanın.

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

// Simple inline constant implementation
const myDeviceInfoModule = {
    getModel: () => "deviceModel",
    getDeviceType: () => "deviceType",
    // v5 returns a string while latest returns a promise
    getUniqueId: () => "deviceId",         // This "may" also return a Promise<string>
};

var RNMPlugin = new ReactNativeManualDevicePlugin();
RNMPlugin.setDeviceInfoModule(myDeviceInfoModule);

var appInsights = new ApplicationInsights({
    config: {
        instrumentationKey: 'YOUR_INSTRUMENTATION_KEY_GOES_HERE',
        extensions: [RNMPlugin]
    }
});

appInsights.loadAppInsights();

Uygulamanızdaki giriş bileşeninde Application Insights örneğini ayarlayın:

Önemli

ErrorService kullanılırken uzantıda @microsoft/applicationinsights-analytics-js örtük bir bağımlılık vardır. veya uzantısını '@microsoft/applicationinsights-web' dahil etmeniz GEREKİDİR @microsoft/applicationinsights-analytics-js . Aksi takdirde, hata hizmeti tarafından yakalanan işlenmeyen özel durumlar gönderilmez.

import { Component } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { AngularPlugin } from '@microsoft/applicationinsights-angularplugin-js';
// *** Add the Click Analytics plug-in. ***
// import { ClickAnalyticsPlugin } from '@microsoft/applicationinsights-clickanalytics-js';
import { Router } from '@angular/router';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(
        private router: Router
    ){
        var angularPlugin = new AngularPlugin();
     // *** Add the Click Analytics plug-in. ***
     /* var clickPluginInstance = new ClickAnalyticsPlugin();
        var clickPluginConfig = {
          autoCapture: true
        }; */
        const appInsights = new ApplicationInsights({
            config: {
                connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
                // *** If you're adding the Click Analytics plug-in, delete the next line. ***  
                extensions: [angularPlugin],
             // *** Add the Click Analytics plug-in. ***
             // extensions: [angularPlugin, clickPluginInstance],
                extensionConfig: {
                    [angularPlugin.identifier]: { router: this.router }
                 // *** 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:

Tıklama Analizi satırlarını açıklamayı kaldırın.
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],.
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ı kullanabilir`enableAutoRouteTracking`. 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();

Adı	Türü	Gerekli mi?	Varsayılan	Açıklama
yönlendirici	nesne	İsteğe bağlı	boş	Application Insights PageView izlemesini etkinleştirmeye yönelik açısal yönlendirici.

Aşağıdaki kod örneğinde yönlendirici geçmişinin izlenmesinin nasıl etkinleştirileceği gösterilmektedir.

import { Component } from '@angular/core';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { AngularPlugin } from '@microsoft/applicationinsights-angularplugin-js';
import { Router } from '@angular/router';



@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.css']
})
export class AppComponent {
    constructor(
        private router: Router
    ){
        var angularPlugin = new AngularPlugin();
        const appInsights = new ApplicationInsights({ config: {
        connectionString: 'YOUR_CONNECTION_STRING',
        extensions: [angularPlugin],
        extensionConfig: {
            [angularPlugin.identifier]: { router: this.router }
        }
        } });
        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.

Yakalanmayan özel durumların izlenmesi varsayılan olarak etkindir. Yakalanmayan özel durumların izlenmesini devre dışı bırakmak istiyorsanız olarak ayarlayın disableExceptionCollection true.

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

var RNPlugin = new ReactNativePlugin();
var appInsights = new ApplicationInsights({
    config: {
        connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
        disableExceptionCollection: true,
        extensions: [RNPlugin]
    }
});
appInsights.loadAppInsights();

Yakalanmayan özel durumları izlemek için içinde ApplicationinsightsAngularpluginErrorService'i app.module.tsayarlayın:

Önemli

import { ApplicationinsightsAngularpluginErrorService } from '@microsoft/applicationinsights-angularplugin-js';

@NgModule({
  ...
  providers: [
    {
      provide: ErrorHandler,
      useClass: ApplicationinsightsAngularpluginErrorService
    }
  ]
  ...
})
export class AppModule { }

Daha fazla özel özel durum işleyicisini zincirleme

Uygulamanın önceden işlenmeyen bir özel durum olabilecekleri düzgün bir şekilde işlemesini istediğinizde, ancak yine de bu özel durumu uygulama hatası olarak raporlamak istediğinizde daha fazla özel özel durum işleyicisini zincirleyin.

Daha fazla özel özel durum işleyicisini zincirleme için:

IErrorService uygulayan özel özel durum işleyicileri oluşturun.

import { IErrorService } from '@microsoft/applicationinsights-angularplugin-js';

export class CustomErrorHandler implements IErrorService {
    handleError(error: any) {
        ...
    }
}

errorServices dizisini extensionConfig aracılığıyla geçirin.

extensionConfig: {
        [angularPlugin.identifier]: {
          router: this.router,
          errorServices: [new CustomErrorHandler()]
        }
      }

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.

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.

Otomatik cihaz bilgisi toplamayı devre dışı bırakma

Cihaz bilgilerini toplamak istemiyorsanız olarak ayarlayabilirsiniz disableDeviceCollection true.

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

var RNPlugin = new ReactNativePlugin();
var appInsights = new ApplicationInsights({
    config: {
        connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
        disableDeviceCollection: true,
        extensions: [RNPlugin]
    }
});
appInsights.loadAppInsights();

Kendi cihaz bilgileri toplama sınıfınızı kullanma

Kendi cihazınızın bilgilerini geçersiz kılmak istiyorsanız, kendi cihaz bilgilerinizi toplamak için kullanabilirsiniz myDeviceInfoModule .

import { ApplicationInsights } from '@microsoft/applicationinsights-web';

// Simple inline constant implementation
const myDeviceInfoModule = {
    getModel: () => "deviceModel",
    getDeviceType: () => "deviceType",
    // v5 returns a string while latest returns a promise
    getUniqueId: () => "deviceId",         // This "may" also return a Promise<string>
};

var RNPlugin = new ReactNativePlugin();
RNPlugin.setDeviceInfoModule(myDeviceInfoModule);

var appInsights = new ApplicationInsights({
    config: {
        connectionString: 'YOUR_CONNECTION_STRING_GOES_HERE',
        extensions: [RNPlugin]
    }
});

appInsights.loadAppInsights();

Cihaz bilgilerini geçersiz kılma

Eklentinin IDeviceInfoModule Cihaz Bilgilerine nasıl erişebileceğini soyutlamak için arabirimini kullanın. Bu arabirim, arabirimin react-native-device-info kaldırılmış bir sürümüdür ve çoğunlukla test için sağlanır.

export interface IDeviceInfoModule {
    /**
     * Returns the Device Model
     */
    getModel: () => string;

    /**
     * Returns the device type
     */
    getDeviceType: () => string;

    /**
     * Returns the unique Id for the device. To support both the current version and previous
     * versions react-native-device-info, this may return either a `string` or `Promise<string>`.
     * When a promise is returned, the plugin will "wait" for the promise to `resolve` or `reject`
     * before processing any events. This WILL cause telemetry to be BLOCKED until either of these
     * states, so when returning a Promise, it MUST `resolve` or `reject`. Tt can't just never resolve.
     * There is a default timeout configured via `uniqueIdPromiseTimeout` to automatically unblock
     * event processing when this issue occurs.
     */
    getUniqueId: () => Promise<string> | string;
}

aracılığıyla getUniqueId döndürülen hiçbir zaman çözümlenmediği / reddedilmediği için Promise olaylar "engelleniyor" ise, eklentiyi bu bekleme durumunu "kaldırmak" için çağırabilirsinizsetDeviceId(). Ayrıca aracılığıyla yapılandırılan uniqueIdPromiseTimeout otomatik bir zaman aşımı da vardır (varsayılan olarak 5 saniyedir), önceden yapılandırılmış herhangi bir değerle dahili olarak çağrılır setDeviceId() .

Ö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

Verilerin aktığını onaylayın.

Aracılığıyla paylaş