'App Insights is only applicable to Static Web Apps with at least one function

I have the followings TWO independent projects deployed at Azure from GitHub:

  • an Angular UI project as Static Web App (SWA)
  • an Node API project as Azure Function (AF)

AF can talk to local-run UI and Postman no problem.

When UI is deployed to Azure and talk to the same AF, it gets 405. To troubleshoot, I did

  1. Query AF logs: FunctionAppLogs | where Level contains "error" returns zero record. FunctionAppLogs | order by TimeGenerated desc | limit 100 returns all Information for Level.
  2. Thinking to get SWA's IP to AF's firewall rule, but it doesn't have networking tab for an IP.
  3. When trying to enable Application Insights for SWA log, it says SWA must have at least one function

enter image description here

I followed this to deploy my Angular SWA. Only difference is his API AF are integrated into the project, mine is a independent project outside of the Angular.

Update, this is how I setup the SWA:

  1. Add a Static Web App
  2. Choose GitHub for publish source, and log in
  3. Choose repository and branch
  4. Complete a new Pull and Merge, project is auto-build and deployed
azure


Solution 1:[1]

Study shows Static Web App (SWA) have integrated API when needs one, and this MS Doc has a Note SWA must have an API to use App Insights.

Solution 2:[2]

According to this document, you can enable Azure App Insights for Static Web Apps that use Azure Functions.

  1. Firstly, to enable Application Insights we need an Application Insights resource.
  2. Copy the instrumentation key for the SWA that you want your JavaScript telemetry to be sent. The same need to be added to the instrumentationKey or connectionString setting of the Application Insights JavaScript SDK.
  3. You can add the Application Insights JavaScript SDK to your resource following one of the following two options:

Here is a sample project that you can refer to and for remote debugging you can check this document

REFERENCES:

Solution 3:[3]

Another reason SWA must have an Azure Function is because it's backend running at AZ.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Jeb50
Solution 2 SwethaKandikonda-MT
Solution 3 Jeb50

Related Questions