Skip to main content

@ensono-stacks/azure-react

Configures your ReactJS application to use various Azure services:

Setting up @ensono-stacks/azure-react

Install the @ensono-stacks/azure-react plugin with the following command:

npm install --save-dev @ensono-stacks/azure-react@latest

Executors and Generators

To see a list of the plugin capabilities run the following command:

nx list @ensono-stacks/azure-react

View additional information about a plugin capability through the following commands:

nx g @ensono-stacks/azure-react:app-insights-web --help

Generators

@ensono-stacks/azure-react:app-insights-web

Installs and configures a ReactJS Library with App Insights.

This enables the following:

  • Tracking of router changes
  • React components usage statistics

This generator will create a new ReactJS Library with applicationinsights reactjs and applicationinsights web npm packages installed and configured for you. This can then be imported an used in an existing ReactJS application.

Usage

nx generate @ensono-stacks/azure-react:app-insights-web
caution

App insights requires the connection string environment variable to be set to the value set within Azure. The name of the connection string variable is set in the generator options --connectionString. Please see documentation on connection strings for more information

Command line arguments

The following command line arguments are available:

OptionDescriptionTypeRequired
--nameLibrary namestringRequired
--connectionStringThe env variable for the connection string.stringRequired
--directoryA directory where the lib is placed.stringOptional
--importPathWhat import path would you like to use for the library?.stringOptional
--tagsAdd tags to the library (used for linting).stringOptional

Generator Output

  • Adds an app insights config file
/src/app-insights-config.ts
// eslint-disable-next-line import/no-extraneous-dependencies
import {
DistributedTracingModes,
IConfig,
} from '@microsoft/applicationinsights-common';
// eslint-disable-next-line import/no-extraneous-dependencies
import type { IConfiguration } from '@microsoft/applicationinsights-core-js';

const appInsightConfig: IConfiguration & IConfig = {
enableAutoRouteTracking: false,
enableCorsCorrelation: true,
enableRequestHeaderTracking: true,
enableResponseHeaderTracking: true,
disableFetchTracking: false,
distributedTracingMode: DistributedTracingModes.AI_AND_W3C,
enableAjaxPerfTracking: true
};

export default appInsightConfig;
  • Adds a telemetry provider
/src/telemetry-provider.tsx
import {
ReactPlugin,
AppInsightsContext,
} from '@microsoft/applicationinsights-react-js';
import { ApplicationInsights } from '@microsoft/applicationinsights-web';
import { FC, ReactNode } from 'react';

import appInsightConfig from './app-insights-config';

const reactPlugin = new ReactPlugin();
const connectionString = process.env.<%= connectionString %>;

export const appInsights = new ApplicationInsights({
config: {
connectionString,
...appInsightConfig,
extensions: [reactPlugin],
},
});

if (!appInsights.appInsights.isInitialized()) {
appInsights.loadAppInsights();
}

export const TelemetryProvider: FC<{ children?: ReactNode }> = ({ children }) => (
<AppInsightsContext.Provider value={reactPlugin}>
{children}
</AppInsightsContext.Provider>
);
  • Installs and adds microsoft applicationinsights packages to package.json
/package.json
  "dependencies": {
...OtherDependencies
"@microsoft/applicationinsights-react-js": "3.4.0",
"@microsoft/applicationinsights-web": "2.8.9",
}
}

Using Application Insights

To use the Application Insights react hooks within your application please import the generated library and wrap your application in the TelemetryProvider installed by the generator for example

import NxWelcome from './nx-welcome';
import { TelemetryProvider } from 'packages/nameOfGeneratedAppInsightsLibrary/src';

export function App() {
return (
<TelemetryProvider>
<NxWelcome title="welcome title" />
<div />
</TelemetryProvider>
);
}

export default App;

From here a useAppInsightsContext hook will be available to use anywhere within your ReactJS App. For example

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;

Full documentation and a getting started guide can be found at React plug-in for Application Insights JavaScript SDK