Aktivera ett ramverkstillägg för Application Insights JavaScript SDK

Plugin-programmet React för Application Insights JavaScript SDK aktiverar:

• Spåra historiken för routern
• Spåra undantag
• Spåra komponenters användning
• Använda Application Insights med React-kontext

React Native-plugin-programmet för Application Insights JavaScript SDK aktiverar:

• Spåra undantag.
• Samla in enhetsinformation. Som standard samlar plugin-programmet automatiskt in:
  • Unikt enhets-ID (kallas även installations-ID.)
  • Enhetsmodellnamn (till exempel iPhone XS, Samsung Galaxy Fold, Huawei P30 Pro osv.)
  • Enhetstyp (till exempel handenhet, surfplatta osv.)
• Inaktivera automatisk insamling av enhetsinformation.
• Använd en egen klass för insamling av enhetsinformation.
• Åsidosätt enhetsinformationen.

Angular-plugin-programmet för Application Insights JavaScript SDK aktiverar:

• Spåra historiken för routern
• Spåra undantag
• Koppla fler anpassade undantagshanterare

npm install @microsoft/applicationinsights-react-js @microsoft/applicationinsights-web

• React Native Plugin

  Som standard förlitar sig React Native Plugin på react-native-device-info paketet. Du måste installera och länka till det här paketet. react-native-device-info Håll paketet uppdaterat för att samla in de senaste enhetsnamnen med hjälp av din app.

  Sedan v3 har stöd för åtkomst till DeviceInfo abstraherats till ett gränssnitt IDeviceInfoModule så att du kan använda/ange en egen enhetsinformationsmodul. Det här gränssnittet använder samma funktionsnamn och resultat 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

  Om du använder React Native Expo, lägg till plugin-programmet React Native Manual Device i stället för plugin-programmet React Native. React Native-plugin-programmet använder react-native-device-info package paketet, som React Native Expo inte stöder.

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

npm install @microsoft/applicationinsights-angularplugin-js

Initiera en anslutning till 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-inbyggt plugin-program

  Om du vill använda det här plugin-programmet måste du skapa plugin-programmet och lägga till det som en extension i din befintliga Application Insights-instans.

  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

  Om du vill använda det här plugin-programmet måste du antingen inaktivera automatisk enhetsinformationssamling eller använda din egen enhetsinformationssamlingsklass när du har lagt till tillägget i koden.

  1. Konstruera plugin-programmet och lägg till det som en extension i din befintliga Application Insights-instans.

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

  1. Gör något av följande:

     • Inaktivera automatisk insamling av enhetsinformation.

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

     • Använd en egen klass för insamling av enhetsinformation.

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

Konfigurera en instans av Application Insights i postkomponenten i din app:

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

I följande kodexempel visas hur du aktiverar fältet enableAutoRouteTracking .

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

React Native spårar inte routerändringar men spårar sidvisningar.

I följande kodexempel visas hur du aktiverar spårning av routerhistorik.

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

React-felgränser är ett sätt att hantera ett ohanterat undantag när det inträffar i en React-applikation. När ett sådant undantag inträffar är det troligt att undantaget måste loggas. Plugin-programmet React för Application Insights innehåller en felgränskomponent som automatiskt loggar undantaget när det inträffar.

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

Kräver AppInsightsErrorBoundary att två rekvisita skickas till den. Det är instansen ReactPlugin som skapats för applikationen och en komponent som ska renderas när ett undantag inträffar. När ett ohanterat undantag uppstår, anropas trackException med den information som tillhandahålls till felgränsen, och komponenten onError visas.

Spårning av ohanterade undantag är aktiverat som standard. Om du vill inaktivera spårning av ohanterade undantag anger du disableExceptionCollection till true.

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

Om du vill spåra ohanterade undantag konfigurerar du ApplicationinsightsAngularpluginErrorService i app.module.ts:

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

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

Koppla fler anpassade undantagshanterare

Länka fler anpassade undantagshanterare när du vill att programmet ska hantera det som tidigare skulle ha varit ett ohanterat undantag, men du vill ändå rapportera det här undantaget som ett programfel.

Så här kedjar du fler anpassade undantagshanterare:

1. Skapa anpassade undantagshanterare som implementerar IErrorService.

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

2. Skicka errorServices-matrisen via extensionConfig.

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

Enhetsinformationen, som omfattar webbläsare, operativsystem, version och språk, samlas redan in av Application Insights-webbpaketet.

• React Native Plugin: Förutom användaragentinformation från webbläsaren, som samlas in av Application Insights-webbpaketet, samlar React Native även in enhetsinformation. Enhetsinformation samlas in automatiskt när du lägger till plugin-programmet.

• React Native Manual Device Plugin( React Native Manual Device Plugin): Beroende på hur du konfigurerade plugin-programmet när du lade till tillägget i koden, så är det här plugin-programmet antingen:

  • Samlar inte in enhetsinformation.
  • Använder din egen klass för samling av enhetsinformation.

Enhetsinformationen, som omfattar webbläsare, operativsystem, version och språk, samlas redan in av Application Insights-webbpaketet.

Spåra komponenters användning

En funktion som är unik för React-plugin-programmet är att du kan instrumentera specifika komponenter och spåra dem individuellt.

För att instrumentera React-komponenter med användningsspårning, använd funktionen withAITracking komponent av högre ordning. Om du vill aktivera Application Insights för en komponent omsluter withAITracking du komponenten:

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

Den mäter tid från ComponentDidMount händelsen genom ComponentWillUnmount händelsen. För att göra resultatet mer exakt subtraherar det tiden då användaren var inaktiv med hjälp React Component Engaged Time = ComponentWillUnmount timestamp - ComponentDidMount timestamp - idle timeav .

Utforska dina data

Använd Azure Monitor Metrics Explorer för att rita ett diagram för det anpassade måttnamnet React Component Engaged Time (seconds) och dela upp det här anpassade måttet med Component Name.

Du kan också köra anpassade frågor för att dela upp Application Insights-data för att generera rapporter och visualiseringar enligt dina behov. Här är ett exempel på en anpassad fråga. Gå vidare och klistra in den direkt i frågeredigeraren för att testa den.

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

Det kan ta upp till 10 minuter innan nya anpassade mått visas i Azure Portal.

Använda Application Insights med React-kontext

Vi tillhandahåller allmänna gränssnitt så att du kan anpassa ändringsspårningen för enskilda komponenter. Du kan också använda useTrackMetric eller useTrackEvent, som är fördefinierade kontakter som vi tillhandahåller för att spåra ändringar av komponenter.

React Hooks för Application Insights är utformade för att använda React Context som en ram för det. Om du vill använda Kontext initierar du Application Insights och importerar sedan kontextobjektet:

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

Den här kontextprovidern gör Application Insights tillgängligt som en useContext hook inom alla dess underordnade komponenter:

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;

AnvändTrackMetric

Hook useTrackMetric replikerar funktionerna i komponenten withAITracking med högre ordning utan att lägga till någon annan komponent i komponentstrukturen. Hooken tar två argument:

• Application Insights-instansen useAppInsightsContext , som kan hämtas från Hook.
• En identifierare för komponenten för spårning, till exempel dess namn.

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;

Den fungerar som en komponent av högre ordning, men svarar på livscykelhändelser för Hooks istället för en komponentlivscykel. Om det finns ett behov av att köra vissa interaktioner måste hooken uttryckligen tillhandahållas till användarhändelser.

useTrackEvent

useTrackEvent Använd Hook för att spåra alla anpassade händelser som ett program kan behöva spåra, till exempel ett knappklick eller annat API-anrop. Det tar fyra argument:

• Application Insights-instans, som kan hämtas från useAppInsightsContext Hook.
• Namnet på händelsen.
• Händelsedataobjekt som kapslar in de ändringar som måste spåras.
• skipFirstRun -flaggan (valfritt) för att hoppa över att anropa anropet trackEvent vid initiering. Standardvärdet är satt till true för att mer noggrant efterlikna hur den icke-Hook-versionen fungerar. Med useEffect Hooks utlöses effekten på varje värdeuppdatering , inklusive den första inställningen för värdet. Därför börjar spårningen för tidigt, vilket gör att potentiellt oönskade händelser spåras.

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;

När Hook-komponenten används kan en datanyttolast tillhandahållas för att lägga till mer data till händelsen när den sparas i Application Insights.

Inaktivera automatisk enhetsinformationssamling

Om du inte vill samla in enhetsinformationen kan du ange disableDeviceCollection till 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();

Använd din egen klass för insamling av enhetsinformation

Om du vill åsidosätta din egen enhets information kan du använda myDeviceInfoModule för att samla in din egen enhetsinformation.

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

Åsidosätt enhetsinformationen

IDeviceInfoModule Använd gränssnittet för att sammanfatta hur plugin-programmet kan komma åt enhetsinformationen. Det här gränssnittet är en avskalad version av react-native-device-info gränssnittet och tillhandahålls främst för testning.

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's a default timeout configured via `uniqueIdPromiseTimeout` to automatically unblock
     * event processing when this issue occurs.
     */
    getUniqueId: () => Promise<string> | string;
}

Om händelser "blockeras" eftersom Promise som returneras via getUniqueId aldrig löses eller avvisas, kan du använda setDeviceId() i plugin-programmet för att "avblockera" vänteläge. Det finns också en automatisk timeout konfigurerad via uniqueIdPromiseTimeout (standardvärdet är 5 sekunder), som internt anropar setDeviceId() med ett tidigare konfigurerat värde.

Ej tillämpligt

Kolla in React-demonstrationen för Application Insights.

För närvarande inte tillgänglig.

Kolla in Application Insights Angular-demonstrationen.