Websocket unreliable / disconnecting in browser - xhr post error?

Rasa Open Source
1

I’m having some problems connecting rasa-webchat to my rasa-service.

The websocket connection from the browser seems unreliable, sometimes it won’t connect, sometimes it does. Sometimes it disconnects. I’m running out of ideas on troubleshooting.

I’m running Rasa: 2.7.1 and it is available locally at rasa.demo.local

I think this is an error, but there’s a chance it’s my config so I’ve included my key files below

The browser logs show errors a few times (xhr post error), before it eventually connects. It later disconnects again:

rasa.demo.local/socket.io/?EIO=4&transport=polling&t=Ng1Kx0l&sid=WvShKAKJWFdqtli8AAK5:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
index.js:123 Error: xhr post error
    at e.exports.onError (index.js:12)
    at f.<anonymous> (index.js:116)
    at f.r.emit (index.js:1)
    at f.onError (index.js:116)
    at index.js:116
index.js:123 transport error
index.js:123 transport error
index.js:116 WebSocket connection to 'ws://rasa.demo.local/socket.io/?EIO=4&transport=websocket&sid=WvShKAKJWFdqtli8AAK5' failed: WebSocket is closed before the connection is established.
doClose @ index.js:116
close @ index.js:12
a @ index.js:116
s @ index.js:116
l @ index.js:116
n @ index.js:1
r.emit @ index.js:1
onClose @ index.js:116
onError @ index.js:116
(anonymous) @ index.js:116
r.emit @ index.js:1
onError @ index.js:12
(anonymous) @ index.js:116
r.emit @ index.js:1
onError @ index.js:116
(anonymous) @ index.js:116
rasa.demo.local/socket.io/?EIO=4&transport=polling&t=Ng1Kx0q&sid=WvShKAKJWFdqtli8AAK5:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
rasa.demo.local/socket.io/?EIO=4&transport=polling&t=Ng1Kx1b&sid=WvShKAKJWFdqtli8AAK5:1 Failed to load resource: the server responded with a status of 400 (Bad Request)
index.js:123 connect:Kr9cIbfyKKtqYXU4AAK7
index.js:123 session_confirm:Kr9cIbfyKKtqYXU4AAK7 session_id:8b89d081de444acc9cccd6c3991ceda1
index.js:123 sending init payload 8b89d081de444acc9cccd6c3991ceda1

The key config files are:

credentials.yml

rest:

socketio:
  user_message_evt: user_uttered
  bot_message_evt: bot_uttered
  session_persistence: true

index.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Demo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="shortcut icon" type="image/x-icon" href="static/imgs/favicon.ico"/>
    <link rel="stylesheet" href="static/style/theme.css" />
    <meta name="description" content="demo version ">
  </head>
  <body>
    <link rel="stylesheet" href="static/style/theme.css" />
    <div id="webchat"/>
    <script>!(function () {
      let e = document.createElement("script"),
        t = document.head || document.getElementsByTagName("head")[0];
      (e.src =
        "https://cdn.jsdelivr.net/npm/rasa-webchat@1.0.1/lib/index.js"),
        // Replace 1.x.x with the version that you want
        (e.async = !0),
        (e.onload = () => {
          window.WebChat.default(
            {
                selector: "#webchat",
                initPayload: "/greet",
                interval: 100, // 1000 ms between each message
                customData: {"userId": "123", "language": "en"  }, 
                socketUrl: "http://rasa.demo.local",
                socketPath: "/socket.io/",
                title: "",
                subtitle: "",
                inputTextFieldHint: "Type a message...",
                connectingText: "Waiting for server...",
                hideWhenNotConnected: false,
                fullScreenMode: true,
                showFullScreenButton: true,
                showMessageDate: true,
                profileAvatar: "/static/imgs/favicon.ico",
                openLauncherImage: "/static/imgs/favicon.ico",
                closeLauncherImage: 'myCustomCloseImage.png',
                params: {
                  storage: "session"
                }
            },
            null
          );
        }),
        t.insertBefore(e, t.firstChild);
    })();
    </script>
  </body>
</html>

ingress.yaml

apiVersion: networking.k8s.io/v1
kind: Ingress
metadata:
  name: ingress
  namespace: {{ .Values.namespace }}
  annotations:
    nginx.ingress.kubernetes.io/rewrite-target: /
    nginx.ingress.kubernetes.io/proxy-read-timeout: "3600"
    nginx.ingress.kubernetes.io/proxy-send-timeout: "3600"
    nginx.ingress.kubernetes.io/affinity: "cookie"
    nginx.ingress.kubernetes.io/session-cookie-name: "route"
    nginx.ingress.kubernetes.io/session-cookie-expires: "172800"
    nginx.ingress.kubernetes.io/session-cookie-max-age: "172800"
spec:
  rules:
  - host: "rasa.demo.local"
    http:
      paths:
        - path: /
          pathType: Prefix
          backend:
            service:
              name: rasa-svc
              port: 
                number: 5005