Receiving custom response invokes TypeError in Widget

[M1sterShad0w]

I want to create a custom component for handling custom responses that comes in from rasa/botfront but it seems that whenever a custom response comes in, the widget tries to parse it and throws an Uncaught TypeError: can't access property "metadata", e is null or something similar.

It doesn't matter whether I use the widget in a <script> tag or as a react component and whether I actually declare a custom component to handle custom responses or not. The problem is that if I actually use a custom component, the program crashes since the error repeats in an infinite loop - which means that I basically can't handle custom messages.

Since I cannot actually trace the original problem, below is the full stack trace (if it may be of any help - since the code is minified) and the JSON of the response as is shown in the botfront responses:

Stack Trace

Uncaught TypeError: can't access property "metadata", t is null
    value index.js:91
    value index.js:91
    emit index.js:1
    onevent index.js:14
    onpacket index.js:14
    exports index.js:14
    emit index.js:1
    ondecoded index.js:14
    exports index.js:14
    emit index.js:1
    add index.js:7
    ondata index.js:14
    exports index.js:14
    emit index.js:1
    onPacket index.js:89
    setTransport index.js:89
    emit index.js:1
    onPacket index.js:14
    onData index.js:14
    onmessage index.js:91
    addEventListeners index.js:91
    doOpen index.js:91
    open index.js:14
    probe index.js:89
    onOpen index.js:89
    onHandshake index.js:89
    onPacket index.js:89
    setTransport index.js:89
    emit index.js:1
    onPacket index.js:14
    onData index.js:14
    decodePayloadAsBinary index.js:1
    decodePayloadAsBinary index.js:1
    decodePayload index.js:1
    onData index.js:14
    doPoll index.js:89
    emit index.js:1
    onData index.js:89
    onLoad index.js:89
    onreadystatechange index.js:89
    create index.js:89
    l index.js:89
    request index.js:89
    doPoll index.js:89
    poll index.js:14
    doOpen index.js:14
    open index.js:14
    open index.js:89
    l index.js:89
    l index.js:89
    connect index.js:14
    h index.js:14
    h index.js:14
    c index.js:14
    socketio index.js:91
    socket index.js:91
    value index.js:91
    value index.js:91
    value index.js:91
    React 6
        commitLifeCycles
        commitLayoutEffects
        callCallback
        invokeGuardedCallbackDev
        invokeGuardedCallback
        commitRootImpl
    unstable_runWithPriority scheduler.development.js:653
    React 10
        runWithPriority$1
        commitRoot
        finishSyncRender
        performSyncWorkOnRoot
        scheduleUpdateOnFiber
        updateContainer
        legacyRenderSubtreeIntoContainer
        unbatchedUpdates
        legacyRenderSubtreeIntoContainer
        render
    js index.js:39
    Webpack 7
        __webpack_require__
        fn
        1
        __webpack_require__
        checkDeferredModules
        webpackJsonpCallback
        <anonymous>
index.js:91

JSON Response

{
  "event": "bot",
  "timestamp": 1591998655.9789407,
  "text": null,
  "data": {
    "elements": null,
    "quick_replies": null,
    "buttons": null,
    "attachment": null,
    "image": null,
    "custom": {
      "src": "personal_info.birth_date.mp4",
      "room": "c2de63694b39453a9b21bb6bb2480de1"
    }
  },
  "metadata": {}
}

Edit: After a brief investigation it seems that this line is what causes the problem - as for some reason botUtterance is null or undefined and thus it cannot access its metadata, throwing the above error.

[MatthieuJnon]

Hi, I'm currently looking into your issue, are you using Botfront to create your bot ? ANd are you using the custom response type of Botfront ?
Where did you get your JSON response from ?
Thank you

[M1sterShad0w]

Yes, I am using Botfront to create the bot, and I'm using the custom response type that I've assigned to the intent, which contains the following:

custom:
  src: personal_info.birth_date.mp4

I got the JSON response from viewing it in the Conversation tab that is inside of the Incoming panel (Using the </> button).

Thank you for looking into it!

[OllieF]

Hi @MatthieuJnon, has been an update on this? I am running into the same issue though using Rasa directly and sending custom responses to the client i.e.:

domain.yml

responses:
  utter_greet:
  - text: "Hey! How are you?"
    custom:
      key: "value"

Thank you!

[mdaqshahab]

Try this

responses:
utter_greet:
- custom:
text: "Hey! How are you?"
key: "value"

[Kelmat-ai]

Any news on this guys? Has it been solved?

[i-love-doufunao]

Any updates for this issue? I have met a similar issue too. @mdaqshahab @MatthieuJnon
I receive the errors after sending 'hello' to rasa server.
Uncaught TypeError: Cannot read property 'metadata' of undefined at s.value (index.js:123) at t.Socket.<anonymous> (index.js:123) at t.Socket.r.emit (index.js:1) at t.Socket.emitEvent (index.js:17) at t.Socket.onevent (index.js:17) at t.Socket.onpacket (index.js:17) at t.Manager.r.emit (index.js:1) at t.Manager.ondecoded (index.js:17) at c.r.emit (index.js:1) at c.add (index.js:12)

[Kelmat-ai]

It took me a while, but you have to wrap the custom message(s) you send to the Rasa server in metadata, like so:
message={}
message['data'] = {
"text": title,
"key:" value,
}

[i-love-doufunao]

It took me a while, but you have to wrap the custom message(s) you send to the Rasa server in metadata, like so:
message={}
message['data'] = {
"text": title,
"key:" value,
}

Sorry I don't understand what's your meaning,I just add below code between <body> and <\body> of index.html:

<script>!(function () { let e = document.createElement("script"), t = document.head || document.getElementsByTagName("head")[0]; (e.src = "https://cdn.jsdelivr.net/npm/rasa-webchat@1.x.x/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: "http://localhost:5005", // add other props here }, null ); }), t.insertBefore(e, t.firstChild); })(); </script>

and the config of response in rasa:
responses:
utter_greet:
- custom:
type: 'text'
content: "Hey! How are you?"

Is there any problem?

[bdubey]

Ran into this. Any update?