Catch a javascript exception in onError event (webkitspeech recognition)

Question

Following the code of the Webkit Speech Recognition (see the source), I would like to catch the error when starting (for example when you refuse the browser to use the microphone) to do something else.

The problem is... I don't know how to catch this king of error.

The final goal is to pass the error message to the object that try to start the Webkit Speech Recognition. So if you have another (good) solution to do this.

I have a relationship like that :

var anObject= {
    recognizer : Recognizer,

    listen : function() {
        try{
            this.recognizer.listen();
        } catch (error) {
            alert('I want to do something here with the error');
        }
    }
}


var Recognizer = {


    listen: function()
    {
        var recognition = new webkitSpeechRecognition();
        // recognition config

        try{
            recognition.start();
        } catch (error) {
             alert(error);
             // I've also tried "throw error;" but we never pass in this catch 
        }

        recognition.onerror = function(event) {
            console.log(event.error); // this works

            throw event.error; // the "exception" is thrown 
        }

        // other functions
    }
}

This doesn't work, I don't know why. I got an "Uncaught exception" so the exception is thrown, but not caught.

Thanks for you help.

Answer 1

Both of your sample codes won't work because the onerror is called asynchronously, and not caught by your catch or conditional statement.

The context of the function called on error is the SpeechRecognition object, and not the one where you try to catch it... Your best bet would be to call the object that handles the error from within the onerror function.

This should work:

var Recognizer = {
    listen: function()
    {
        var recognition = new webkitSpeechRecognition();

        recognition.onerror = function(event) {
            anObject.catchError(event);
        }

        recognition.start();
    }   
}

var anObject= {
    recognizer : Recognizer,

    listen : function() {
        this.recognizer.listen();
    },

    catchError: function(event) {
      switch (event.error) {
        case 'network':
          console.log('network error');
          break;
        case 'not-allowed':
        case 'service-not-allowed':
          console.log('permission denied by user or browser');
          break;
      }
    }
}

anObject.listen();

There is no automatic way to detect the difference between user denying permission, the browser denying permission, or even a user without a microphone.

Check out the annyang Speech Recognition library which uses some extra logic to figure out the different causes of errors. It also deals with all the other headaches around using speech recognition, bypasses potential bugs that can crash the browser, and makes using Speech Recognition much simpler: https://www.talater.com/annyang/