Chatbot widget not visible - "Failed to load resource: net::ERR_TIMED_OUT"

We have a RASA chatbot deployed on production server and are using rasa-webchat as frontend for user interaction. It has been running fine for almost an year, but since last couple of months, as the footfall has increased, the widget seems to become invisible from the webpage. The problem seems to be more severe during working hours (9 AM to 5 PM). While inspecting the webpage, the following error is seen:

Failed to load resource: net::ERR_TIMED_OUT
webchat.js:48 Error: xhr poll error
    at c.i.onError (webchat.js:33)
    at l.<anonymous> (webchat.js:48)
    at l.r.emit (webchat.js:6)
    at l.onError (webchat.js:48)
    at webchat.js:48
ApprovalCenter.js:225 getTelephoneBroadbandData

Has anyone encountered similar issue? We have been trying to debug this issue for a month now and there seems to be no clue whatsoever… Any help would be appreciated!

@ank3763 can you share the rasa --version and rasawebchat snippet code?

Rasa version - 1.8 Webchat code :

@ank3763 Hello, Ankur thanks for the share. As I can see you are using rasa version 1.8 and even rasa-webchat code is also updated, can you follow my steps and update this code?

<script>!(function () {
  let e = document.createElement("script"),
    t = document.head || document.getElementsByTagName("head")[0];
  (e.src =
    "https://cdn.jsdelivr.net/npm/[email protected]/lib/index.js"),
    // Replace 1.x.x with the version that you want
    (e.async = !0),
    (e.onload = () => {
      window.WebChat.default(
        {
          customData: { language: "en" },
          socketUrl: "https://",
          socketPath: "/socket.io/",
          // add other props here
        },
        null
      );
    }),
    t.insertBefore(e, t.firstChild);
})();
</script>

Note: For rasa version 1.8 or less than 2.3.x you will use 1.0.0 and above that you need to use 1.0.1

Tip: Just copy other field same as you mentioned in the above code, but follow the mentioned code.

I hope this will solve your issue and you can able to see the bot again. Good Luck!

Hi @nik202 , I tried your solution and updated the widget, but still getting the same error:

`

Failed to load resource: net::ERR_TIMED_OUT

`

@ank3763 share rasa version whilst running on conda environment ( rasa --version) and also share the dwebchat snippet code ( updated after suggestion/ solution )

RASA Version - 1.8.0

Updated code:

@nik202 I also have replaced the webchat.js file with the one you have shared.

@ank3763 please share the full snippet code, with version and cdn. @ank3763 share credentials.yml file too.

image credentials.yml

The chatbot is deployed on linux machine…What do you mean by cdn?

@ank3763 What is this, just copy and paste please.???

@ank3763 I mean the complete code, I want to check the version which you had mentioned.

@ank3763

In credentials.yml

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

var _spPageContextInfo={“webAbsoluteUrl”:“https://” } //Chat Bot $(document).ready(function(){ sessionStorage.clear(); $(“body”).on(‘DOMSubtreeModified’, “.messages-container”, function() { $(".messages-container").stop().animate({ scrollTop: $(".messages-container")[0].scrollHeight}, 1000); }); /* var userEmail = “”; var BU = “”; var allowedBU = [“IT Services”, “Smart Automation and Services”, “Human Resource”, “Public Solutions”, “Digital PF”, “Next Gen Connectivity PF”, “Enterprise Solutions”, “Retail”, “NMEC”]; $.ajax({
//url: “https:///_api/SP.UserProfiles.PeopleManager/GetMyProperties”,
url: _spPageContextInfo.webAbsoluteUrl + “/_api/SP.UserProfiles.PeopleManager/GetMyProperties”, headers: { Accept: “application/json;odata=verbose” },
success: function(data) {
userEmail = data.d.Email; var properties = data.d.UserProfileProperties.results;

         for (var i = 0; i < properties.length; i++) {  
                var property = properties[i];
  			if (property.Key === "Department") {
  				BU = property.Value;
  			}
         }
         if(allowedBU.indexOf(BU) != -1){
         ) {
         	console.log(data.d);
         	console.log(BU);
         } else {
         	// if BU is not present for logged in user
         	$("#webchat").hide();
         	console.log("not success");
         	
         }
           
    }, error: function(data) {
    	$("#webchat").hide();
    	//console.log(data);
    }
});		

*/

var timeDiff = "";
    var userRespondedAlready = false;
    var Employeeid = "";
    var displayName = "";

    $.ajax({

        url: _spPageContextInfo.webAbsoluteUrl + "/_api/SP.UserProfiles.PeopleManager/GetMyProperties",
        headers: { Accept: "application/json;odata=verbose" },
        success: function (data) {
           try {
                //Get properties from user profile Json response  
                userDisplayName = data.d.DisplayName;
                AccountName = data.d.AccountName;
                var properties = data.d.UserProfileProperties.results;
                for (var i = 0; i < properties.length; i++) {

                    var property = properties[i];

                    if (property.Key == "PreferredName") {
                        displayName = property.Value;
                        //alert(Title);  
                    }
                    if (property.Key == "Employeeid") {
                        Employeeid = property.Value;
                        //alert(EmployeeID);
                    }
                }
                $('#displayName').text(displayName);
                $('#Employeeid').text(Employeeid);
                 /*setTimeout(function() {
                	if(sessionStorage.getItem('chat_session')) {
  					let chat_session = JSON.parse(sessionStorage.getItem('chat_session'));
  					chat_session.conversation = [
  					{
  						"sender": "response",
  						"showAvatar": true,
  						"text": "Hello "+ displayName +". What can I do for you ?",
  						"timestamp": new Date().getTime(),
  						"type": "text"
  					}];
  					sessionStorage.setItem('chat_session', JSON.stringify(chat_session));
  						
  				}

                }, 2500);*/

window.WebChat.default(
  					{
  					  selector: "#webchat",
  					  customData: { language: "en" },
  					  initPayload: "/get_started",
  					  customData: { "empId": Employeeid, "displayName": displayName },
  					  socketUrl: "https://",
  					  socketPath: "/socket.io/",
  					  title: "geNius",
  					  inputTextFieldHint: "Type a message...",
  					  connectingText: "Waiting for server...",
  					  hideWhenNotConnected: true,
  					  fullScreenMode: false,
  					  showFullScreenButton: true,
  					  tooltip: true,
  					  profileAvatar: "https://",
                          openLauncherImage: '',
                          closeLauncherImage: '',
                          displayUnreadCount: true, // --> [view](./assets/unread_count_pastille.png)
  					  showMessageDate: true,
  					  customMessageDelay: function (message) {
  						if (message.length > 100) return 2000;
  						return 1000;
  					  },
  					},
  					null
  				  );

                       } catch (err2) {
                //alert(JSON.stringify(err2));  
                console.log("Failed to fetch data");
            }
        },
        error: function (jQxhr, errorCode, errorThrown) {
            //alert(errorThrown);  
            console.log("Failed to fetch data");
        }
    });

});

@ank3763 you using Ajax or Rasawebchat? While using rasa-dwebchat its only a basic snippet code and you can able to render on website.

@nik202 do you know how many concurrent socket connections can RASA handle? Currently we have deployed chatbot on our internal company website. Now, that website is open on approx 500+ users during office hours and that many socket connections are established (even though users are not using the chatbot) on the RASA backend due to which this issue of “ERR_TIMED_OUT” is coming up…

@ank3763 good to know what you saying, but in your initial topic its mention “Chatbot widget not visible” and now you saying its related to socket ? What is your actual issue? is you chatbot is visible now and you able to chat with your bot?

Issue is the same. The widget is invisible during working hours as there are multiple users simultaneously making connections to the RASA backend, although they are actually not using the chatbot. Since the CB is deployed on company’s website and multiple users have that website open on browser every time, a connection with RASA chatbot is also automatically created because of that. Is it possible that till the time the user actually opens up the chatbot widget, the socket connection is not made. In this way we can limit the number of socket connections are being created.

Also, do you know how many simultaneous socket connections can the RASA handle?

@ank3763 Please check this thread post : Rasa server 500 concurrent users

What do you mean by this, not get you?

Q: What is the advantage of having a chatbot if not active on working time?

This is the nature of the traffic hit/per second coming on your website and your bot is also deployed on the website, so as users come it is by default making the connection to the chatbot and to the server.

By this what you will archive?

For your reference, but apart from how much rasa server can handle you check this thread for socket io : javascript - How many events can socket.io handle? - Stack Overflow

I will get in touch with rasa team for more detail.