Web-kore-sdk is giving error in Microsoft edge "Unable to get property 'botOptions' of undefined or null reference"

XO Platform APIs and SDKs
1

I am trying to integrate bot with webapp. It is working fine with google chrome & firefox. But when i run index.html in microsoft edge & safari, it shows the following error:
Error-
jQuery.Deferred exception: Unable to get property ‘botOptions’ of undefined or null reference TypeError: Unable to get property ‘botOptions’ of undefined or null reference
at Anonymous function (file:///F:/Priyanshu/kh/Chatbot/sdk/UI/kore-main.js:75:9)
at mightThrow (file:///F:/Priyanshu/kh/Chatbot/sdk/UI/libs/jquery.js:3534:10)
at Anonymous function (file:///F:/Priyanshu/kh/Chatbot/sdk/UI/libs/jquery.js:3602:12) undefined

image

Kore-main.js Code

(function($){

    $(document).ready(function () {
        

        function assertion(options, callback) {
            var jsonData = {
                "clientId": options.clientId,
                "clientSecret": options.clientSecret,
                "identity": options.userIdentity,
                "aud": "",
                "isAnonymous": true
            };


            options.assertion = generateJWT(jsonData);
        console.log(generateJWT(jsonData));
        options.handleError = koreBot.showError;
        options.botDetails = koreBot.botDetails;
        options.chatHistory = koreBot.chatHistory;
        callback(null, options);
        setTimeout(function () {
            if (koreBot && koreBot.initToken) {
                koreBot.initToken(options);
                }
        }, 2000);
    }
        function generateJWT(options) {
            // Header
            var oHeader = {alg: 'HS256', typ: 'JWT'};
            // Payload
            var oPayload = {};
            var tNow = KJUR.jws.IntDate.get('now');
            var tEnd = KJUR.jws.IntDate.get('now + 1day');
            oPayload.iss = options.clientId;
            oPayload.sub = options.identity;
            oPayload.iat = tNow;
            oPayload.exp = tEnd;
            oPayload.aud = options.aud || "https://idproxy.kore.com/authorize";
            oPayload.isAnonymous = options.isAnonymous || false;
            // Sign JWT
            var sHeader = JSON.stringify(oHeader);
            var sPayload = JSON.stringify(oPayload);
            var sJWT = KJUR.jws.JWS.sign("HS256", sHeader, sPayload, options.clientSecret);
            return sJWT;
            alert(sJWT);
            }


/* commented below lines because already sending JWT in above lines.           
            $.ajax({
                url: options.JWTUrl,
                type: 'post',
                data: jsonData,
                dataType: 'json',
                success: function (data) {
                    options.assertion = data.jwt;
                    options.handleError = koreBot.showError;
                    options.chatHistory = koreBot.chatHistory;
                    options.botDetails = koreBot.botDetails;
                    callback(null, options);
                    setTimeout(function () {
                        if (koreBot && koreBot.initToken) {
                            koreBot.initToken(options);
                        }
                    }, 2000);
                },
                error: function (err) {
                    koreBot.showError(err.responseText);
                }
            });
        }
*/
        var chatConfig=window.KoreSDK.chatConfig;
        chatConfig.botOptions.assertionFn=assertion;
        
        var koreBot = koreBotChat();
        koreBot.show(chatConfig);
        
        $('.openChatWindow').click(function () {
            koreBot.show(chatConfig);
        });
        
    });

})(jQuery || (window.KoreSDK && window.KoreSDK.dependencies && window.KoreSDK.dependencies.jQuery));

Please help.

2

Hi Priyanshu,

We tested the same on Microsoft edge (version 81.0.416.64) and safari (version 13.1)
image
image

The issue is microsoft edge & safari specific. Had it been an SDK issue it would be the same with every browser. The possible issue could be because of the versions of the browsers used.

Here is the link for the list of browsers along with the versions, which are supported by kore.ai

We would like to suggest you to clear the browser cache.

Few browsers have limited support for HTML5/ Advanced JavaScript elements. Due to this, processing of the Java Scripts may be delayed. This ‘may’ lead to Invalid State Error. After cache clearing , any previous client side scripts could have been cleared and issue could have been removed. Initially if the logged in user does not have permission to remove some cache elements, it has to be done through scripts (which generally run as admin). That may explain why you had to use a script to clear cache.

1 Like
3

Hi Sadhvi,

I did some debugging, then this error disappeared. But again I got one more error

TypeError: leftScrollBtn[0] is undefined at chatWindow.js: 719:29

I resolved this error by writing that error line inside if condition.

if(leftScrollBtn[0] !== undefined) {
 
}

Now this error is resolved.

Thanks Sadhvi for help.

4

This issue arises when js/jquery is not able to refer to the element. It is because at the time of rendering the page(view), object is null or undefined - which means that there is no instance of a class in the variable. If you are getting data for object from an async call(api’s), these kind of problems will arise. So you should always check the object whether it is null or undefined then if it is not, you can access its properties.

The standard way to catch null and undefined simultaneously is this:

if (variable == null) {
     // your code here.
}

Because null == undefined is true, the above code will catch both null and undefined.

Also you can write equivalent to more explicit but less concise:

if (variable === undefined  variable === null) {
     // your code here.
}

This should work for any variable that is either undeclared or declared and explicitly set to null or undefined.

In most cases this error is related to getElementById(). So getting a value from an input could look like this:

var value = document.getElementById("frm_new_user_request").value

Also you can use some JavaScript framework, e.g. jQuery, which simplifies operations with DOM (Document Object Model) and also hides differences between various browsers from you.

Getting a value from an input using jQuery would look like this:

input with ID "element": var value = $("#element).value
input with class "element": var value = $(".element).value