Suggest closing other processes/tabs when Web USB gets "Unable to claim interface" error (#193)

Author: microbit-grace

src/components/connection-prompt/ConnectDialogContainer.svelte

@@ -29,7 +29,7 @@
   import BluetoothConnectingDialog from './bluetooth/BluetoothConnectingDialog.svelte';
   import SelectMicrobitDialogBluetooth from './bluetooth/SelectMicrobitDialogBluetooth.svelte';
   import MicrobitWearingInstructionDialog from './MicrobitWearingInstructionDialog.svelte';
-  import WebUsbTryAgain from './WebUsbTryAgain.svelte';
+  import WebUsbTryAgain, { USBTryAgainType } from './WebUsbTryAgain.svelte';
   import { onDestroy, onMount } from 'svelte';
   import { get, Unsubscriber } from 'svelte/store';
   import { compatibility } from '../../script/stores/uiStore';
@@ -40,7 +40,7 @@
   const { bluetooth, usb } = get(compatibility);
   let endOfFlow = false;
   let flashStage: FlashStage = usb ? 'bluetooth' : 'radio-sender';
-  let reconnectRequired = false;
+  let usbTryAgainType: USBTryAgainType = 'replug microbit';
   let flashProgress = 0;
 
   const stageToHex = (flashStage: FlashStage): HexType => {
@@ -72,30 +72,38 @@
           break;
         } else if (/No device selected/.test(err.message)) {
           $connectionDialogState.connectionState = ConnectDialogStates.USB_TRY_AGAIN;
-
+          usbTryAgainType = 'select microbit';
+          break;
+        } else if (/Unable to claim interface/.test(err.message)) {
+          $connectionDialogState.connectionState = ConnectDialogStates.USB_TRY_AGAIN;
+          usbTryAgainType = 'close tabs';
           break;
         } else {
           // Unhandled error. User will need to reconnect their micro:bit
           $connectionDialogState.connectionState = ConnectDialogStates.USB_TRY_AGAIN;
-          reconnectRequired = true;
+          usbTryAgainType = 'replug microbit';
           break;
         }
       default: {
         $connectionDialogState.connectionState = ConnectDialogStates.USB_TRY_AGAIN;
-        reconnectRequired = true;
+        usbTryAgainType = 'replug microbit';
       }
     }
   };
 
+  const handleConnectionError = (err: any) => {
+    if (flashStage === 'bluetooth') {
+      $connectionDialogState.connectionState = ConnectDialogStates.MANUAL_TUTORIAL;
+    } else {
+      handleWebUSBError(err);
+    }
+  };
+
   async function tryMicrobitConnection(): Promise<void> {
     try {
       await Microbits.linkMicrobit();
     } catch (err) {
-      if (flashStage === 'bluetooth') {
-        $connectionDialogState.connectionState = ConnectDialogStates.MANUAL_TUTORIAL;
-      } else {
-        $connectionDialogState.connectionState = ConnectDialogStates.USB_TRY_AGAIN;
-      }
+      handleConnectionError(err);
       return;
     }
     const friendlyName = await getMicrobitName();
@@ -116,11 +124,7 @@
       }
       return friendlyName;
     } catch (err) {
-      if (flashStage === 'bluetooth') {
-        $connectionDialogState.connectionState = ConnectDialogStates.MANUAL_TUTORIAL;
-      } else {
-        handleWebUSBError(err);
-      }
+      handleConnectionError(err);
     }
   }
 
@@ -144,11 +148,7 @@
         onConnectingSerial(friendlyName);
       }
     } catch (err) {
-      if (flashStage === 'bluetooth') {
-        $connectionDialogState.connectionState = ConnectDialogStates.MANUAL_TUTORIAL;
-      } else {
-        handleWebUSBError(err);
-      }
+      handleConnectionError(err);
     }
   }
 
@@ -169,7 +169,6 @@
     setTimeout(() => {
       $connectionDialogState.connectionState = ConnectDialogStates.NONE;
       endOfFlow = false;
-      reconnectRequired = false;
     }, 200);
   }
 
@@ -381,11 +380,10 @@
             ConnectDialogStates.CONNECT_BATTERY)} />
     {:else if $connectionDialogState.connectionState === ConnectDialogStates.USB_TRY_AGAIN}
       <WebUsbTryAgain
-        {reconnectRequired}
+        type={usbTryAgainType}
         onCancel={endFlow}
         onTryAgain={() => {
           $connectionDialogState.connectionState = ConnectDialogStates.CONNECT_CABLE;
-          reconnectRequired = false;
         }} />
     {/if}
   </StandardDialog>

src/components/connection-prompt/WebUsbTryAgain.svelte

@@ -4,24 +4,31 @@
   SPDX-License-Identifier: MIT
  -->
 
+<script lang="ts" context="module">
+  export type USBTryAgainType = 'replug microbit' | 'select microbit' | 'close tabs';
+</script>
+
 <script lang="ts">
   import { t } from '../../i18n';
   import DialogHeading from '../DialogHeading.svelte';
   import StandardButton from '../StandardButton.svelte';
 
   export let onTryAgain: () => void;
   export let onCancel: () => void;
-  export let reconnectRequired: boolean = false;
+  export let type: USBTryAgainType = 'replug microbit';
 </script>
 
 <div class="w-175">
   <DialogHeading>{$t('connectMB.usbTryAgain.heading')}</DialogHeading>
   <div class="space-y-5">
-    {#if reconnectRequired}
-      <p>{$t('connectMB.usb.error1')}</p>
-      <p>{$t('connectMB.usb.error2')}</p>
+    {#if type === 'select microbit'}
+      <p>{$t('connectMB.usbTryAgain.selectMicrobit')}</p>
+    {:else if type === 'close tabs'}
+      <p>{$t('connectMB.usbTryAgain.closeTabs1')}</p>
+      <p>{$t('connectMB.usbTryAgain.closeTabs2')}</p>
     {:else}
-      <p>{$t('connectMB.usbTryAgain.subtitle')}</p>
+      <p>{$t('connectMB.usbTryAgain.replugMicrobit1')}</p>
+      <p>{$t('connectMB.usbTryAgain.replugMicrobit2')}</p>
     {/if}
     <div class="flex justify-end gap-x-5">
       <StandardButton onClick={onCancel}>{$t('actions.cancel')}</StandardButton>

src/messages/ui.en.json

@@ -131,10 +131,11 @@
   "connectMB.tryAgain": "Try again",
 
   "connectMB.usbTryAgain.heading": "Connect using WebUSB",
-  "connectMB.usbTryAgain.subtitle": "You didn't select a micro:bit. Do you want to try again?",
-
-  "connectMB.usb.error1": "A WebUSB error occured.",
-  "connectMB.usb.error2": "Please unplug and replug the micro:bit before trying again.",
+  "connectMB.usbTryAgain.selectMicrobit": "You didn't select a micro:bit. Do you want to try again?",
+  "connectMB.usbTryAgain.closeTabs1": "Another process is connected to this device.",
+  "connectMB.usbTryAgain.closeTabs2": "Close any other tabs that may be using WebUSB (e.g. MakeCode, Python Editor, machine learning tool), or unplug and replug the micro:bit before trying again.",
+  "connectMB.usbTryAgain.replugMicrobit1": "A WebUSB error occurred.",
+  "connectMB.usbTryAgain.replugMicrobit2": "Please unplug and replug the micro:bit before trying again.",
 
   "connectMB.radioStart.heading": "What you will need to get started:",
   "connectMB.radioStart.requirements1": "2 micro:bits",