GATT operation not permitted

JavaScript
1

i build FTMS webApp using js . i connect to the indoor bike the error msg will pop ( GATT operation not permitted. ) how to fix this bug help me !

<script>
        async function connectToDevice() {
            try {
                const device = await navigator.bluetooth.requestDevice({
                    filters: [{ services: ['cycling_power'] }],
                });
              
                const server = await device.gatt.connect();
                const cpsService = await server.getPrimaryService('cycling_power');
                const powerCharacteristic = await cpsService.getCharacteristic('cycling_power_measurement');
                // const cadenceCharacteristic = await cpsService.getCharacteristic('0x0483');    
                const powerValueSpan = document.getElementById('powerValue');
                // const cadenceValueSpan = document.getElementById('cadenceValue');
                device.addEventListener('gattserverdisconnected', () => {
                    // Handle device disconnection here
                });

                const updateValues = async () => {
                    console.log("8");
                    const powerValue = await powerCharacteristic.readValue();
                    console.log(powerValue);
                    // const cadenceValue = await cadenceCharacteristic.readValue();

                    // Parse power and cadence values according to the Bluetooth standard.
                    const power = powerValue.getInt16(0, true) / 10; // Divide by 10 for 1 decimal place
                    // const cadence = cadenceValue.getUint8(0);
                     console.log(power);
                    powerValueSpan.textContent = power + ' watts';
                    // cadenceValueSpan.textContent = cadence + ' RPM';
                };

                updateValues();

                // Set up a periodic update (e.g., every 0.5 seconds)
                setInterval(updateValues, 500);
            }
 catch (error) {
  if (error instanceof DOMException && error.name === 'NotAllowedError') {
    // Handle permission-related errors
    console.error('Permission to access Bluetooth denied.');
  } else {
    // Handle other GATT-related errors
    console.error('GATT operation failed:', error);
  }
}
        }

        const connectButton = document.getElementById('connectButton');
        connectButton.addEventListener('click', connectToDevice);
    </script>

Error

2

Which one is line 53 of your index page? I dont immediately see how this would be an uncaught error…

3

One of the hundreds of sync functions in your try block fails with a reject(). You need to debug which one it is by adding debug information output

4

(If the failure is in the try block, why is it uncaught?)

5 
<!DOCTYPE html>
<html>
<head>
    <title>FTMS Indoor Bike Data</title>
</head>
<body>
    <button id="connectButton">Connect to Indoor Bike</button>
    <div id="powerDisplay">Power: N/A W</div>
    <div id="cadenceDisplay">Cadence: N/A RPM</div>
    <div id="speedDisplay">Speed: N/A m/s</div>

    <script>
        let bluetoothDevice;
        let powerCharacteristic;
        let cadenceCharacteristic;
        let speedCharacteristic;
        let gattServer;

        const powerServiceUUID = '00001818-0000-1000-8000-00805f9b34fb';
        const cadenceServiceUUID = '00001816-0000-1000-8000-00805f9b34fb';

        const connectButton = document.getElementById('connectButton');
        const powerDisplay = document.getElementById('powerDisplay');
        const cadenceDisplay = document.getElementById('cadenceDisplay');
        const speedDisplay = document.getElementById('speedDisplay');

        connectButton.addEventListener('click', async () => {
            try {
                bluetoothDevice = await navigator.bluetooth.requestDevice({
                    filters: [
                        { services: [powerServiceUUID] },
                        { services: [cadenceServiceUUID] }
                             ]
                });

                gattServer = await bluetoothDevice.gatt.connect();

                const powerService = await gattServer.getPrimaryService('cycling_power');
                powerCharacteristic = await powerService.getCharacteristic('cycling_power_measurement');

                const cadenceService = await gattServer.getPrimaryService('cycling_speed_and_cadence');
                cadenceCharacteristic = await cadenceService.getCharacteristic('cycling_speed_and_cadence_measurement');

                await powerCharacteristic.startNotifications();
                await cadenceCharacteristic.startNotifications();

                // Add event listeners only when characteristics are available
                powerCharacteristic.addEventListener('characteristicvaluechanged', handlePowerData);
                cadenceCharacteristic.addEventListener('characteristicvaluechanged', handleCadenceData);

                connectButton.disabled = true;
            } catch (error) {
                console.error('Error connecting to indoor bike:', error);
            }
        });

        function handlePowerData(event) {
            const dataView = event.target.value;
            const power = dataView.getUint16(1, true);
            powerDisplay.textContent = `Power: ${power} W`;
        }

        function handleCadenceData(event) {
            const dataView = event.target.value;
            const cadence = dataView.getUint8(1);
            const speed = dataView.getUint16(2, true) / 1000; // Speed is in m/s
            cadenceDisplay.textContent = `Cadence: ${cadence} RPM`;
            speedDisplay.textContent = `Speed: ${speed.toFixed(2)} m/s`;
        }

        // Handle disconnection gracefully
        bluetoothDevice?.addEventListener('gattserverdisconnected', () => {
            connectButton.disabled = false;
            if (powerCharacteristic) {
                powerCharacteristic.removeEventListener('characteristicvaluechanged', handlePowerData);
            }
            if (cadenceCharacteristic) {
                cadenceCharacteristic.removeEventListener('characteristicvaluechanged', handleCadenceData);
            }
            gattServer = null;
            powerCharacteristic = null;
            cadenceCharacteristic = null;
        });
    </script>
</body>
</html>

now this my new code i face same issue