Edit

Share via

Integrate Application Insights to developer portal

  • Article

APPLIES TO: Developer | Basic | Basic v2 | Standard | Standard v2 | Premium

A popular feature of Azure Monitor is Application Insights. It's an extensible Application Performance Management (APM) service for developers and DevOps professionals. Use it to monitor your developer portal and detect performance anomalies. Application Insights includes powerful analytics tools to help you learn what users actually do while visiting your developer portal.

Add Application Insights to your portal

Follow these steps to plug Application Insights into your managed or self-hosted developer portal.

Important

Steps 1 -3 are not required for managed portals. If you have a managed portal, skip to step 4.

  1. Set up a local environment for the latest release of the developer portal.

  2. Install the npm package to add Paperbits for Azure:

    npm install @paperbits/azure --save

  3. In the startup.publish.ts file in the src folder, import and register the Application Insights module. Add the AppInsightsPublishModule after the existing modules in the dependency injection container:

    import { AppInsightsPublishModule } from "@paperbits/azure";
...
const injector = new InversifyInjector();
injector.bindModule(new CoreModule());
...
injector.bindModule(new AppInsightsPublishModule());
injector.resolve("autostart");

  4. Retrieve the portal's configuration using the Content Item - Get REST API:

    GET https://management.azure.com/subscriptions/{subscription-id}/resourceGroups/{resource-group-name}/providers/Microsoft.ApiManagement/service/{api-management-service-name}/contentTypes/document/contentItems/configuration?api-version=2021-08-01

    Output is similar to:

    {
    "id": "/contentTypes/document/contentItems/configuration",
    "type": "Microsoft.ApiManagement/service/contentTypes/contentItems",
      "name": "configuration",
      "properties": {
      "nodes": [
        {
            "site": {
                "title": "Microsoft Azure API Management - developer portal",
                "description": "Discover APIs, learn how to use them, try them out interactively, and sign up to acquire keys.",
                "keywords": "Azure, API Management, API, developer",
                "faviconSourceId": null,
                "author": "Microsoft Azure API Management"
            }
        }
    ]
    }
}

  5. Extend the site configuration from the previous step with Application Insights configuration. Update the configuration using the Content Item - Create or Update REST API. Pass the Application Insights instrumentation key in an integration node in the request body.

    PUT https://management.azure.com/subscriptions/{subscription-id}/resourceGroups/{resource-group-name}/providers/Microsoft.ApiManagement/service/{api-management-service-name}/contentTypes/document/contentItems/configuration?api-version=2021-08-01

    {
    "id": "/contentTypes/document/contentItems/configuration",
    "type": "Microsoft.ApiManagement/service/contentTypes/contentItems",
    "name": "configuration",
    "properties": {  
    "nodes": [
        {
            "site": { ... },
            "integration": {
                "appInsights": {
                    "instrumentationKey": "xxxxxxxx-xxxx-xxxx-xxxxxxxxxxxxxxxxx"
                }
            }
        }
    ]
    }
}

  6. After you update the configuration, republish the portal for the changes to take effect.

Next steps

Learn more about the developer portal: