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.
- within
src/components/ClientUtilities.ts
, update the function definition forinitializeTinyliciousClient
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),
});
}
You can run this example using the following steps:
- Enable corepack by running
corepack enable
. - Run
pnpm install
andpnpm run build:fast --nolint
from theFluidFramework
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
- For an even faster build, you can add the package name to the build command, like this:
- Run
pnpm start
from this directory and open http://localhost:8080 in a web browser to see the app running.
- run
pnpm run start
and navigate to http://localhost:8080/ in your web browser.
- 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
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"
There are many ways to contribute to Fluid.
- Participate in Q&A in our GitHub Discussions.
- Submit bugs and help us verify fixes as they are checked in.
- Review the source code changes.
- Contribute bug fixes.
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 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.
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!
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.