Megosztás a következőn keresztül:

Keretrendszerbővítmény engedélyezése az Application Insights 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 Application Insights JavaScript SDK React beépülő modulja 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
  • Az Application Insights 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

Feljegyzé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 Application Insights szolgáltatással:

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 Insights JavaScript SDK keretrendszerbővítményeinek konfigurációs beállításait ismerteti.

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

Név Típus Kötelező? Alapértelmezett Leírás
történelem object Választható 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 Application Insights React beépülő modulja 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 Application Insights webes csomagja 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 Application Insights ö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

Képernyőkép egy diagramról, amely a React Component Engaged Time (másodperc) egyéni metrikát jeleníti meg az összetevő neve szerint felosztva

Egyéni lekérdezéseket is futtathat az Application Insights-adatok felosztá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.

Az Application Insights 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 Insights úgy lett kialakítva, hogy a React Contextet tartalmazza. A Context használatához inicializálja az Application Insightst, 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 Application Insightst hookként useContext teszi elérhetővé az összes gyermekösszetevőben:

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 Application Insights-példány, 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:

  • Application Insights-példány, 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 Application Insightsban van tárolva.

Mintaalkalmazás

Gyakori kérdések

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

Hogyan hozza létre az Application Insights az eszközadatokat, például a böngészőt, az operációs rendszert, a nyelvet és a modellt?

A böngésző átadja a felhasználói ügynök sztringet a kérés HTTP-fejlécében. Az Application Insights 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 Application Insights felhasználói 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 Application Insights nem fogadta el a legújabb frissítéseket.

Következő lépések