Managed NextJS API's no longer linked, App Insights logs no longer functional

[ChristianAyala]

Describe the bug

I have two static web apps, both using NextJS. They're effectively identical: Standard Hosting + Enterprise Grade Edge + Custom Domain enabled, same codebase, and deployed via Azure Pipelines. This morning, after a code merge, both pipelines ran as expected (one right after the other, 5 minute build time), but environment A no longer has a managed backend API detected while environment B does. While environment A remains functional, it no longer sends logs to the already-connected Application Insights instance.

Because there is a regular health-check probe, here is an example of what App Insights for environment B (the still-connected environment) should look like:

Meanwhile, this is what environment A (no longer connected) looks like, with the logs completely disappearing at the time of the deployment:

To Reproduce Steps to reproduce the behavior:

• Run Azure Pipeline below
• Open Static Web App A in Azure
• Open the API tab
• Note that the tab does not have a (managed) API (first screenshot)
• Open Static Web App B in Azure
• Open the API tab
• Note that the tab does have a (managed) API (second screenshot)

Here is the Pipeline yml for the no-longer-functional environment.

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - main
trigger:
  branches:
    include:
      - main

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - name: NEXT_PUBLIC_GTM_ID
    value: REDACTED
  - group: REDACTED
  steps:
  - checkout: self
    submodules: true
  - task: NodeTool@0
    inputs:
      versionSource: 'spec'
      versionSpec: '18.x'
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(REDACTED)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

And here is the yaml for the still-connected environment.

name: Azure Static Web Apps CI/CD

pr:
  branches:
    include:
      - main
trigger:
  branches:
    include:
      - main

jobs:
- job: build_and_deploy_job
  displayName: Build and Deploy Job
  condition: or(eq(variables['Build.Reason'], 'Manual'),or(eq(variables['Build.Reason'], 'PullRequest'),eq(variables['Build.Reason'], 'IndividualCI')))
  pool:
    vmImage: ubuntu-latest
  variables:
  - group: REDACTED
  steps:
  - checkout: self
    submodules: true
  - task: NodeTool@0
    inputs:
      versionSource: 'spec'
      versionSpec: '18.x'
  - task: AzureStaticWebApp@0
    inputs:
      azure_static_web_apps_api_token: $(REDACTED)
###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
# For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
      app_location: "/" # App source code path
      api_location: "" # Api source code path - optional
      output_location: "" # Built app content directory - optional
###### End of Repository/Build Configurations ######

Expected behavior Both environments should show a (managed) API, with API logs connected to Application Insights

Screenshots If applicable, add screenshots to help explain your problem.

Device info (if applicable):

• OS: [e.g. iOS]
• Browser [e.g. chrome, safari]
• Version [e.g. 22]

Additional context Triggering a re-run of the pipelines does not change the outcome.

[ChristianAyala]

Followup, a few screenshots of the troubleshoot screen for the site that no longer has managed functions:

I don't know what the Backend: 4 represents in the first screenshot.

Meanwhile, the corresponding screenshots for the site that still has functional managed functions:

[annikel]

Hi @ChristianAyala, since both your environments are functional both will have managed APIs deployed. It's important to note that we recently made some changes to our managed APIs logic. As a result, there's a possibility that your second environment may be impacted by these modifications. We'll look into the disparities in the portal and also investigate the absence of logs for your Application Insights instance. It would be helpful if you could provide more details about your static web app here, such as the default hostname or create a support ticket.

[ChristianAyala]

Thanks @annikel. The one working as expected is lemon-tree-0b9363110.3.azurestaticapps.net, while the one that is misconfigured is purple-smoke-07dd73b0f.4.azurestaticapps.net. Of note, when going to the URL's directly, I see the following:

<h2>Our services aren't available right now</h2><p>We're working to restore all services as soon as possible. Please check back soon.</p>013HOZQAAAAAOFAwCCi5eSKaOK9e7/pO0U04xRURHRTIxMTgARWRnZQ==

[annikel]

@ChristianAyala it appears that the website is accessible and functioning properly when accessed via the custom domain, is that correct? Did you also encounter any error messages when accessing it through the custom domain?

[ChristianAyala]

That's correct, from a user perspective everything is working through the custom domain. All API's are functional, the site is functional, and nothing appears off. It's really just an issue on the Azure portal, where it doesn't show a managed function and application logs. So if there's an error on the site, I don't have a way to dig into App Insights for trace logs.

[ChristianAyala]

Update, this is still an issue for us. Initial workaround was to explicitly integrate Application Insights into the backend part of the app using the applicationinsights npm package, rather than enabling the integration through the Azure portal. At the very least it allowed for logs to start streaming again.

One thing I noticed: in the pipeline logs for the still-connected app, I see the following:

Finished building app with Oryx
Detected standalone folder, so using it for deployment.
Repackaged Next.js app to deploy on the backend.
Skipping step to build /901b3987-6d66-4095-abbc-64998a346456-swa-oryx/app/.next/standalone with Oryx
Function Runtime Information. OS: linux, Functions Runtime: ~4, node version: 18
Zipping Api Artifacts
Done Zipping Api Artifacts
Zipping App Artifacts
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0498241(s)
Status: InProgress. Time: 15.0993224(s)
Status: Succeeded. Time: 30.1439808(s)
Deployment Complete :)

While in the disconnected app, I see the following:

Finished building app with Oryx
Detected standalone folder, so using it for deployment.
Repackaged Next.js app to deploy on the backend.
Skipping step to build /e54ccbf4-c185-40ce-ac15-e116ceba5d77-swa-oryx/app/.next/standalone with Oryx
Web App Runtime Information. OS: linux, node version: 18
Zipping Api Artifacts
Done Zipping Api Artifacts
Zipping App Artifacts
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0834318(s)
Status: InProgress. Time: 15.1633731(s)
Status: InProgress. Time: 30.2486597(s)
Status: InProgress. Time: 45.3242122(s)
Status: InProgress. Time: 60.3998587(s)
Status: InProgress. Time: 75.4837004(s)
Status: InProgress. Time: 90.6670242(s)
Status: InProgress. Time: 105.7507095(s)
Status: InProgress. Time: 120.8414759(s)
Status: InProgress. Time: 135.9203965(s)
Status: InProgress. Time: 151.0098383(s)
Status: InProgress. Time: 166.0992656(s)
Status: InProgress. Time: 181.1755491(s)
Status: InProgress. Time: 196.2477862(s)
Status: InProgress. Time: 211.3818168(s)
Status: InProgress. Time: 226.4670112(s)
Status: InProgress. Time: 241.5460323(s)
Status: Succeeded. Time: 256.6228555(s)
Deployment Complete :)

Again, same code base, but the latter one takes much longer. It also misses what seems like a relevant piece of information:

Function Runtime Information. OS: linux, Functions Runtime: ~4, node version: 18

One has Function runtime, while the other has Web App runtime information.

[annikel]

Hi @ChristianAyala, to fix the App Insights issue could you try adding the following environment variable to your Static Web App

Name: ApplicationInsightsAgent_EXTENSION_VERSION Value: ~3

[ChristianAyala]

I added it to my environment and there were no changes.

One thing to note, I'm running into issues with apps deployed in East US 2. The functional app is in Central. Central also has the faster / more reliable deployments.

[thomasgauvin]

@ChristianAyala, can you share your default hostname so we can investigate the root cause?

[ChristianAyala]

Functional default hostname: lemon-tree-0b9363110.3.azurestaticapps.net hostname with issue: polite-sand-01fc5a60f.3.azurestaticapps.net

The lemon-tree one is in Central US, and polite-sand is in East US 2. Both are configured with custom domains. As of this writing, going directly to lemon-tree is showing an issue, even though the custom domain works fine. The polite-sand default hostname works as expected (both are configured with Enterprise-Grade edge enabled, standard hosting plan):

[thomasgauvin]

@ChristianAyala, when we spoke, you also mentioned that deployments were not going through with polite-sand, is that the case, (deployment logs indicate faulty deployments), or is this related to another issue regarding enterprise-grade edge perhaps?

[ChristianAyala]

This is another issue. We have another environment at delightful-dune-0de794d0f.4.azurestaticapps.net, which is the one that no longer finishes deployments. Logs below, the last functional deployment was on Feb 14. This is located in East US 2, and an identical SWA exists in Central that is working just fine (same code base, domain at agreeable-mud-04c746410.3.azurestaticapps.net)

Web App Runtime Information. OS: linux, node version: 16
Zipping Api Artifacts
Done Zipping Api Artifacts
Zipping App Artifacts
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0889376(s)
Status: InProgress. Time: 15.1672414(s)
Status: InProgress. Time: 30.2477141(s)
Status: InProgress. Time: 45.3527204(s)
Status: InProgress. Time: 60.4346722(s)
Status: InProgress. Time: 75.5158618(s)
Status: InProgress. Time: 90.7812901(s)
Status: InProgress. Time: 105.8627538(s)
Status: InProgress. Time: 120.9601398(s)
Status: InProgress. Time: 136.0437028(s)
Status: InProgress. Time: 151.1312629(s)
Status: InProgress. Time: 166.2222528(s)
Status: InProgress. Time: 182.2477044(s)
Status: InProgress. Time: 197.3880336(s)
Status: InProgress. Time: 212.4894611(s)
Status: InProgress. Time: 227.5682165(s)
Status: InProgress. Time: 242.6481099(s)
Status: InProgress. Time: 257.7413021(s)
Status: InProgress. Time: 272.8198518(s)
Status: Failed. Time: 287.9117623(s)
Deployment Failed :(
Deployment Failure Reason: Web app warm up timed out. Please try again later.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting
##[error]Error: The process '/usr/bin/bash' failed with exit code 1
Finishing: AzureStaticWebApp

[ChristianAyala]

That same delightful-dune environment still does not complete deployments, though it looks like the deployment timeout was increased from 5-ish minutes to 10-ish minutes. No luck unfortunately. Again, There's a corresponding Central Static Web App that runs the exact same code, with no issues:

---End of Oryx build logs---
Try to validate location at: '/4e430c68-9056-4148-8ac9-5a36573b834b-swa-oryx/app/.next'.
Oryx has determined that the app build artifacts are in the '.next' directory. If this is incorrect please specify the app artifact location.
Finished building app with Oryx
Detected standalone folder, so using it for deployment.
Repackaged Next.js app to deploy on the backend.
Skipping step to build /4e430c68-9056-4148-8ac9-5a36573b834b-swa-oryx/app/.next/standalone with Oryx
Web App Runtime Information. OS: linux, node version: 16
Zipping Api Artifacts
Done Zipping Api Artifacts
Zipping App Artifacts
Done Zipping App Artifacts
Uploading build artifacts.
Finished Upload. Polling on deployment.
Status: InProgress. Time: 0.0229508(s)
Status: InProgress. Time: 15.0645187(s)
Status: InProgress. Time: 30.0918683(s)
Status: InProgress. Time: 45.113368(s)
Status: InProgress. Time: 60.1327642(s)
Status: InProgress. Time: 75.1666665(s)
Status: InProgress. Time: 90.1796061(s)
Status: InProgress. Time: 105.2024753(s)
Status: InProgress. Time: 120.2291359(s)
Status: InProgress. Time: 135.2604408(s)
Status: InProgress. Time: 150.2763328(s)
Status: InProgress. Time: 165.3027149(s)
Status: InProgress. Time: 180.320721(s)
Status: InProgress. Time: 195.3403099(s)
Status: InProgress. Time: 210.3586437(s)
Status: InProgress. Time: 225.3767054(s)
Status: InProgress. Time: 240.3958892(s)
Status: InProgress. Time: 255.7053138(s)
Status: InProgress. Time: 270.728407(s)
Status: InProgress. Time: 285.7498618(s)
Status: InProgress. Time: 300.771187(s)
Status: InProgress. Time: 315.788547(s)
Status: InProgress. Time: 330.8048166(s)
Status: InProgress. Time: 345.8317473(s)
Status: InProgress. Time: 361.0640413(s)
Status: InProgress. Time: 376.2895369(s)
Status: InProgress. Time: 391.3187857(s)
Status: InProgress. Time: 406.3383873(s)
Status: InProgress. Time: 421.3542434(s)
Status: InProgress. Time: 436.3819879(s)
Status: InProgress. Time: 451.3984084(s)
Status: InProgress. Time: 466.4137462(s)
Status: InProgress. Time: 481.476543(s)
Status: InProgress. Time: 496.4951796(s)
Status: InProgress. Time: 511.5179519(s)
Status: InProgress. Time: 526.5349001(s)
Status: InProgress. Time: 541.5603279(s)
Status: InProgress. Time: 557.8692556(s)
Status: InProgress. Time: 572.8926458(s)
Status: Failed. Time: 587.9223295(s)
Deployment Failed :(
Deployment Failure Reason: Web app warm up timed out. Please try again later.

For further information, please visit the Azure Static Web Apps documentation at https://docs.microsoft.com/en-us/azure/static-web-apps/
If you believe this behavior is unexpected, please raise a GitHub issue at https://github.com/azure/static-web-apps/issues/
Exiting
##[error]Error: The process '/usr/bin/bash' failed with exit code 1
Finishing: AzureStaticWebApp

[ChristianAyala]

Update: the lemon-tree environment that had been our "functional" environment no longer shows any API's connected (see screenshot). Thankfully the changes made to the other apps kept this one connected to Application Insights, but at this point the auto-managed App Insights tab is not functional for any of my SWA's. If anyone ends up finding this thread with similar issues (NextJS deployments don't show any connected API's), you should integrate App Insights manually: https://github.com/microsoft/ApplicationInsights-node.js.