Search code examples
azure-active-directorybotframeworkazure-web-app-servicechatbotdirect-line-botframework

Directline activities in custom domain - 502 Bad gateway - node js/java script - azure chatbot

I have deployed the azure app service in my custom domain say test.com due to internal company restrictions. So when i try to access the chatbot after deployment through directline i see 502 bad gateway error

customChatbot.html

<!DOCTYPE html>
<html>
   <body>
      <div id="webchat" role="main"></div>
      <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
      <script>
      
            const styleOptions = {
            bubbleBackground: '#E5E8E8',
            bubbleFromUserBackground: '#D9EDF9',
            hideUploadButton: true,
            sendBoxTextWrap: true
        };

        const store = window.WebChat.createStore({}, function (_ref) {
            var dispatch = _ref.dispatch;
            return function (next) {
                return function (action) {
                    if (action.type === 'DIRECT_LINE/CONNECT_FULFILLED') {
                            console.log("inside conversation history");
                            dispatch({
                                type: 'WEB_CHAT/SEND_EVENT',
                                payload: {
                                    name: 'conversationHistory',
                                    value: { id: 'me', name: '[email protected]' },

                                }
                            });
                            }
                    return next(action);
                }

            }


        });

         window.WebChat.renderWebChat(
            {
               directLine: window.WebChat.createDirectLine({
                  token: 'XXXXXXXXXXXXXXXXXXXXXXXXX'
               }),
               userID: '[email protected]',
               bot: { id: 'hpusstoredevbot' },
               username: 'Sivakumar Kandasamy',
               locale: 'en-US',
               botAvatarInitials: 'WC',
               userAvatarInitials: 'WW',
               store: store,
               styleOptions: styleOptions
            },
            document.getElementById('webchat')
         );
      </script>
   </body>
</html>

enter image description here

RESPONSE { "error": { "code": "BotError", "message": "Failed to send activity: bot returned an error" } }

Request Header

enter image description here

I have Azure AD enabled for this application but im not sure how to integrate it with direct line or how it works with direct line. I understand that directline needs a secret/token but in order to enter a custom domain it might need some authentication but how to achieve this with directline? is this an issue with authentication? Can someone give me pointers on this. Im using node js.

Exception that i see in application insights

Message POST to devbot failed: An error occurred while sending the request. An error occurred while sending the request. The remote name could not be resolved: 'devbot.corp.xxcloud.net' Exception type : System.Net.WebException Failed method : System.Net.HttpWebRequest.EndGetRequestStream
Custom Properties Conversation ID XXXXXXX-c
Correlation ID |XXXXXXX
Activity Type conversationUpdate
Bot Endpoint https://devbot.corp.xxcloud.net/api/messages
Recipient ID devbot@NWGv3oCIAyXMXX
Activity ID JiR6p5WTnLOXXX
Channel ID directline
From ID XXXXXXX-c
Bot ID devbot
Background |XXXXXXX

Microsoft.Bot.Schema.BotException:
   at Microsoft.Bot.ChannelConnector.BotAPI+<PostActivityToBotAsync>d__36.MoveNext (Microsoft.Bot.Base.ChannelConnector, Version=3.2.3.11, Culture=neutral, PublicKeyToken=nullMicrosoft.Bot.Base.ChannelConnector, Version=3.2.3.11, Culture=neutral, PublicKeyToken=null: D:\a\1\s\ChannelSDK\Microsoft.Bot.Base.ChannelConnector\API\BotAPI.csMicrosoft.Bot.Base.ChannelConnector, Version=3.2.3.11, Culture=neutral, PublicKeyToken=null: 480)
Inner exception System.Net.Http.HttpRequestException handled at Microsoft.Bot.ChannelConnector.BotAPI+<PostActivityToBotAsync>d__36.MoveNext:
   at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw (mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089)
   at System.Runtime.CompilerServices.TaskAwaiter.HandleNonSuccessAndDebuggerNotification (mscorlib, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089)
   at Microsoft.Bot.ChannelConnector.BotAPI+<PostActivityToBotAsync>d__36.MoveNext (Microsoft.Bot.Base.ChannelConnector, Version=3.2.3.11, Culture=neutral, PublicKeyToken=nullMicrosoft.Bot.Base.ChannelConnector, Version=3.2.3.11, Culture=neutral, PublicKeyToken=null: D:\a\1\s\ChannelSDK\Microsoft.Bot.Base.ChannelConnector\API\BotAPI.csMicrosoft.Bot.Base.ChannelConnector, Version=3.2.3.11, Culture=neutral, PublicKeyToken=null: 452)
Inner exception System.Net.WebException handled at System.Runtime.ExceptionServices.ExceptionDispatchInfo.Throw:
   at System.Net.HttpWebRequest.EndGetRequestStream (System, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b77a5c561934e089)
   at System.Net.Http.HttpClientHandler.GetRequestStreamCallback (System.Net.Http, Version=4.0.0.0, Culture=neutral, PublicKeyToken=b03f5f7f11d50a3a)
Solution

  • Issue was our node js SDK. Our SDK was V3. According to microsoft team, you can access a bot inside ILB ASE internally only when your node js SDK is of version V4 or higher (using direct line app service extension). This is strange but it happens only with node js but not with .NET . .NET sdk can still access the service withing ILB ASE internally for sdk V3.They are yet to publish this on their documentation. Since the issue is only with accessing it internally within our premises So we are accessing the bot using application gateway with public dns