Keretrendszerbővítmény engedélyezése az Application Elemzések JavaScript SDK-hoz

  • Cikk

Az alapvető SDK mellett bizonyos keretrendszerekhez is elérhetők beépülő modulok, például a React beépülő modul, a React natív beépülő modul és az Angular beépülő modul.

Ezek a beépülő modulok további funkciókat és integrációt biztosítanak az adott keretrendszerrel.

Előfeltételek

Mit engedélyez a beépülő modul?

Az alkalmazáshoz Elemzések JavaScript SDK-hoz készült React beépülő modul a következőket teszi lehetővé:

  • Útválasztó előzményeinek nyomon követése
  • Kivételek követése
  • Összetevők használatának nyomon követése
  • Alkalmazás Elemzések használata React-környezettel

Beépülő modul hozzáadása

Beépülő modul hozzáadásához kövesse az ebben a szakaszban leírt lépéseket.

Telepítse a(z) csomagot


npm install @microsoft/applicationinsights-react-js

Bővítmény hozzáadása a kódhoz

Megjegyzés:

2025. március 31-én megszűnik az eszközkulcsalapú betöltés támogatása. A rendszerállapot-kulcsok betöltése továbbra is működni fog, de a továbbiakban nem biztosítunk frissítéseket vagy támogatást a funkcióhoz. Váltás kapcsolati sztring az új képességek kihasználásához.

Kapcsolat inicializálása az Alkalmazás Elemzések:

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();

(Nem kötelező) A Click Analytics beépülő modul hozzáadása

Ha hozzá szeretné adni a Click Analytics beépülő modult:

  1. A Click Analytics sorainak kibontása.

  2. Tegye az alábbiak egyikét attól függően, hogy melyik beépülő modult adja hozzá:

    • A React esetében törölje a elemet extensions: [reactPlugin],.
    • A React Native esetében törölje a elemet extensions: [RNPlugin].
    • Az Angular esetében törölje a elemet extensions: [angularPlugin],.

  3. A beállítási folyamat folytatásához tekintse meg a Click Analytics beépülő modul használatát.

Konfiguráció

Ez a szakasz az Application Elemzések JavaScript SDK keretrendszerbővítményeinek konfigurációs beállításait ismerteti.

Útválasztó előzményeinek nyomon követése

Name Type Kötelező? Alapértelmezett Leírás
Történelem object Lehetséges null Az útválasztó előzményeinek nyomon követése. További információkért tekintse meg a React útválasztó csomag dokumentációját.

Az útválasztók előzményeinek nyomon követéséhez a felhasználók többsége használhatja a enableAutoRouteTracking mezőt a JavaScript SDK konfigurációjában. Ez a mező ugyanazokat az adatokat gyűjti össze az oldalnézetekhez, mint az history objektum.

Használja az history objektumot olyan útválasztó-implementáció használatakor, amely nem frissíti a böngésző URL-címét, ezt figyeli a konfiguráció. Nem szabad engedélyezni a mezőt és history az enableAutoRouteTracking objektumot sem, mert több oldalnézeti eseményt fog kapni.

Az alábbi példakód bemutatja, hogyan engedélyezheti a enableAutoRouteTracking mezőt.

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

Kivételek követése

A React-hibahatárok lehetővé teszik, hogy a rendszer elegánsan kezelje a nem tapasztalt kivételeket, ha az egy React-alkalmazásban történik. Ilyen kivétel esetén valószínű, hogy a kivételt naplózni kell. Az Alkalmazáshoz készült React beépülő modul Elemzések egy hibahatár összetevőt biztosít, amely automatikusan naplózza a kivételt, amikor az előfordul.

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>
    );
};

Ehhez AppInsightsErrorBoundary két kelléket kell átadni. Ez az ReactPlugin alkalmazáshoz létrehozott példány, és egy összetevő, amely kivétel esetén renderelhető. Kezeletlen kivétel esetén trackException a rendszer meghívja a hibahatárhoz megadott információkat, és megjelenik az onError összetevő.

Eszközadatok gyűjtése

A böngészőt, operációs rendszert, verziót és nyelvet tartalmazó eszközinformációkat az Alkalmazás Elemzések webcsomag már gyűjti.

Konfiguráció (egyéb)

Összetevők használatának nyomon követése

A React beépülő modul egyedi funkciója, hogy képes egyedi összetevőket létrehozni, és egyenként nyomon követni őket.

Ha a React-összetevőket használatkövetéssel szeretné használni, alkalmazza a withAITracking magasabb rendű összetevőfüggvényt. Az alkalmazás Elemzések összetevőhöz való engedélyezéséhez futtasd körbe withAITracking az összetevőt:

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);

Az eseménytől az ComponentDidMount eseményig eltelt időt méri ComponentWillUnmount . Az eredmény pontosabbá tétele érdekében kivonja azt az időt, amelyben a felhasználó tétlen volt a használatával React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time.

Az adatok felfedezése

Az Azure Monitor Metrics Explorerrel diagramot ábrázolhat az egyéni metrikák nevéhezReact Component Engaged Time (seconds), és feloszthatja ezt az egyéni metrikát.Component Name

Screenshot that shows a chart that displays the custom metric React Component Engaged Time (seconds) split by Component Name

Egyéni lekérdezéseket is futtathat az alkalmazás Elemzések adatok megosztásához, hogy jelentéseket és vizualizációkat hozzon létre a követelményeknek megfelelően. Íme egy példa egy egyéni lekérdezésre. A teszteléshez illessze be közvetlenül a lekérdezésszerkesztőbe.

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

Akár 10 percet is igénybe vehet, amíg az új egyéni metrikák megjelennek az Azure Portalon.

Alkalmazás Elemzések használata React-környezettel

Általános horgokat biztosítunk, amelyekkel testre szabhatja az egyes összetevők változáskövetését. Másik lehetőségként használhatja a useTrackMetric vagy a useTrackEvent függvényt is, amelyek előre definiált névjegyek, amelyeket az összetevők változásainak nyomon követéséhez biztosítunk.

A React Hooks for Application Elemzések úgy lett kialakítva, hogy a React Contextet tartalmazza. A Környezet használatához inicializálja az alkalmazás Elemzések, majd importálja a Környezeti objektumot:

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>
    );
};

Ez a környezetszolgáltató az alkalmazás Elemzések az összes gyermekösszetevőben horogként useContext elérhetővé teszi:

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

A useTrackMetric Hook replikálja a withAITracking magasabb rendű összetevő funkcióit anélkül, hogy egy másik összetevőt ad hozzá az összetevő szerkezetéhez. A Horog két argumentumot vesz fel:

  • Az alkalmazás Elemzések példányt, amely a useAppInsightsContext Hookból szerezhető be.
  • A nyomon követéshez használt összetevő azonosítója, például a neve.
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;

Úgy működik, mint a magasabb rendű összetevő, de az összetevők életciklusa helyett a Hooks életciklus eseményeire reagál. Ha bizonyos interakciókon kell futnia, a Hookot kifejezetten meg kell adni a felhasználói eseményeknek.

useTrackEvent

A Hook használatával nyomon követheti azokat az useTrackEvent egyéni eseményeket, amelyeket egy alkalmazásnak nyomon kell követnie, például gombkattintás vagy egyéb API-hívás. Négy argumentumot vesz igénybe:

  • Az alkalmazás Elemzések példányt, amely a useAppInsightsContext Hookból szerezhető be.
  • Az esemény neve.
  • Eseményadat-objektum, amely beágyazza a követendő módosításokat.
  • skipFirstRun (nem kötelező) jelző a hívás inicializálási meghívásának trackEvent kihagyásához. Az alapértelmezett érték úgy van beállítva, hogy true közelebbről utánozza a nem hook verzió működését. A Horgok esetén useEffect a hatás minden értékfrissítésre aktiválódik, beleértve az érték kezdeti beállítását is. Ennek eredményeképpen a nyomon követés túl korán kezdődik, ami potenciálisan nemkívánatos események nyomon követését okozza.
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;

A Hook használata esetén adat hasznos adatokat adhat hozzá, hogy több adatot adjon hozzá az eseményhez, amikor az alkalmazás Elemzések tárolja.

Mintaalkalmazás

Gyakori kérdések

Ez a szakasz választ ad a gyakori kérdésekre.

Hogyan Elemzések az alkalmazás eszközinformációkat generálni, például böngészőt, operációs rendszert, nyelvet és modellt?

A böngésző átadja a felhasználói ügynök sztringet a kérés HTTP-fejlécében. Az Alkalmazás Elemzések betöltési szolgáltatás az UA Parser használatával hozza létre az adattáblákban és -szolgáltatásokban látható mezőket. Ennek eredményeképpen az alkalmazás Elemzések felhasználók nem tudják módosítani ezeket a mezőket.

Előfordulhat, hogy ezek az adatok hiányoznak vagy pontatlanok, ha a felhasználó vagy a vállalat letiltja a felhasználói ügynök küldését a böngésző beállításai között. Előfordulhat, hogy az UA Parser regexes nem tartalmazza az összes eszközinformációt. Vagy előfordulhat, hogy az alkalmazás Elemzések nem fogadta el a legújabb frissítéseket.

Következő lépések