0

In twilio programmable chat, I used tokenAboutToExpire event to update the access token. The event triggered perfectly. After that I fetch the new token from API and updated the chatClient with the new token by using updateToken. Once I consoled the chatClient, Inside token and fpaToken were updated. Even sometimes I can send/receive messages after expired also without refreshing the page. If I refreshed the page, It is throwing error like Uncaught (in promise) Error: Can't connect to twilsock

    componentDidMount() {
        const accessToken = this.props.chatUserData.chatAccessToken;
        Chat.create(accessToken)
            .then(this.setupChatClient)
            .catch(this.handleError);
    }

    setupChatClient = client => {
        ...
        ...
        ...

        this.client.on('tokenAboutToExpire', function () {
            thisProps.dispatch(getUserAccessToken(clientEmail, logIn.token)) 
        //api call => when response came, I make 'isChatAccessFetched' as true and update the  'chatAccessToken' in reducer and checking that in componentWillReceiveProps
        });
    }

    componentWillReceiveProps(nextProps) {
       ...
       ...
       ...
       if (nextProps.chatUserData.isChatAccessFetched) {
            this.updateChatAccessToken(this.props.chatUserData.chatClient)
       }
    }

    updateChatAccessToken = chatClient => {
        let chatAccessToken = this.props.chatUserData.chatAccessToken;
        chatClient.updateToken(chatAccessToken)
        this.props.dispatch(updateChatClient(chatClient))
    }
    ...
    ...
    ...

This is my Log,

redux-logger.js:1  action GET_CHAT_ACCESSTOKEN @ 12:37:04.028
redux-logger.js:1  prev state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action     {type: "GET_CHAT_ACCESSTOKEN", value: "chintakindisantosh@gmail.com", token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7I…AyNn0.m8zSDNKHJuSbqhWGTL9A2zt2F4Sd0_oiEDuHHYNjjv4"}
redux-logger.js:1  next state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action CREATE_CHAT_USER @ 12:37:04.036
redux-logger.js:1  prev state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action     {type: "CREATE_CHAT_USER", value: "chintakindisantosh@gmail.com", token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7I…AyNn0.m8zSDNKHJuSbqhWGTL9A2zt2F4Sd0_oiEDuHHYNjjv4"}
redux-logger.js:1  next state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action GET_CHAT_ACCESSTOKEN_SUCCESS @ 12:37:04.842
redux-logger.js:1  prev state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action     {type: "GET_CHAT_ACCESSTOKEN_SUCCESS", accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aW…0OSJ9.WCVa1eQhrz6slr4-UuFxGWBehRRVpYaBEYcasC49BKw", @@redux-saga/SAGA_ACTION: true}
redux-logger.js:1  next state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
3.17.39.166:8090/chat-service/users:1 POST http://3.17.39.166:8090/chat-service/users 409 (Conflict)
redux-logger.js:1  action CREATE_CHAT_USER_FAILURE @ 12:37:05.069
redux-logger.js:1  prev state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action     {type: "CREATE_CHAT_USER_FAILURE", payload: Error: Request failed with status code 409
    at createError (http://localhost:3000/static/js/bund…, @@redux-saga/SAGA_ACTION: true}
redux-logger.js:1  next state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
logger.js:20 2019-11-15T07:07:10.724Z Twilsock T: resetBackoff
logger.js:20 2019-11-15T07:07:10.725Z Twilsock T: finalizeSocket
logger.js:20 2019-11-15T07:07:10.726Z Twilsock T: closing socket
logger.js:18 2019-11-15T07:07:10.729Z Notifications T: Persisting registration Set(1) {"token"} RegistrationState {token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aW…0OSJ9.WCVa1eQhrz6slr4-UuFxGWBehRRVpYaBEYcasC49BKw", notificationId: "", messageTypes: Set(0)}
logger.js:18 2019-11-15T07:07:10.731Z Notifications T: Persisting registration Set(1) {"token"} RegistrationState {token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aW…0OSJ9.WCVa1eQhrz6slr4-UuFxGWBehRRVpYaBEYcasC49BKw", notificationId: "", messageTypes: Set(0)}
logger.js:18 2019-11-15T07:07:10.733Z Notifications T: Persisting registration Set(1) {"token"} RegistrationState {token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aW…0OSJ9.WCVa1eQhrz6slr4-UuFxGWBehRRVpYaBEYcasC49BKw", notificationId: "", messageTypes: Set(0)}
logger.js:20 2019-11-15T07:07:10.735Z Twilsock T: connect
logger.js:21 2019-11-15T07:07:10.736Z Twilsock D: FSM: userConnect: disconnected --> connecting
logger.js:20 2019-11-15T07:07:10.737Z Twilsock T: setupSocket: eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTSzUxZmNlNThmZTU2ODIxZWQzZDU2ZTcyMzBjMWMzOWZmLTE1NzM4MDE2MjciLCJncmFudHMiOnsiaWRlbnRpdHkiOiJjaGludGFraW5kaXNhbnRvc2hAZ21haWwuY29tIiwiY2hhdCI6eyJzZXJ2aWNlX3NpZCI6IklTMGJlZmU3MjIyZWNiNDE5ZWEyZDEyYWM3OTE2NTg3NDMifX0sImlhdCI6MTU3MzgwMTYyNywiZXhwIjoxNTczODAxOTI3LCJpc3MiOiJTSzUxZmNlNThmZTU2ODIxZWQzZDU2ZTcyMzBjMWMzOWZmIiwic3ViIjoiQUNlZjE3MjQyMmUxYjY1NzM4OWJkMjVlZTEzZDkyYzc0OSJ9.WCVa1eQhrz6slr4-UuFxGWBehRRVpYaBEYcasC49BKw
logger.js:20 2019-11-15T07:07:10.739Z Twilsock T: connecting to socket
logger.js:18 2019-11-15T07:07:10.743Z Notifications T: Add subscriptions for message type:  twilio.sync.event twilsock
logger.js:18 2019-11-15T07:07:10.746Z Notifications T: Persisting registration Set(1) {"messageType"} RegistrationState {token: "", notificationId: "", messageTypes: Set(1)}
logger.js:18 2019-11-15T07:07:10.750Z Notifications T: Add subscriptions for message type:  com.twilio.rtd.cds.document twilsock
logger.js:18 2019-11-15T07:07:10.751Z Notifications T: One registration attempt is already in progress
logger.js:18 2019-11-15T07:07:10.752Z Notifications T: Add subscriptions for message type:  com.twilio.rtd.cds.list twilsock
logger.js:18 2019-11-15T07:07:10.754Z Notifications T: One registration attempt is already in progress
logger.js:18 2019-11-15T07:07:10.756Z Notifications T: Add subscriptions for message type:  com.twilio.rtd.cds.map twilsock
logger.js:18 2019-11-15T07:07:10.756Z Notifications T: One registration attempt is already in progress
logger.js:21 2019-11-15T07:07:10.812Z Twilsock D: Emitting stateChanged("connecting")
logger.js:18 2019-11-15T07:07:10.817Z Notifications T: Persisting registration Set(1) {"messageType"} RegistrationState {token: "", notificationId: "", messageTypes: Set(4)}
logger.js:21 2019-11-15T07:07:11.548Z Twilsock D: socket opened wss://tsock.us1.twilio.com/v3/wsconnect
logger.js:21 2019-11-15T07:07:11.549Z Twilsock D: FSM: socketConnected: connecting --> initialising
logger.js:20 2019-11-15T07:07:11.551Z Twilsock T: sendInit
logger.js:20 2019-11-15T07:07:11.552Z Twilsock T: sendInit
logger.js:21 2019-11-15T07:07:11.590Z Twilsock D: send request: TWILSOCK V3.0 1200
{"id":"TMbf3d2813-534e-4260-809b-396d91e2c56c","method":"init","token":"eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aWxpby1mcGE7dj0xIn0.eyJqdGkiOiJTSzUxZmNlNThmZTU2ODIxZWQzZDU2ZTcyMzBjMWMzOWZmLTE1NzM4MDE2MjciLCJncmFudHMiOnsiaWRlbnRpdHkiOiJjaGludGFraW5kaXNhbnRvc2hAZ21haWwuY29tIiwiY2hhdCI6eyJzZXJ2aWNlX3NpZCI6IklTMGJlZmU3MjIyZWNiNDE5ZWEyZDEyYWM3OTE2NTg3NDMifX0sImlhdCI6MTU3MzgwMTYyNywiZXhwIjoxNTczODAxOTI3LCJpc3MiOiJTSzUxZmNlNThmZTU2ODIxZWQzZDU2ZTcyMzBjMWMzOWZmIiwic3ViIjoiQUNlZjE3MjQyMmUxYjY1NzM4OWJkMjVlZTEzZDkyYzc0OSJ9.WCVa1eQhrz6slr4-UuFxGWBehRRVpYaBEYcasC49BKw","continuation_token":"eyJmb3JtYXQiOiJydGQtY3QtMSIsImVuZHBvaW50SWQiOiJ0d2kxLWM4MDcxZTA4ZWMwNjQ3ODNhODcwY2Q5MDFlMDdhZDBiIiwiZ3JhbnRzIjp7ImlkZW50aXR5IjoiY2hpbnRha2luZGlzYW50b3NoQGdtYWlsLmNvbSIsImNoYXQiOnsic2VydmljZV9zaWQiOiJJUzBiZWZlNzIyMmVjYjQxOWVhMmQxMmFjNzkxNjU4NzQzIn0sImlwX21lc3NhZ2luZyI6eyJzZXJ2aWNlX3NpZCI6IklTMGJlZmU3MjIyZWNiNDE5ZWEyZDEyYWM3OTE2NTg3NDMifX19.ijdZgW0wdAVf9PK2Tea1Tk+n5LwAj4rgGAq4/flnjks","metadata":{"ver":"0.5.11","env":"Chrome","envv":"78.0.3904.87","os":"Windows","osv":"10","osa":64,"sdk":"js-default"},"registrations":null,"tweaks":null,"capabilities":["client_update","offline_storage"],"payload_size":0}
...
...
...
logger.js:21 2019-11-15T07:09:04.874Z Twilsock D: message received:  client_update
logger.js:20 2019-11-15T07:09:04.875Z Twilsock T: message received:  {method: "client_update", id: "TM21abaa7d80c6440aa6cb9c18909a0b31", payload_size: 0, client_update_type: "token_about_to_expire", client_update_message: "Your token is about to expire. Time left: less than 240000 ms"}
logger.js:20 2019-11-15T07:09:04.877Z Twilsock T: confirmReceiving
logger.js:21 2019-11-15T07:09:04.879Z Twilsock D: send request: TWILSOCK V3.0 147
{"id":"TM21abaa7d80c6440aa6cb9c18909a0b31","method":"reply","payload_type":"application/json","status":{"code":200,"status":"OK"},"payload_size":0}

logger.js:21 2019-11-15T07:09:04.882Z Twilsock D: Emitting tokenAboutToExpire()
redux-logger.js:1  action GET_CHAT_ACCESSTOKEN @ 12:39:04.883
redux-logger.js:1  prev state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action     {type: "GET_CHAT_ACCESSTOKEN", value: "chintakindisantosh@gmail.com", token: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7I…AyNn0.m8zSDNKHJuSbqhWGTL9A2zt2F4Sd0_oiEDuHHYNjjv4"}
redux-logger.js:1  next state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action GET_CHAT_ACCESSTOKEN_SUCCESS @ 12:39:08.731
redux-logger.js:1  prev state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
redux-logger.js:1  action     {type: "GET_CHAT_ACCESSTOKEN_SUCCESS", accessToken: "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCIsImN0eSI6InR3aW…0OSJ9.aP-ykQEc-uuw_lifUOBbqD6p7ppg82sbkyTocT46pog", @@redux-saga/SAGA_ACTION: true}
redux-logger.js:1  next state {loginReducer: {…}, sidebarReducer: {…}, idReducer: {…}, onboardingReducer: {…}, resetReducer: {…}, …}
logger.js:61 2019-11-15T07:09:08.758Z Chat Client I: updateToken
logger.js:21 2019-11-15T07:09:35.179Z Twilsock D: message received:  ping
logger.js:20 2019-11-15T07:09:35.180Z Twilsock T: message received:  {method: "ping", id: "TMf8b65ac3e250487b85eef8082f42c06b", payload_size: 0}
logger.js:20 2019-11-15T07:09:35.182Z Twilsock T: confirmReceiving
logger.js:21 2019-11-15T07:09:35.183Z Twilsock D: send request: TWILSOCK V3.0 147
{"id":"TMf8b65ac3e250487b85eef8082f42c06b","method":"reply","payload_type":"application/json","status":{"code":200,"status":"OK"},"payload_size":0}
logger.js:61 2019-11-15T07:09:08.758Z Chat Client I: updateToken
logger.js:21 2019-11-15T07:10:05.483Z Twilsock D: message received:  ping
logger.js:20 2019-11-15T07:10:05.484Z Twilsock T: message received:  {method: "ping", id: "TM4d1e6ca82a8145f3b6c2674eeb04f42d", payload_size: 0}
logger.js:20 2019-11-15T07:10:05.485Z Twilsock T: confirmReceiving
logger.js:21 2019-11-15T07:10:05.486Z Twilsock D: send request: TWILSOCK V3.0 147
{"id":"TM4d1e6ca82a8145f3b6c2674eeb04f42d","method":"reply","payload_type":"application/json","status":{"code":200,"status":"OK"},"payload_size":0}

logger.js:21 2019-11-15T07:13:05.239Z Twilsock D: message received:  close
logger.js:20 2019-11-15T07:13:05.240Z Twilsock T: message received:  {method: "close", id: "TMe06ec17095f743f680f52dc0e7b5ba73", payload_size: 0, status: {…}}
logger.js:20 2019-11-15T07:13:05.241Z Twilsock T: confirmReceiving
logger.js:21 2019-11-15T07:13:05.241Z Twilsock D: send request: TWILSOCK V3.0 147
{"id":"TMe06ec17095f743f680f52dc0e7b5ba73","method":"reply","payload_type":"application/json","status":{"code":200,"status":"OK"},"payload_size":0}

backend.js:6 2019-11-15T07:13:05.242Z Twilsock W: Server closed connection: {"code":410,"status":"TOKEN_EXPIRED","description":"Token expired","errorCode":51207}
r @ backend.js:6
warn @ logger.js:23
onIncomingMessage @ twilsock.js:313
(anonymous) @ twilsock.js:46
emit @ events.js:146
socket.onmessage @ websocketchannel.js:31
logger.js:21 2019-11-15T07:13:05.243Z Twilsock D: FSM: receiveClose: connected --> waitSocketClosed
logger.js:20 2019-11-15T07:13:05.244Z Twilsock T: startDisconnectTimer
logger.js:20 2019-11-15T07:13:05.244Z Twilsock T: closing socket
logger.js:21 2019-11-15T07:13:05.245Z Twilsock D: Emitting stateChanged("disconnecting")
logger.js:20 2019-11-15T07:13:05.245Z Notifications I: Transport ready: false
logger.js:21 2019-11-15T07:13:05.247Z Twilsock D: Emitting tokenExpired()
logger.js:21 2019-11-15T07:13:08.245Z Twilsock D: disconnecting is timed out
logger.js:20 2019-11-15T07:13:08.246Z Twilsock T: closeSocket (graceful: true)
logger.js:20 2019-11-15T07:13:08.246Z Twilsock T: closing socket
logger.js:20 2019-11-15T07:13:08.250Z Twilsock T: cancelDisconnectTimer
logger.js:21 2019-11-15T07:13:08.251Z Twilsock D: FSM: socketClosed: waitSocketClosed --> disconnected
logger.js:20 2019-11-15T07:13:08.253Z Twilsock T: resetBackoff
logger.js:20 2019-11-15T07:13:08.255Z Twilsock T: finalizeSocket
logger.js:20 2019-11-15T07:13:08.256Z Twilsock T: closing socket
logger.js:21 2019-11-15T07:13:08.259Z Twilsock D: Emitting stateChanged("disconnected")
logger.js:21 2019-11-15T07:13:08.260Z Twilsock D: Emitting disconnected()

Please help me with this issue. Thanks in advance.

Danielprabhakaran N
  • 530
  • 1
  • 7
  • 16
  • I'm not sure I understand what the problem is? You can update the token successfully and send/receieve messages like this. But if you refresh the page you get an error? Is that error on page load or from the previous page? – philnash Nov 13 '19 at 06:28
  • Thanks @philnash for the reply. I am really confuse with this problem. I am new to twilio integration, I did this based on twilio docs. This error is happen after the token expiry even though I didn't refresh the page. actual proplem is token is not updating properly. something I am missing. Can you help me for this? – Danielprabhakaran N Nov 13 '19 at 07:44
  • So, what you're saying is that when you update the client token you disconnect from the websocket connection? Can you try that again with [the client set to debug](http://media.twiliocdn.com/sdk/js/chat/releases/3.3.1/docs/Client.html#ClientOptions__anchor) and share the log? – philnash Nov 14 '19 at 00:17
  • I updated the logs in question itself @philnash. I can't update all because the body limit. If I need to share more I will share again. – Danielprabhakaran N Nov 15 '19 at 07:51
  • It looks like you are receiving a 409 response from your own application when you try to fetch the token. You might need to look into that. – philnash Nov 15 '19 at 12:23
  • That is for create user @philnash. If new user it will create a user in twilio, if user exist it will return 409 response. For token I am getting token from back end. – Danielprabhakaran N Nov 18 '19 at 08:00
  • Is there any caching going on with your token endpoint? It looks like the token that you're updating the client with continues to emit expiring token events. – philnash Nov 19 '19 at 22:35
  • When `tokenAboutToExpire` emit, I get the token from API and store that into redux-persist store then I use that token in `updateToken`. Is there any other option to get the new access token. – Danielprabhakaran N Nov 20 '19 at 07:11
  • Is there any caching on the API to return your token? If you’re returning an out of date token then it’s not going to work. – philnash Nov 20 '19 at 13:40
  • I will check that again @philnash. – Danielprabhakaran N Nov 21 '19 at 18:39

0 Answers0