FluidFramework/examples/client-logger/app-insights-logger
Craig Macomber (Microsoft) adc25b0961
[bump] client: 2.10.0 => 2.11.0 (minor) (#23134)
## Description

Bumped client from 2.10.0 to 2.11.0.
2024-11-18 19:23:30 -08:00
..
src Add compat mode option to AzureClient and TinyliciousClient (#20997) 2024-05-21 14:25:02 -07:00
.eslintrc.cjs refactor: Update React dependencies (#22726) 2024-10-04 15:56:26 -05:00
.npmignore refactor: Add lib/test to all .npmignore files (#20464) 2024-04-04 18:24:46 +00:00
CHANGELOG.md Generate changelogs (#23132) 2024-11-19 00:16:38 +00:00
LICENSE
README.md refactor(markdown-magic): Rename example app header template (#22019) 2024-07-25 01:04:56 +00:00
biome.jsonc build(client): Add biome formatting scripts (#19380) 2024-06-11 11:13:59 -07:00
jest.config.cjs build(app-insights-logger): switch to ESM with Node16 (#19821) 2024-03-13 14:20:25 -07:00
package.json [bump] client: 2.10.0 => 2.11.0 (minor) (#23134) 2024-11-18 19:23:30 -08:00
prettier.config.cjs
tsconfig.cjs.json build(app-insights-logger): switch to ESM with Node16 (#19821) 2024-03-13 14:20:25 -07:00
tsconfig.json Enable exactOptionalPropertyTypes for FF repo (#21354) 2024-06-10 13:12:00 -07:00
webpack.config.cjs build(app-insights-logger): switch to ESM with Node16 (#19821) 2024-03-13 14:20:25 -07:00
webpack.dev.cjs build: Use .cjs file extension with CJS webpack configs (#19112) 2024-02-02 18:27:54 -08:00
webpack.prod.cjs build: Use .cjs file extension with CJS webpack configs (#19112) 2024-02-02 18:27:54 -08:00

README.md

@fluid-example/app-insights-logger

Overview

This package provides a simple Fluid application complete with a UI view in React to test the Fluid App Insights telemetry logger that will route typical Fluid telemetry to configured Azure App Insights.

Configuring the logger to send telemetry to your app insights instance

  • within src/components/ClientUtilities.ts, update the function definition for initializeTinyliciousClient to use the AppInsightsLogger with your instances configuration. In most cases, this is simply the most basic config containing your correct connection string:
function initializeTinyliciousClient(): TinyliciousClient {
	const appInsightsClient = new ApplicationInsights({
		config: {
			connectionString:
				// Edit this with your app insights instance connection string (this is an example string)
				"InstrumentationKey=abcdefgh-ijkl-mnop-qrst-uvwxyz6ffd9c;IngestionEndpoint=https://westus2-2.in.applicationinsights.azure.com/;LiveEndpoint=https://westus2.livediagnostics.monitor.azure.com/",
		},
	});

	appInsightsClient.loadAppInsights();

	return new TinyliciousClient({
		logger: new FluidAppInsightsLogger(appInsightsClient),
	});
}

Getting Started

You can run this example using the following steps:

  1. Enable corepack by running corepack enable.
  2. Run pnpm install and pnpm run build:fast --nolint from the FluidFramework root directory.
    • For an even faster build, you can add the package name to the build command, like this: pnpm run build:fast --nolint @fluid-example/app-insights-logger
  3. Run pnpm start from this directory and open http://localhost:8080 in a web browser to see the app running.

Starting the test

Generating telemetry events

  • There will be telemetry events that flow automatically when you start the test app. In addition to these events, you can control creating telemetry events yourself by interacting with UI app, incremeting/decrementing the shared counter and editing the shared string provided in this example

Viewing Telemetry Logs in App Insights

From the Azure web portal, navigate to your app insights instance. Now, go to the "Logs" for your instance, this should be an option within the left side panel. Finally, from this page, you can query for telemetry events, which will be stored in the customEvents table. As an example, you can issue this simple query to get recent telemetry events sent to the customEvents table:

  • Get a count of each distinct log event name and category of log event

    customEvents
    | summarize count() by name, tostring(customDimensions.category)
    
  • Get all performance related logs

    customEvents
    | where customDimensions.name == "performance"
    

Contribution Guidelines

There are many ways to contribute to Fluid.

Detailed instructions for working in the repo can be found in the Wiki.

This project has adopted the Microsoft Open Source Code of Conduct. For more information see the Code of Conduct FAQ or contact opencode@microsoft.com with any additional questions or comments.

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services. Use of these trademarks or logos must follow Microsofts Trademark & Brand Guidelines. Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.

Help

Not finding what you're looking for in this README? Check out fluidframework.com.

Still not finding what you're looking for? Please file an issue.

Thank you!

Trademark

This project may contain Microsoft trademarks or logos for Microsoft projects, products, or services.

Use of these trademarks or logos must follow Microsoft's Trademark & Brand Guidelines.

Use of Microsoft trademarks or logos in modified versions of this project must not cause confusion or imply Microsoft sponsorship.