Integrate Application Insights to API Management Developer Portal

Published Nov 09 2021 02:50 AM 1,133 Views

The API Management developer portal is an automatically generated, fully customizable website with the documentation of your APIs. It is where API consumers can discover your APIs, learn how to use them, and request access.

 

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. 

Use Case:

This guide walks through every step of Integrating Application Insights to API Management developer portal. Application Insights includes powerful analytics tools to help you learn what users actually do while visiting your developer portal.

Prerequisites

  1. To follow this guide, you need to have an Azure API Management instance. If you don't have one, please create an instance

2.      Before you can use Application Insights, you first need to create an instance of the service. For steps to create an instance using the Azure portal, see Workspace-based Application Insights resources.

Add Application Insights to your portal

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

Sravani_Masapalli_0-1636355648949.png

  1. Set uplocal environment for the latest release of the developer portal.
  2. Install the npm package to add Paperbits for Azure:

Console:

   npm install @paperbits/azure --save

 

  1. In the startup.publish.ts file in the src folder, import and register the Application Insights module:

Typescript:

import { AppInsightsPublishModule } from "@paperbits/azure";

...

injector.bindModule(new AppInsightsPublishModule());

 

 

  1. Retrieve the portal's configuration:

Sravani_Masapalli_1-1636355648953.png

 

Request URL:

=========
GET  https://<APIM Management endpoint hostname>/subscriptions/<APIM SubscriptionID>/resourceGroups/<APIMResource group>/providers/Microsoft.ApiManagement/service/<APIM Service name>/contentTypes/document/contentItems/configuration?api-version=2021-01-01-preview

 

 

Response:
=======

Sravani_Masapalli_2-1636355648957.png

 

 

Note:

=====

  • For getting - <APIM Management endpoint hostname>, navigate to APIManagement service in Portal -> Overview blade -> Under properties

4.3.png

 

  • <APIM SubscriptionID> , <APIMResource group> , <APIM Service name> can be found as below

4.4.png

 

Sample Request in Postman as below:

===========================

 

Send a GET Request from Postman as below—

GET   https://<APIM Mangement endpoint hostname>/subscriptions/<APIM SubscriptionID>/resourceGroups/<APIMResource group>/providers/Microsoft.ApiManagement/service/<APIM Service name>/contentTypes/document/contentItems/configuration?api-version=2021-01-01-preview

 

4.5.png

  1. Extend the site configuration from the previous step with Application Insights configuration using the PUT request:

5.1.png

 

Request URL:

============
PUT https://<APIM Management endpoint hostname>/subscriptions/<APIM SubscriptionID>/resourceGroups/<APIMResource group>/providers/Microsoft.ApiManagement/service/<APIM Service name>/contentTypes/document/contentItems/configuration?api-version=2021-01-01-preview

 

 

5.2.png

 

Note: Follow this document to create access token required to make calls into the Azure API Management REST API.: https://docs.microsoft.com/en-us/rest/api/apimanagement/apimanagementrest/azure-api-management-rest-...

 

Sample Request in Postman as below:

5.3.png

  1. Ensure to Publish Developer portal after performing the above steps
  2. View any pages in Developer portal. In application Insights we can observe Page view metrics as below—

7.1.png

 


7.2.png

Reference Link : Integrate Application Insights to developer portal - Azure API Management | Microsoft Docs

Happy Learning! :smile:

Co-Authors
Version history
Last update:
‎Nov 08 2021 05:01 AM
Updated by: