Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

Caching does not work with FrontChat

See original GitHub issue

In our app (Rails 6) we use FrontChat for customer support. However, I’m having difficulties getting it to work with Turbo caching.

So far, I have the following:

application.html.erb
<!DOCTYPE html>
<html>
  <head>
    <script src="https://chat-assets.frontapp.com/v1/chat.bundle.js" defer></script>
    <%= javascript_pack_tag "chat", "data-turbo-track": "reload", defer: true %>
  </head>

  <body> 
    <%= yield %>
    <div id="front-chat-container" data-turbo-permanent></div>
  </body>
</html>

chat.js
window.FrontChat('init', {chatId: '...', useDefaultLauncher: false})

This mostly works, the chat window stays open between page changes as I want, except when returning to a cached page I get an error Please pass a `chatId` or a `FCSP` variable.. This error does come from FrontChat, and I don’t know the exact cause, however since the error only happens when loading a cached page I figured it might be of interest to the Turbo team.

Currently I’m working around this by using <meta name="turbo-cache-control" content="no-cache"> to avoid caching the page, and that works, but it would be nice to not have to disable caching.

For a bit of understanding of how FrontChat works, it grabs a reference to the #front-chat-container element and uses that to show/hide the chat window. It has to be a permanent element otherwise FrontChat breaks since it stores a reference to the element. I’m guessing there’s some issue with cached pages and permanent elements.

Issue Analytics

State:
Created 2 years ago
Comments:7 (2 by maintainers)

Top GitHub Comments

2reactions

TastyPicommented, Dec 21, 2021

My full solution:

let script = document.createElement("script")

script.onload = () => {
  // Find the #front-chat-container added by Front
  let container = document.querySelector("#front-chat-container:not([data-turbo-permanent])")
  // Move the script element added by Front to <head>
  // See https://github.com/hotwired/turbo/issues/391#issuecomment-998895413
  document.head.appendChild(container.nextSibling)
  // Remove the container added by Front. We have our own #front-chat-container[data-turbo-permanent] which ensures
  // Turbo keeps the chat open during navigation.
  container.remove()
  window.FrontChat('init', {...});
}
script.defer = true
script.src = "https://chat-assets.frontapp.com/v1/chat.bundle.js"
document.head.appendChild(script)

It’s definitely a hacky workaround, but it seems to work.

0reactions

shahafabileahcommented, Dec 8, 2022

I’m also running into this issue now. @TastyPi thanks for posting your new workaround. I tried it and it doesn’t seem to fully work. The issue is here:

  event.detail.newBody.querySelector(`#${FRONT_ELEMENT_ID}`)?.remove()

That query returns nothing.

Does your payload from the server include the <iframe>? Or is this a timing thing, where some other code is running client-side and causing the <iframe> to be added to newBody before this logic runs?