Not always getting in main window receive() when calling send() form modal

My freshsales App has 4 files:

  • app.html - Main App screen
  • app.js - JS for app.html
  • modal.html - Modal dialog
  • modal.js - JS for modal

Inside app.js I have following code to attempt to register a method to receive data from the modal:

document.onreadystatechange = function() {
  if (document.readyState === 'interactive') renderApp()
  function renderApp() {
    var onInit = app.initialized()
    onInit.then(getClient).catch(log.error)
    function getClient(client) {
      window.client = client
      client.events.on('app.activated', onAppActivate)
    }
  }
}

async function onAppActivate(e) {
  // Declare function to receive data from modal
  window.client.instance.receive(processModdalData)
}

// Function to receive data from Modal
function processModdalData(event) {
  log.info('MODAL DIALOG DATA RECEVIED')
}

In the modal.js I have following to initialiae

document.onreadystatechange = function() {
  if (document.readyState === 'interactive') renderApp()
  function renderApp() {
    var onInit = app.initialized()
    onInit.then(getClient).catch(log.error)
    function getClient(client) {
      window.client = client
    }
  }
}

In modal.js I have following upon submitting the dialog:

async function submitValues(e) {
  var body = { var1: "val1", var2: "val2" }
  log.info("Submitting values from modal")
  window.client.instance.send( { message: {action: 'add', body: body} } );
  window.client.instance.close();    
}

The problem is that " occasionally processModdalData does not get invoked. Problem is random.

I’m curious about the “client” object and if I’m referencing it correctly when working with multiple pages. In the main app page I store client in ‘window.client’ and refer to it there in other methods in which its not easy/possible? to pass client as an argument. Same in the modal window. Is this valid? I was wondering if I’m overwriting the client object and causing issues in that way.

I saw some code examples where client was stored in the root of the JS file as follows:

— app.js –

   var client
   <further down>
    function getClient(client) {
      window.client = client

And same thing in modal.js:

– modal.js —

   var client
   <further down>
    function getClient(client) {
      window.client = client

Which is the correct way or does it mater? Is it possible that by using window.client i am causing this issue?

Hi @stevemc,

I’m not able to reproduce the issue. When I tried multiple times, the event is always received. Do you remember any sequence when the event is not received? Could you try reproducing the issue and confirm the sequence?

The code looks perfect. The modal and the placeholder app is rendered in different iframes. They will get their own document and window, I guess. So appending the client object to the window doesn’t matter.
@Santhosh Can you please confirm if my assumption is right?

1 Like

@stevemc,
As @Raviraj said, modal and app is rendered in different Iframes, and it won’t be a problem with the window.client.
when the function is not invoked, have you get any error in the console?
if so can you please share us the details, we will take a look and getback to you at earliest.

Thanks

Thanks for the replies. I added lots of logging and cleaned up the code as much as I can and still I am getting same issue. Its somewhat random. I can’t put my finger on it. Sometimes it occurs repeatedly for 3 or 4 times in a row then it does not.

No errors at all are being generated. I get the last log messages from the client send() method and the log messages that I have put in client receive() method do not appear after that.

Question: I wonder if I am closing the modal too quicklY? Is the send async and do I need to await its completion before closing: This is what I’m doing:

  window.client.instance.send( { message: {action: 'add', body: body} } );
  window.client.instance.close();

I don’t know if it would help for me to show you the logs since there are no errors. Just in case below shows logs of data that is submitted and that’s the last log I get. No errors at all appear in log during session.

addTraining.html:30 Submitting form
addTraining.html:31 Start:2022-03-01 End: 2022-04-04
addTraining.html:36 Date Values: Now: Sun Feb 27 2022 07:03:00 GMT-0800 (Pacific Standard Time) Start: Tue Mar 01 2022 00:00:00 GMT-0800 (Pacific Standard Time) End: Mon Apr 04 2022 00:00:00 GMT-0700 (Pacific Daylight Time)
addTraining.html:37 Checking start date
addTraining.html:45 Checking end date
addTraining.html:56 Returning to main with body {cm_training: {…}}

Possible can you share us the app (removed your logic and have minimal code to reproduce of your issue)?
we will take a look and let you know what is wrong

Thanks

Sure. I’ll work on a shell version of the app that reproduces. Might take a day or two.

2 Likes

@stevemc Were you able to discover the bug? I wonder if you got a chance to share a reproducible version of the app.

Some of the important details that are missing in the post are:

  1. The placeholders where the app is rendered
  2. A step by step description of user flow as the user using the app
  3. Any pattern when processModalData() is not invoked

Think of the client object to be a programmatic bridge to talk to both Freshdesk and the Platform. So any method that you invoke on the client object will either register function definitions defined by the app developer or directly invoke them based on the use case. The same understanding along with the fact that both iframes get their own window and document contexts means that attaching to window isn’t actually helping. They are separate client instances anyway.

I suspect the problem is coming in combination with how app lifecycle events work in line with browser web page events. If we are able to drill down to what exact user flow causes processModalData() left uninvoked, we can inspect the thread of execution to find the root cause.

1 Like

Hi. I was able to build the attached app that clearly reproduces the issue. I found that to reproduce you have to change “tab” to one of the other apps and then back to this one. For example, one way to reproduce is:

app.zip (7.9 KB)

I’m curious about how I’m storing the client object. I’m doing it thru app.activated event. Maybe this is a problem if switching to another app?

  1. The placeholders where the app is rendered

    "product": {
     "freshworks_crm": {
       "location": {
         "contact_entity_menu": {
           "url": "index.html",
           "icon": "styles/images/icon.svg"
         }
       }
     }
    },
    
  2. A step by step description of user flow as the user using the app

    1. Open Contact with xtalk app installed
    2. Click on xtalk app in left navbar
    3. In xtalk, open modal and close it and verify return info is printed to Javascript console
    4. Click on “Contact fields”
    5. Cick xtalk app again
    6. In xtalk, open modal and close it and check for return info printed to Javascript console. Observe it is not printed any longer
  3. Any pattern when processModalData() is not invoked

I don’t know what this question means.

I continue to see this issue occur. Did the sample app provided allow you to repro the issue?