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

Makale
11/15/2023

Ç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.

Ön koşullar

JavaScript SDK'sını yükleyin.

Yüklemek istediğiniz React eklentisinin sürümünün Application Analizler 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 Analizler JavaScript SDK'sı için React eklentisi şunları etkinleştirir:

Yönlendirici geçmişini izleme
Özel durumları izleme
Bileşen kullanımını izleme
React Bağlamı ile Uygulama Analizler 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

Dekont

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ş.

Uygulama Analizler bağlantı başlatın:

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 Analizler ö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 Analizler ö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 Analizler ö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 Analizler JavaScript SDK'sı için çerçeve uzantılarının yapılandırma ayarlarını kapsar.

Yönlendirici geçmişini izleme

Veri Akışı Adı	Türü	Gerekli mi?	Varsayılan	Tanım
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();

Veri Akışı Adı	Türü	Gerekli mi?	Varsayılan	Tanım
Yönlendirici	nesne	İsteğe bağlı	boş	Application Analizler PageView izlemeyi etkinleştirmek için angular 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 Analizler 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 disableExceptionCollectiontrue.

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, Uygulama Analizler 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 Uygulama Analizler etkinleştirmek için bileşenin çevresinde kaydırmawithAITracking:

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 üzere Uygulama Analizler 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 Uygulama Analizler 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.

Uygulama Analizler için React Kancaları, React Bağlamı'nı onu içeren bir özellik olarak kullanacak şekilde tasarlanmıştır. Bağlam'ı kullanmak için Uygulama Analizler 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ı, Uygulama Analizler'nin tüm alt bileşenlerinde Kanca olarak useContext kullanılabilir hale getirir:

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 Uygulama Analizler ö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 uygulama Analizler ö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, uygulama Analizler 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 disableDeviceCollectiontrue.

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 Analizler 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.

Uygulama Analizler 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. Uygulama Analizler 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, Uygulama Analizler 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 Uygulama Analizler en son güncelleştirmeleri benimsememiş olabilir.

Sonraki adımlar

Verilerin aktığını onaylayın.