Playwright Series - Post 4 - 6 Min walkthru of Playwright testing with Azure Monitor

Overview: Install VS Code and Playwright Extensions, create tests, set MFA for Canvas Apps/Power Apps, loop through Power App applications and check the home page is loading, write logs to Azure App Insights and show via the Azure Dashboard.

6 min - annotated Playwright setup and use video

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

Playwright Series

Playwright Post 1 - Overview of E2E testing using Playwright 

Playwright Post 2 - Continuously Test/Monitor Canvas apps and website with MFA enabled 

Playwright Post 3 - Add App Insights logging inside your Playwright tests 

Playwright Series - Post 4 - 6 Min walkthru of Playwright testing with Azure Monitor (this post)

Network calls intermittently do not occur in Published play mode on a Canvas app

Problem: An app created does not run Patch or any other network call when published and in run mode. The network calls work in edit mode.  Looking at the logs, I identified some users are successfully updating using network calls

Figure 1. Monitoring shows the Edit/Play working and the Publish/Play not making any network calls.

Initial Hypothesis:

The Patch call works in edit mode, and then intermittently, some users get it to work in Published/Play mode.  This tells me the data in the Patch call is causing the network patch call to fail.

Using a Trace and running in play mode, I remove properties until I find the offending property.

Figure 2. In edit mode, a label control, CurrentDateVaue_1.Text is used

Once, we traced the value of CurrentDateValue_1, which is set by the global variable varCurrentDateTime. As this is done on a random screen, if the user does not open the screen in Publish /Play mode, the label control CurrentDateValue_1.Text is never set. 

Resolution: Replace all the code using CurrentDateValue_1.Text with the variable varCurrentDateTime. The label control is not set when the network/patch call is made, and bizarrely, it does not happen. I'd expect it to send regardless and let the error handling catch the issue.

Opening Canvas App in Edit mode takes excessive time to open

Problem: Two Canvas apps in my enterprise portfolio took over 20 minutes to load in edit mode.

Initial Hypothesis: If I specify the version of a studio in the URL to an old version, the offending app loads in edit mode in under a minute.

&studio-version=v3.24052.30.298708436 onto the Canvas app edit URL

This tells me that something in my app is offending when the latest studio versions are used to edit the app.  While this was okay for a few weeks as a workaround, MS support eventually gave me two settings that fixed both my apps.

Resolution: 

• Turn off "Collection access in component scope"
• Turn on "New analysis engine"

Weird behaviour on App Onstart for collection creating when the 'Delay Load' preview feature is enabled

Problem: We recently had a few canvas apps start behaving strangely where our menu which used a SharePoint list to populate a collection on the App onStart() was not working on all pages with the exception of the Home page.  This only happened to the published applications, in edit and play mode, it worked perfectly.

Initial Hypothesis: Looking at the logs between the "edit and play" and the "Publish" was showing hundreds to transactions saying something along the lines of "text is blank and therefore will be zero".  When I set the start page to a different page and run the "Published " app, the first page works but not the other pages navigation.  Looking at the difference in the logs, it appears that the collection is seen as empty on subsequent page loads only when running in "Published" mode.

Resolution: I don't remember turning the "delay load" feature on, it only showed up on the 22 May 2024 (or at least we noticed it), I merely turn off the feature and all the affected applications started working again.

Thoughts: The behavior bug must have been caused by either upgrade in Canvas App platform version, or the feature being automatically turn on.  If you get an issue, turn off the experimental feature.

App Insights for Power Platform - Part 3 - Canvas App Logging (Instrumentation key)

App Insights for Power Platform - Part 1 - Series Overview 

App Insights for Power Platform - Part 2 - App Insights and Azure Log Analytics 

App Insights for Power Platform - Part 3 - Canvas App Logging (Instrumentation key) (this post)

App Insights for Power Platform - Part 4 - Model App Logging

App Insights for Power Platform - Part 5 - Logging for APIM 

App Insights for Power Platform - Part 6 - Power Automate Logging

App Insights for Power Platform - Part 7 - Monitoring Azure Dashboards 

App Insights for Power Platform - Part 8 - Verify logging is going to the correct Log analytics

App Insights for Power Platform - Part 9 - Power Automate Licencing

App Insights for Power Platform - Part 10 - Custom Connector enable logging

App Insights for Power Platform - Part 11 - Custom Connector Behaviour from Canvas Apps Concern

Overview: Logging & monitoring for Canvas apps is done in two parts: App Insights, and using the Canvas app Monitor.  This post focuses on logging via App Insights.

Note: Once a solution that contains a Instrumentation key, they app logging key cannot be alter unless you make the environment have unmanaged layers.  You can use PowerCli and compose a new managed solution for each DTAP environment but it's a new compile for each environment.

Example:

In the annotated diagram below including a log snippet.  

1. Canvas App has an instrumentation key, the log captures the front end action

2. Calls to Dataverse & Power automate Flows are logged (relies on step 1)

3. Custom connector is calling an Azure Function (Function is logging to Log Analytics or app Insights),

4. the function logs into APIM and sends APIM a request (APIM logging is setup on the end points), and

5. APIM sends an outbound API request and captures the response (relies on step 4)

Note in this example I have Correlation tracking enabled on the Canvas App to get the full timeline, as shown below, it has been an experimental feature for a few years now.

When I turn off the Correlation, it is not as easy to trace items from start to finish.  All I get by default is the steps 3&4 data in my transaction search timeline.

All 5 pieces are still captured but the timeline has to be pieced together for tracing.

I would also enable the preview feature for logging as well as the experimental if the clients governance allows experimental features to be turned on.

Add a trace Event into your logs in a Canvas app example with a Custom Dimension

Trace("Practice | Dimension " & txtMarker.Text, TraceSeverity.Information, {appCode:"Prac-01",appInfo:"Custom Dimensions button clicked"})

Summary: Always add as many logging features as possible in Canvas Apps, think about where your logs go and also setup logging on Azure services to transaction can be traced.

App Insights for Power Platform - Part 1 - Series Overview 

App Insights for Power Platform - Part 2 - App Insights and Azure Log Analytics 

App Insights for Power Platform - Part 3 - Canvas App Logging (Instrumentation key) (this post)

App Insights for Power Platform - Part 4 - Model App Logging

App Insights for Power Platform - Part 5 - Logging for APIM 

App Insights for Power Platform - Part 6 - Power Automate Logging

App Insights for Power Platform - Part 7 - Monitoring Azure Dashboards 

App Insights for Power Platform - Part 8 - Verify logging is going to the correct Log analytics

App Insights for Power Platform - Part 9 - Power Automate Licencing

App Insights for Power Platform - Part 10 - Custom Connector enable logging (this post)

App Insights for Power Platform - Part 11 - Custom Connector Behaviour from Canvas Apps Concern

Wrap Feature of Canvas Apps for Android store deployment

Overview:  I am going to use the wrap feature for Canvas Apps to make a separate deployable package (apk) for Android devices.   Ensure you have setup the Wrap solution so the feature is available in each environment you deploy to.  

Tip: Wrap deployment has many nuances, I try take them away by have Admin on the Power Platform tenant and Azure.  Not ideal for enterprise client deployment.

Power Platform Setup:

There are a few ways to get to the wrap screens, here I click the vertical ellipses, and select "Wrap"

Walk thru the wizard as shown below, step 1, select the apps 

Step 2 - choose mobile platform

I need to disable signing to get Android/apk to build.  i.e. Under "Sign my app", turn it off.

Step 3 - Configure Branding

Step 4 Register a new app

Complete step 4 Register your app (ensure all boxes are ticked and green)

Step 5.  Manage Output - you need to get a Auth token by selecting the "Get App Center token" button and signing in (I'm a tenant admin and have AAD Admin rights)

Step 6. Build the App and wait to ensure it completes

Step 7. Verify Build

Step 8. Check you App Center

Note: On the Power Platform tenant, you may need to change configuration to allow third party apps.  I add this once per tenant i.e. not per mobile app on a tenant.  So i just need to to this once per DTAP env e.g. Production.

PS> Install-Module -Name Microsoft.PowerApps.Administration.PowerShell

PS> Install-Module -Name Microsoft.PowerApps.PowerShell -AllowClobber

PS> Add-AdminAllowedThirdPartyApps -ApplicationId 84xx-xxx-xxx-xxx

Update: 1 Aug 2023: I can't get the build to work for pkgfiles and the wizard is returning multiple js errors during the process.  I delete my organisation, create new organisations and Apps.

Image. Cannot build apk package in app centre

Other: 
Deep link into Wrapped Canvas Apps Use deep links with wrapped native mobile apps - Power Apps | Microsoft Learn