Povolení rozšíření architektury pro Sadu Application Insights JavaScript SDK

• Ujistěte se, že verze modulu plug-in React, který chcete nainstalovat, je kompatibilní s vaší verzí Application Insights. Další informace naleznete v tématu Matice kompatibility modulu plug-in React.

• Musíte použít verzi >= 2.0.0 z .@microsoft/applicationinsights-web Tento modul plug-in funguje jenom v aplikacích nativních pro react. Nefunguje s aplikacemi používajícími architekturu Expo ani vytvořit nativní aplikaci React, která je založená na architektuře Expo.

• Modul plug-in Angular není kompatibilní s ECMAScript 3 (ES3).
• Když přidáme podporu nové verze Angular, náš balíček npm nebude kompatibilní s verzemi Angular nižší úrovně. Pokračujte ve starších balíčcích npm, dokud nebudete připraveni upgradovat verzi Angular.

Modul plug-in React pro sadu Application Insights JavaScript SDK umožňuje:

• Sledování historie směrovačů
• Sledování výjimek
• Sledování využití komponent
• Použití Application Insights s kontextem React

Modul plug-in React Native pro sadu Application Insights JavaScript SDK umožňuje:

• Sledování výjimek

• Shromažďování informací o zařízení

  Ve výchozím nastavení tento modul plug-in automaticky shromažďuje:

  • Jedinečné ID zařízení (označované také jako ID instalace))
  • Název modelu zařízení (například iPhone XS, Samsung Galaxy Fold, Huawei P30 Pro atd.)
  • Typ zařízení (například sluchátko, tablet atd.)

• Zakázání automatické shromažďování informací o zařízení

• Použití vlastní třídy shromažďování informací o zařízení

• Přepsání informací o zařízení

Modul plug-in Angular pro sadu Application Insights JavaScript SDK umožňuje:

• Sledování historie směrovačů
• Sledování výjimek
• Zřetězování dalších vlastních obslužných rutin výjimek

npm install @microsoft/applicationinsights-react-js

• Modul plug-in React Native

  Modul plug-in React Native ve výchozím nastavení spoléhá na react-native-device-info balíček. Musíte nainstalovat a propojit tento balíček. react-native-device-info Udržujte balíček v aktualizovaném stavu a shromážděte nejnovější názvy zařízení pomocí aplikace.

  Od verze 3 byla podpora přístupu k Informacím o zařízení abstrahována do rozhraní IDeviceInfoModule , abyste mohli použít nebo nastavit vlastní informační modul zařízení. Toto rozhraní používá stejné názvy funkcí a výsledek react-native-device-info.

  
  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

  Pokud používáte React Native Expo, přidejte modul plug-in React Native Manual Device místo modulu plug-in React Native. Modul plug-in React Native používá react-native-device-info package balíček, který React Native Expo nepodporuje.

  
  npm install --save @microsoft/applicationinsights-react-native @microsoft/applicationinsights-web
  
  

npm install @microsoft/applicationinsights-angularplugin-js

Inicializace připojení k Application Insights:

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 Plug-in

  Pokud chcete tento modul plug-in použít, musíte modul plug-in sestavit a přidat ho jako existující extension instanci Application Insights.

  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

  Pokud chcete tento modul plug-in použít, musíte buď zakázat automatickou shromažďování informací o zařízení, nebo po přidání rozšíření do kódu použít vlastní třídu shromažďování informací o zařízení.

  1. Vytvořte modul plug-in a přidejte ho jako existující extension instanci Application Insights.

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

  2. Proveďte některou z následujících akcí:

     • Zakažte automatické shromažďování informací o zařízení.

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

     • Použijte vlastní třídu shromažďování informací o zařízení.

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

Nastavte instanci Application Insights v vstupní komponentě ve vaší aplikaci:

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

Následující příklad kódu ukazuje, jak povolit enableAutoRouteTracking pole.

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

React Native nesleduje změny směrovače, ale sleduje zobrazení stránek.

Následující příklad kódu ukazuje, jak povolit sledování historie směrovače.

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

Hranice chyb React poskytují způsob, jak elegantně zpracovat nezachycenou výjimku, když k ní dojde v rámci aplikace React. Pokud k takové výjimce dojde, je pravděpodobné, že je potřeba zaprotokolovat výjimku. Modul plug-in React pro Application Insights poskytuje komponentu hranic chyb, která automaticky zaznamená výjimku, když k ní dojde.

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

Vyžaduje AppInsightsErrorBoundary , aby mu byly předány dva propsy. Jedná se o instanci vytvořenou ReactPlugin pro aplikaci a komponentu, která se má vykreslit, když dojde k výjimce. Pokud dojde k neošetřené výjimce, trackException je volána s informacemi zadanými pro hranici chyby a zobrazí se komponenta onError .

Sledování nezachycených výjimek je ve výchozím nastavení povolené. Pokud chcete zakázat sledování nezachycených výjimek, nastavte na truehodnotu disableExceptionCollection .

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

Pokud chcete sledovat nezachycené výjimky, nastavte ApplicationinsightsAngularpluginErrorService v app.module.ts:

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

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

Zřetězování dalších vlastních obslužných rutin výjimek

Zřetězte další vlastní obslužné rutiny výjimek, pokud chcete, aby aplikace řádně zpracovala, co by dříve byla neošetřená výjimka, ale přesto chcete tuto výjimku hlásit jako selhání aplikace.

Zřetězování dalších vlastních obslužných rutin výjimek:

1. Vytvořte vlastní obslužné rutiny výjimek, které implementují IErrorService.

   import { IErrorService } from '@microsoft/applicationinsights-angularplugin-js';
   
   export class CustomErrorHandler implements IErrorService {
       handleError(error: any) {
           ...
       }
   }
   

2. Předání pole errorServices prostřednictvím extensionConfig

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

Informace o zařízení, včetně prohlížeče, operačního systému, verze a jazyka, už webový balíček Application Insights shromažďuje.

• Modul plug-in React Native: Kromě informací o uživatelském agentu z prohlížeče, které shromažďuje webový balíček Application Insights, shromažďuje React Native také informace o zařízení. Informace o zařízení se automaticky shromažďují při přidání modulu plug-in.
• Modul plug-in React Native Manual Device: V závislosti na tom, jak jste modul plug-in nakonfigurovali při přidání rozšíření do kódu, tento modul plug-in:
  • Neshromažďuje informace o zařízení
  • Používá vlastní třídu shromažďování informací o zařízení.

Informace o zařízení, včetně prohlížeče, operačního systému, verze a jazyka, už webový balíček Application Insights shromažďuje.

Sledování využití komponent

Funkce, která je jedinečná pro modul plug-in React, je, že můžete instrumentovat konkrétní komponenty a sledovat je jednotlivě.

Pokud chcete instrumentovat komponenty Reactu se sledováním využití, použijte withAITracking funkci komponenty vyššího řádu. Pokud chcete povolit Application Insights pro komponentu, zabalte withAITracking ji kolem komponenty:

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

Měří čas od ComponentDidMount události přes ComponentWillUnmount událost. Aby byl výsledek přesnější, odečte čas, ve kterém byl uživatel nečinný pomocí React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle time.

Prozkoumání dat

Pomocí Průzkumníka metrik Azure Monitoru můžete vykreslit graf pro vlastní název React Component Engaged Time (seconds) metriky a rozdělit tuto vlastní metriku podle Component Name.

Můžete také spouštět vlastní dotazy , které rozdělí data Application Insights a generují sestavy a vizualizace podle vašich požadavků. Tady je příklad vlastního dotazu. Pokračujte a vložte ho přímo do editoru dotazů a otestujte ho.

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

Zobrazení nových vlastních metrik na webu Azure Portal může trvat až 10 minut.

Použití Application Insights s kontextem React

Poskytujeme obecné háky, které vám umožní přizpůsobit sledování změn pro jednotlivé komponenty. Alternativně můžete použít useTrackMetric nebo useTrackEvent, což jsou předem definované kontakty, které poskytujeme pro sledování změn součástí.

Hooky React pro Application Insights jsou navržené tak, aby používaly Kontext Reactu jako aspekt, který obsahuje. Pokud chcete použít Kontext, inicializujete Application Insights a pak naimportujete objekt Context:

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

Tento zprostředkovatel kontextu zpřístupňuje Application Insights jako useContext háček ve všech podřízených komponentách:

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

Hook useTrackMetric replikuje funkce komponenty vyššího withAITracking řádu, aniž by do struktury komponent přidala další komponentu. Hook má dva argumenty:

• Instanci Application Insights, kterou lze získat z hooku useAppInsightsContext .
• Identifikátor komponenty pro sledování, například jeho název.

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;

Funguje jako součást vyššího řádu, ale reaguje na události životního cyklu Hooks, nikoli na životní cyklus komponent. Pokud je potřeba spouštět konkrétní interakce, musí být hook explicitně poskytnut událostem uživatele.

useTrackEvent

Pomocí hooku useTrackEvent můžete sledovat jakoukoli vlastní událost, kterou může aplikace potřebovat sledovat, například kliknutí na tlačítko nebo jiné volání rozhraní API. Přebírá čtyři argumenty:

• Instance Application Insights, kterou lze získat z hooku useAppInsightsContext .
• Název události.
• Datový objekt události, který zapouzdřuje změny, které je třeba sledovat.
• skipFirstRun (volitelné) příznak pro přeskočení volání při trackEvent inicializaci. Výchozí hodnota je nastavená tak, aby true přesněji napodobuje způsob fungování verze, která není hákem. Při useEffect použití funkce Hooks se efekt aktivuje u každé aktualizace hodnoty, včetně počátečního nastavení hodnoty. Sledování proto začíná příliš brzy, což způsobuje sledování potenciálně nežádoucích událostí.

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;

Při použití hooku je možné datovou část poskytnout, aby se do události přidala další data, když je uložená v Application Insights.

Zakázání automatické shromažďování informací o zařízení

Pokud nechcete shromažďovat informace o zařízení, můžete nastavit disableDeviceCollection možnost 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();

Použití vlastní třídy shromažďování informací o zařízení

Pokud chcete přepsat informace o svém vlastním zařízení, můžete použít myDeviceInfoModule ke shromažďování vlastních informací o zařízení.

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

Přepsání informací o zařízení

IDeviceInfoModule Pomocí rozhraní můžete abstraktovat způsob přístupu modulu plug-in k informacím o zařízení. Toto rozhraní je prořezaná verze react-native-device-info rozhraní a většinou se dodává k testování.

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

Pokud se události "zablokují", protože Promise vrácená prostřednictvím getUniqueId není nikdy vyřešena nebo odmítnuta, můžete volat modul plug-in setDeviceId() k "odblokování" tohoto stavu čekání. Existuje také automatický časový limit nakonfigurovaný prostřednictvím uniqueIdPromiseTimeout (výchozí hodnota je 5 sekund), který interně zavolá setDeviceId() s libovolnou dříve nakonfigurovanou hodnotou.

–

Podívejte se na ukázku Application Insights React.

Momentálně není k dispozici.

Podívejte se na ukázku Application Insights Angular.