App activated getting triggered multiple times for conversation_user_info location

Feedback
#1

Hi guys,

We are building on a custom App which is located in conversation_user_info page in Freshchat.
The problem we are facing is when changing from one view to the other and clicking on a conversation for the first time the app activated gets triggered multiple times.
For example : Assuming we are in the New view and when we are changing view to let’s say All Assigned and click on any one of the conversation in that for the first time the app activated get triggered twice.

Kindly check the code and screenshot provided below.

$(document).ready(function () {
  app.initialized().then(function (_client) {
    window.client = _client;
    console.log("======== App Initialized ========");
    client.events.on('app.activated', function () {
      console.log("======== App Activated ========");
    }, error => console.log(error));
  }, err => console.log(err));
});

Freshchat conversation_user_info
Freshchat conversation_user_info2878×1146 404 KB

Do let me know why this happening and what we need to do fix this. Thanks in advance.

#3

Hey @sarfaraz_Mohammed,

Could you check if the app is loading in multiple placeholders? or could you share a screen recording of the mentioned issue for better understanding?

#4

Hai @velmurugan

Thanks for you response. Yes i checked only running in one placeholder and this is the only app i had enabled in the portal.
Please find the screen recording below.

1 Like
#5

That is the expected behaviour @sarfaraz_Mohammed.

Since Freshchat is a single-page app, the app initialized event is triggered on window load or window reload. And any subsequent navigation such as moving a different conversation or going to the Settings tab does not refresh the tab.

It is due to this, the app activated event triggers. This is because the App is loaded as soon as the conversations screen is loaded on Freshchat.

Let me know if this makes sense.

2 Likes
#6

Do you mind sharing the your expectation on how this should be working?

#7

Understood @Arjun_Paliath Thanks for the explanation.

@Saif we have a usecase where whenever a conversation is resolved the custom app will be making an SMI call to the server.js and a note with conversation transcript will be added to a third party service.

So currently this is happening twice for the first conversation i am going to and resolving after the view change.
Is there a workaround for this?

#8

@sarfaraz_Mohammed - Understood.

Does you code look like follows?

document.onreadystatechange = function () {
  if (document.readyState === 'interactive') ignition();
};

function ignition() {
  app.initialized().then(function getClient(_client) {
    window['client'] = _client;
    client.events.on('app.activated', kickStart);
  });
}

function kickStart() {
  client.events.on('conversation.onResolveClick', InvokeSeverMethod);

  function InvokeServerMethod() {
    client.request.invoke('serverMethod', options).then(
      function execServerAndAddNote(data) {},
      function (err) {}
    );
  }
}

Please correct me or share approx code snippet, to see if we can try some how prevent 2nd event trigger. In the above case, it doesn’t seem like InvokeServerMethod would be invoked twice since it’s only registered with app.activated and not with app.initialized

#9

Thanks for the response @Saif. Had deployed a brand new app using the code snippet provided you. Still am getting multiple triggers on app activated. This the only app that was enabled in the Freshchat portal.
Here is the code i am using to test this

document.onreadystatechange = function () {
  if (document.readyState === "interactive") ignition();
};

function ignition() {
  app.initialized().then(function getClient(_client) {
    console.clear();
    console.log("======== App Initialized ========");
    window["client"] = _client;
    client.events.on("app.activated", kickStart);
  });
}

function kickStart() {
  console.log("======== App Activated ========");
  client.events.on("conversation.onResolveClick", function () {
    client.request.invoke("serverMethod", {}).then(function (data) {
      console.log(data);
    },function (err) {
      console.log("Error from the invoke method", err);
    });
  });
}

Server.js

exports = {
  serverMethod: function () {
    renderData(null, {});
  },
};

Here is the screen recording for the app.

1 Like
#10

@sarfaraz_Mohammed

I did reproduce the issue and this is a bug! We will need to fix it.

image
image495×556 56.2 KB

Just additionally in the above code, I tried adding a simple count variable.

With that I can confirm

  1. The callback functions those are registered with conversation.onResolveClick are being queued.
  2. Every time app.activated when user navigates to another conversation, the callbacks those are registered earlier aren’t cleared.
  3. As a result all the queued up callbacks get invoked one by one.

You can see above logs for the following code,

function kickStart() {
  console.log('======== App Activated ========');
  let count = 0;
  client.events.on('conversation.onResolveClick', function bug() {
    count++;
    client.request.invoke('serverMethod', {}).then(
      function (data) {
        console.log(`The count value: ${count}`)
        console.log(data);
      },
      function (err) {
        console.log('Error from the invoke method', err);
      }
    );
  });
}

bug(){..} gets invoked thrice if user navigates to 3rd conversation.

Thank you for reporting this @sarfaraz_Mohammed . I will move this feedback category. Currently two more bugs reported by @samuelpares are reported to platform team. Will make sure this also is reported and prioritised.

2 Likes
#11

@sarfaraz_Mohammed - Do you see this happening in production as well? Or just in local simulation?

#13

Thank you @Saif for looking into this.
Yes i am facing this in production as well. One of the apps is on hold because of this issue.

1 Like
#15

@sarfaraz_Mohammed

I caught up with @Asif to get help on this topic.

I can probably share a code snippet put together

document.onreadystatechange = function () {
  if (document.readyState === "interactive") ignition();
};
function ignition() {
  app.initialized().then(function getClient(_client) {
    console.clear();
    console.log("======== App Initialized ========");
    window["client"] = _client;
    let isAppAlreadyActivated = false;
    client.events.on("app.activated", function() {
      if (!isAppAlreadyActivated) {
        kickStart();
      }
      isAppAlreadyActivated = true;
    });
  });
}
function kickStart() {
  console.log('======== App Activated ========');
  let count = 0;
  client.events.on('conversation.onResolveClick', function bug() {
    count++;
    client.request.invoke('serverMethod', {}).then(
      function (data) {
        console.log(`The count value: ${count}`)
        console.log(data);
      },
      function (err) {
        console.log('Error from the invoke method', err);
      }
    );
  });
}

This appears as a way to effectively use app.initialized() vs app.activated that might help you solve the use case.

2 Likes
#16

Hi @Saif, Thanks for the code snippet i’ll implement using thing this

1 Like