WebUSB reconnection fails if dynamicBoardDefinition is enabled

[fabianhugo]

Describe the bug
In the Calliope makecode editor, where the dynamicBoardDefinition flag is set to true, there is a problem with reestablishing the WebUSB connection after project settings change (e.g. when adding an extension or changing the hardware). This leads to a broken WebUSB connection within the makecode app, eventhough the browser still shows a working USB connection. This mismatch causes unfitting pop up dialogues causing confusion for the users.
This bug is filed in this repository anyway since WebUSB handling happens in this repository.
The bug might as well affect maker.makecode.com as well as arcade.makecode.com since they also use dynamicBoardDefinition, I was not able to reproduce it here since I could not establish a working WebUSB connection using a RP2040 board.
The bug is already explained here: microsoft/pxt-calliope#277

To Reproduce

1. Go makecode.calliope.cc
2. Connect using WebUSB (if no Calliope mini is at hand, micro:bit v2 works as well)
3. Click on Extensions
4. Choose any extension
5. Watch the USB icon disappear, reappear briefly and disappear again. Watch the browser tab's intact USB icon
6. Click on download and get a connection dialogue.

Expected behavior
The USB icon should reappear and stay, instead of a connection dialogue, the download process should start.

Screenshots

mkcusb.mp4

Desktop (please complete the following information):

• OS: macOS Sequia, Windows 11, Ubuntu 22.04
• Browser: All Chrome based browsers

The following branch introduces a workaround, hard resetting the connection 1 second after adding an extension. This is not a true fix, reestablishing the connection still fails, but the hard reset leads to a stable connection afterwards.
https://github.com/fabianhugo/pxt/tree/webusbfix1_resetafter1s

The bug has been troubling us for some time, especially with Jacdac it is a problem, because "adding blocks" leads to the wierd connection state. The bug affects makecode.calliope.cc and makecode.calliope.cc/beta.
We have the possibility to create a workaround for this in pxt-calliope, but think that it is better to have the fix where it presumably origins.
Disabling dynamicboarddefinition is not a solution, since we need the hardware selection.
The problem might be a race condition between the browsers WebUSB interface and makecode.

This is the console output after adding an extension with an established WebUSB connection:

Simulator ServiceWorker registration successful with scope:  https://trg-calliopemini.userpxt.io/
editor.js:3408 InvalidStateError: Failed to execute 'transferIn' on 'USBDevice': An operation that changes the device state is in progress.
    at o.recvPacketAsync (pxtapp.js:1:426294)
    at DAPWrapper.recvPacketAsync (editor.js:3634:28)
    at DAPWrapper.dapCmd (editor.js:3640:33)
    at async DAPWrapper.readSerial (editor.js:3343:19)
    at async readSerialLoop (editor.js:3391:30)
readSerialLoop @ editor.js:3408Understand this error
pxtapp.js:1 webusb: get devices
editor.js:2415 Connecting...
editor.js:2446 Connected
editor.js:3408 InvalidStateError: Failed to execute 'transferOut' on 'USBDevice': An operation that changes the device state is in progress.
    at o.sendPacketAsync (pxtapp.js:1:425581)
    at DAPWrapper.dapCmd (editor.js:3639:23)
    at DAPWrapper.dapCmdNums (editor.js:3664:21)
    at DAPWrapper.readSerial (editor.js:3343:30)
    at readSerialLoop (editor.js:3391:41)
readSerialLoop @ editor.js:3408
await in readSerialLoop
startReadSerial @ editor.js:3435
reconnectAsync @ editor.js:3541
await in reconnectAsync
(anonymous) @ main.js:1
await in (anonymous)
k @ main.js:1
(anonymous) @ main.js:1
Promise.finally
internalLoadHeaderAsync @ main.js:1
loadHeaderAsync @ main.js:1
await in loadHeaderAsync
reloadHeaderAsync @ main.js:1
reloadHeaderAsync @ main.js:1
B @ main.js:1
await in B
F @ main.js:1
await in F
H @ main.js:1
onClick @ main.js:1
Ge @ main.js:7
Ke @ main.js:7
(anonymous) @ main.js:7
Si @ main.js:7
Ci @ main.js:7
(anonymous) @ main.js:7
Pe @ main.js:7
(anonymous) @ main.js:7
Ri @ main.js:7
Qt @ main.js:7
Jt @ main.js:7
n.unstable_runWithPriority @ main.js:7
Gr @ main.js:7
De @ main.js:7
Zt @ main.js:7Understand this error
pxtapp.js:1 webusb: get devices
editor.js:2415 Connecting...
editor.js:2446 Connected
sim.js:92 V3 SIMULATOR

[Amerlander]

Same issue in PXT Arcade (tested using Meowbit in this repro):

meowbit.mp4

@abchatra – is this issue already being tracked by ms, and is a fix planned?

[abchatra]

@Amerlander we haven't got time to investigate this. We will investigate next week.

[fabianhugo]

Thanks for the reply @abchatra. Any news on the issue? Were you able to reproduce the bug?