Freshchat your_first_app template breaks on first run

App Platform
, , , ,
1

Hi all,

I encountered an issue when trying to test my custom Freschat front-end app, which I’ve now found can be recreated with the original freshchat your_first_app template without any modifications.

I’ve created a brand new app using fdk create --product freshchat --template your_first_app.

Without any changes at all, I do fdk run and load the chat interface with the dev flag: https://ourdomain.freshworks.com/crm/messaging/a/783184055177877/inbox/0/0/conversation/893426714442050?dev=true

I immediately get the following error:

Starting local testing server at http://*:10001/
Append 'dev=true' to your Freshchat account URL to start testing
e.g. https://web.freshchat.com/a/230117337757345/inbox/3/0/conversation/233020826993979?dev=true
Quit the server with Control-C.
TypeError: Cannot read properties of undefined (reading 'location')
    at addScopeToURLs (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:110:53)
    at iframeAPIHandler (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:171:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
undefined
Uncaught exception thrown: Cannot read properties of undefined (reading 'location')
Stack Trace: TypeError: Cannot read properties of undefined (reading 'location')
    at addScopeToURLs (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:110:53)
    at iframeAPIHandler (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:171:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

I did some debugging in the iframeAPIHandler and it seems to be looping over the productName string “freshchat” char by char, so it’s breaking when trying to find “f” in my manifest’s product list (the line numbers in the logging above are slightly out of sync because of my debug statements).

Is there something wrong with the freshchat my_first_app template? Or might this be a bug in fdk?

I patched this as a workaround for testing locally but my app isn’t working when deployed to the developer console for testing - I wonder whether this is the root cause.

FDK version is 9.3.0

2

I did a fresh install of fdk just to be sure that my debugging wasn’t a factor, and I get the same error. Here’s the stacktrace with the correct line numbers from un-altered version of fdk:

$ fdk run
Please ensure that the following are addressed for quick review process:
⚠ app/scripts/app.js::5: 'onInit' is never reassigned. Use 'const' instead.
⚠ app/scripts/app.js::17: 'textElement' is never reassigned. Use 'const' instead.

Starting local testing server at http://*:10001/
Append 'dev=true' to your Freshchat account URL to start testing
e.g. https://web.freshchat.com/a/230117337757345/inbox/3/0/conversation/233020826993979?dev=true
Quit the server with Control-C.
TypeError: Cannot read properties of undefined (reading 'location')
    at addScopeToURLs (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:107:53)
    at iframeAPIHandler (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:150:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
undefined
Uncaught exception thrown: Cannot read properties of undefined (reading 'location')
Stack Trace: TypeError: Cannot read properties of undefined (reading 'location')
    at addScopeToURLs (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:107:53)
    at iframeAPIHandler (/usr/local/Cellar/fdk/64/custom_node_location/lib/node_modules/fdk/lib/routes/iframe.js:150:14)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)

Here are two past reports of the same issue:

3

Hi FW team, can I get some help on this please?

My workaround was to modify iframe.js to avoid this null reference error. With that modification to fdk code the app works fine with ?dev=true, but it fails to run/show up at all when deployed as a custom app, and I don’t know if that’s an entirely separate bug or a side effect of this workaround.

Some info on the deployment error:
When I create the app in the developer portal and install it using “Save and Test”, the app installs fine but doesn’t run at all. In the browser console I see Manifest: Line: 1, column: 1, Syntax error but I don’t think it’s specific to my app, because it appears whether or not the app is enabled. I don’t see other related errors & the app works perfectly fine when run in dev mode.

My manifest is below:

{
  "platform-version": "2.3",
  "product": {
    "freshchat": {
      "location": {
        "conversation_user_info": {
          "url": "index.html",
          "icon": "styles/images/icon.svg"
        }
      }
    }
  },
  "engines": {
    "node": "18.18.2",
    "fdk": "9.3.0"
  }
}
4

did this issue has been fixed?

5

i think it’s a bug in fdk
i used the same settings you mentioned at the top of your thread
here’s the trick that worked with me

  • fdk run
  • from the left menu, go to contacts
  • click on any one from your contact list or make a new one
  • from top right corner, click on (see all details)
  • now use ?dev=true parameter
  • you’ll see a snackbar alert telling you that the app is serving
  • now, go to any conversation and use dev parameter, you’ll notice the same snackbar on the top and a box in the bottom right, this is your broken app, you’ll also notice that an error has appeared in terminal. run your app again
  • DO NOT REFRESH THE WINDOW, but on the broken iframe in your app window, right click then reload iframe
  • the app is running and catching any updates on your code
6

i found out that you need to use V3 rather than v2.3
“platform-version”: “2.3” must be “platform-version”: “3.0”,