Violation 'click' handler took 191ms instead of print statements from console.log

Viewed 56

I've never seen this message before, and it's not an error persay. My code still works, nothing shuts down, but I am debugging one little issue that is near impossible to find without the use of console.log statements, since it involves tracking a data value through numerous state changes and then() blocks. Annoying stuff. However, I have all of my console.logs in the code and NOTHING gets printed except for [Violation] 'click' handler took 191ms

Why could this be? The function where the console.logs statements are looks like the following...

const handleDriverSelection = (driver, index, superIndex, deviceObj) => {
        // If driver is the same 
        if (allDevices[superIndex][index].name == `${driver.firstname} ${driver.lastname}`){
           console.log("Same Dude, Bro")
        }

        // If active driver is empty
        else if (allDevices[superIndex][index].name == "No Driver Assigned" || allDevices[superIndex][index] == 'undefined'){
            let newArray = [...allDevices]

            // The specific device drop selected will be set equal the the driver clicked
            newArray[superIndex][index] = {
                name: `${driver.firstname} ${driver.lastname}`, 
                id: driver.id,
                type: deviceObj.name
            }

            // This removes the driver from the list of remaining driver
            newArray[superIndex].remaining_drivers = newArray[superIndex].remaining_drivers.filter( (remDriver) => {
                if (driver != remDriver){
                    return remDriver
                }
            })

            // This sets the state
            setAllDevices(newArray)
            console.log(allDevices[superIndex].remaining_drivers)
        }

        // if active driver exists but is NOT the one inputted
        else if (allDevices[superIndex][index].name != "No Driver Assigned" ){
            let newArray = [...allDevices]

            console.log("Driver Already Present, replacing existing")
            console.log(allDevices[superIndex][index].name)

            // This finds the driver that was previously selected and adds him/her back to the remaining list
            // For each driver...
            user.drivers.forEach( (dspDriver) => {

                // if the driver iterated == the driver that was previously selected
                if (allDevices[superIndex][index].name == `${dspDriver.firstname} ${dspDriver.lastname}`){

                    // Adds the driver to remaining drivers
                    newArray[superIndex].remaining_drivers = [...newArray[superIndex].remaining_drivers, dspDriver]

                    // Sets the current drop state to the driver selected
                    newArray[superIndex][index] = {
                        name: `${driver.firstname} ${driver.lastname}`, 
                        id: driver.id, 
                        type: deviceObj.name 
                    }

                    // Removes the driver selected from the list of remaining drivers
                    newArray[superIndex].remaining_drivers = newArray[superIndex].remaining_drivers.filter( (remDriver, index) => {
                        if (driver != remDriver){
                            return remDriver
                        }
                    })
                    setAllDevices(newArray)
                    console.log(allDevices[superIndex].remaining_drivers)
                }
            })
        }
    }

Note that after running this function, the states change accordingly. The page is updated with the properly selected driver and the state changes properly (I believe it does, I cannot check any print statements unless I run the handleSubmit function which will actually print the statements I have inside. Does anyone see why these wouldn't run, as well as what the hell that [Violation] means?

0 Answers
Related