Unable to successfully startChat()

[maurice-baez]

Hello -

I'm trying to connect to my chat widget via the Omnichannel SDK but running into an issue when starting the chat.

• I'm able to create a new chat sdk ( const chatSDK = new OmnichannelChatSDK(omnichannelConfig);)
• I'm able top successfully initialize (chatSDK.initialize()`)
• It always fails on chatsSDK.startChat() with the error: ChatSDKError {message: 'MessagingClientConversationJoinFailure', httpResponseStatusCode: undefined} - the error happens here:

      try {
        await chatSDK?.startChat(optionalParams);
      } catch (error) {
        console.log(`ERROR=====`, error);
        return;
      }

• This is as far it gets each time:
• 
• I've configured the Omnichannel chat widget already and am able to connect using your sandbox site: https://vvfog.csb.app/?orgId=377900dc-f492-ee11-8172-000d3a37e601&orgUrl=https://unq377900dcf492ee118172000d3a37e-crm.omnichannelengagementhub.com&widgetId=19441e61-d483-45e1-9d6a-f4dc6500b93a
• I essentially used the exact same code from the demo site sandbox to implement within my application

Specs:

• Using "@microsoft/omnichannel-chat-sdk": "^1.8.1-main.e44745c", (also tried v1.5.5 (the same being used in the demo site)
• The rest of my package.json:

"dependencies": {
    "@babel/polyfill": "7.4.3",
    "@dmi/shared": "0.0.1",
    "@material-ui/core": "4.11.0",
    "@material-ui/icons": "4.9.1",
    "@material-ui/lab": "4.0.0-alpha.58",
    "@microsoft/omnichannel-chat-sdk": "^1.8.1-main.e44745c",
    "chalk": "2.4.2",
    "compression": "1.7.4",
    "connected-react-router": "6.8.0",
    "cross-env": "5.2.0",
    "dotenv": "6.1.0",
    "fontfaceobserver": "2.1.0",
    "history": "4.9.0",
    "hoist-non-react-statics": "3.3.0",
    "immer": "7.0.8",
    "inquirer-recursive": "0.0.6",
    "intl": "1.2.5",
    "invariant": "2.2.4",
    "jss": "10.0.4",
    "koa-webpack-middleware": "1.0.7",
    "loadable-components": "2.2.3",
    "lodash": "4.17.20",
    "lottie-web": "5.7.6",
    "prop-types": "15.7.2",
    "react": "16.13.1",
    "react-dates": "21.8.0",
    "react-dnd": "7.0.2",
    "react-dnd-html5-backend": "7.0.2",
    "react-dom": "16.11.0",
    "react-dropzone": "12.0.4",
    "react-feather": "^2.0.10",
    "react-google-recaptcha": "2.1.0",
    "react-helmet": "6.1.0",
    "react-idle-timer": "4.6.4",
    "react-intl": "2.8.0",
    "react-loader-spinner": "^6.1.6",
    "react-redux": "7.2.1",
    "react-router-dom": "5.2.0",
    "redux": "4.0.5",
    "redux-saga": "1.1.3",
    "reselect": "4.0.0",
    "sanitize.css": "8.0.0",
    "styled-components": "5.1.1",
    "victory": "36.2.0",
    "warning": "4.0.2"
  },
  "devDependencies": {
    "@babel/cli": "7.4.3",
    "@babel/core": "7.4.3",
    "@babel/plugin-proposal-function-bind": "7.2.0",
    "@babel/plugin-syntax-dynamic-import": "7.2.0",
    "@babel/plugin-transform-modules-commonjs": "7.4.3",
    "@babel/plugin-transform-react-constant-elements": "7.2.0",
    "@babel/plugin-transform-react-inline-elements": "7.2.0",
    "@babel/preset-env": "7.24.4",
    "@babel/preset-react": "7.0.0",
    "@babel/register": "7.4.0",
    "@svgr/webpack": "5.4.0",
    "@testing-library/dom": "6.12.2",
    "add-asset-html-webpack-plugin": "3.1.3",
    "babel-eslint": "10.0.1",
    "babel-loader": "8.0.5",
    "babel-plugin-dynamic-import-node": "2.2.0",
    "babel-plugin-lodash": "3.3.4",
    "babel-plugin-react-intl": "3.0.1",
    "babel-plugin-react-transform": "3.0.0",
    "babel-plugin-styled-components": "1.10.0",
    "babel-plugin-transform-react-remove-prop-types": "0.4.24",
    "circular-dependency-plugin": "5.0.2",
    "compare-versions": "3.4.0",
    "compression-webpack-plugin": "2.0.0",
    "coveralls": "3.0.3",
    "css-loader": "2.1.1",
    "eslint": "5.16.0",
    "eslint-config-airbnb": "17.1.0",
    "eslint-config-airbnb-base": "13.1.0",
    "eslint-config-prettier": "4.1.0",
    "eslint-import-resolver-webpack": "0.11.1",
    "eslint-plugin-import": "2.17.2",
    "eslint-plugin-jsx-a11y": "6.2.1",
    "eslint-plugin-prettier": "3.0.1",
    "eslint-plugin-react": "7.12.4",
    "eslint-plugin-react-hooks": "1.6.0",
    "eslint-plugin-redux-saga": "1.0.0",
    "file-loader": "3.0.1",
    "html-loader": "0.5.5",
    "html-webpack-plugin": "3.2.0",
    "image-webpack-loader": "4.6.0",
    "imports-loader": "0.8.0",
    "jest-cli": "24.7.1",
    "jest-dom": "3.1.3",
    "jest-styled-components": "6.3.1",
    "lint-staged": "8.1.5",
    "node-plop": "0.18.0",
    "null-loader": "0.1.1",
    "offline-plugin": "5.0.6",
    "plop": "2.3.0",
    "pre-commit": "1.2.2",
    "prettier": "1.17.0",
    "react-app-polyfill": "0.2.2",
    "react-test-context-provider": "2.2.0",
    "react-test-renderer": "16.8.6",
    "react-testing-library": "6.1.2",
    "rimraf": "2.6.3",
    "shelljs": "0.8.3",
    "style-loader": "0.23.1",
    "stylelint": "10.0.1",
    "stylelint-config-recommended": "2.2.0",
    "stylelint-config-styled-components": "0.1.1",
    "stylelint-processor-styled-components": "1.6.0",
    "terser-webpack-plugin": "1.2.3",
    "url-loader": "1.1.2",
    "webpack": "4.47.0",
    "webpack-cli": "3.3.0",
    "webpack-dev-middleware": "3.6.2",
    "webpack-dev-server": "3.11.0",
    "webpack-hot-middleware": "2.24.3",
    "whatwg-fetch": "3.0.0"
  }

• My widget details:

  const omnichannelConfig = {
    orgId: '377900dc-f492-ee11-8172-000d3a37e601',
    orgUrl: 'https://unq377900dcf492ee118172000d3a37e-crm.omnichannelengagementhub.com',
    widgetId: '19441e61-d483-45e1-9d6a-f4dc6500b93a',
  };

Help would be greatly appreciated, please let me know if there's any other info needed. Thank you.

[maurice-baez]

@xTEddie Would you be able to assist here?

[maurice-baez]

@xTEddie adding some more context -

-adding .setDebug(true) for more robust logging reveals something interesting -

The first image, shows browser logs up to the point where the chat errors out, the second image shows browsers logs indicating a successful session init/getChatToken, which occurs AFTER the chat has failed on the MessagingClientConversationJoinFailure
To me, it seems like it makes sense that it would not be able to create a conversation without a chat token/session, but why this timing issue is occurring is not clear. Like I mentioned earlier, I'm using essentially the exact same code as posted on the sandbox site, so why it would work there and not locally within my app doesn't make sense to me. Again, any help would be appreciated.

[pavan-kumar-js]

@maurice-baez Is it only happening locally? I've tried it via a localhost server, haven't tried it by deploying it. Any more insights into that?

[maurice-baez]

@pavan-kumar-js - happening for me both locally and in a deployed environment.

[ezeamalukamsiyo]

@pavan-kumar-js - happening to me also using NODE JS