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

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

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 @microsoft/applicationinsights-web

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 sztringekre az új képességek kihasználásához.

Kapcsolat inicializálása az Application Insights szolgáltatással:

Megjegyzés

Ha az előzmény 5-ös vagy újabb verzióját használja, az alapnév beállítás már nem támogatott a createBrowserHistory alkalmazásban.

A const browserHistory = createBrowserHistory({ basename: '' }); helyett használja a következőt: const browserHistory = createBrowserHistory();.

Az előzmények használt verziójának ellenőrzéséhez futtassa a következőt npm list history: .

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. Távolítsa el a megjegyzéseket a Click Analytics sorairól.

  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 objektum Választható nulla 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 enableAutoRouteTracking az history 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>
    );
};

Ahhoz, hogy a AppInsightsErrorBoundary megfelelően működjön, két tulajdonságot kell átadni. Az alkalmazáshoz létrehozott ReactPlugin példány és egy összetevő, amelyet kivétel esetén renderelni lehet. Kezeletlen kivétel esetén a trackException kerül meghívásra a hibahatárhoz megadott információkkal, és megjelenik a onError komponens.

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 egyedülálló funkciója, hogy képes specifikus összetevőket instrumentálni é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 engedélyezéséhez egy összetevőnél helyezd köré a 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 időt a ComponentDidMount eseménytől a ComponentWillUnmount eseményig méri. 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.

Fedezd fel az adataidat

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 funkciót 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 Context 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 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 (használd a nyomkövetési eseményt)

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. Horgokkal useEffect a hatás minden értékfrissítéskor 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

Következő lépések