FirstInteractive event randomly not raised on Google Chrome

florent-guinard commented 2 years ago

Context of the issue

We're using the Embedding API to embed Tableau Vizs in a basic web application (static HTML page, vanilla JavaScript). Those Vizs are initialized via JavaScript. We're adding a FirstInteractive event listener to the Viz to perform additional actions once the Viz is properly loaded (retrieve filters and parameters, ...). We use the same page to display multiple embedded Vizs, one at a time.

Description of the issue

Randomly, the FirstInteractive event won't be raised, and the function given as the "listener" argument won't be called even if we wait for multiple minutes:

The issue can be systematically reproduced (see below) but can also happen randomly at any point
The issue seems specific to Chrome (we were able to reproduce the issue in Chrome 100, 101 and 102 but not in Firefox)
The issue is a bit different based on the OS: for Vizs that are subject to this issue, the issue will always occur when the first Viz is embedded on Windows but not on MacOS/Linux with headless Chrome. On all 3 OSes the issue will randomly appear when we repeatedly load Vizs in the same web page.
The issue occurs far more frequently when we first access the web application after launching Chrome - subsequent accesses to this web application (like refreshing the page for example) rarely experience the issue
The issue happens whether we launch Chrome with our existing user profile, with the "Guest" user profile or with a new temporary profile (when Chrome is launched by a chromedriver session)
The issue occurs more frequently for specific Vizs (see below) but we were able to reproduce the issue on Worksheets and Dashboards
The same Viz can be affected by the issue and then properly raise the event if we try to embed it two times in a row on the same web page (see below)
The issue seems to occur more frequently in larger web applications (in our complete web application built in ES6 JavaScript with typescript/webpack compared to the example application below)
The issue was reproduced on a Tableau 2022.1 and a Tableau 2022.2 preview site, with the 3.1 or 3.2 version of the Embedding API
The issue happens when we import the Embedding API from a CDN and when we import it locally as a resource of the web application
The issue happens with and without a valid JWT token added to the Viz object
We've never encountered this issue with the "onFirstInteractive" method in the JavaScript API in the exact same context (web application, embedded Viz, Tableau site, ...)

Reproduction Steps

A basic, static web application is hosted on a web server (in this example we're using python's http server by running "python -m http.server" in the web application folder) :

index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Hello World!</title>
  <!-- Import the webpage's javascript file -->
  <script type="module" src="/script.js"></script>
</head>
<body>
  <div id="tableauViz"></div>
  <button id="load">
    Load
  </button>
</body>
</html>

script.js

import { TableauViz, TableauEventType } from "https://embedding.tableauusercontent.com/preview/tableau.embedding.3.latest.beta.js";
const vizs = [
  "https://10ax.online.tableau.com/t/<site>/views/<Workbook>/<Sheet>"
];
let viz;
async function firstInteractiveListener(_event) {
    console.log("First interactive ");
}
function loadViz() {
  viz = new TableauViz();
  viz.src = vizs[0];
  document.getElementById('tableauViz').innerHTML = '';
  document.getElementById('tableauViz').appendChild(viz);
  viz.addEventListener(TableauEventType.FirstInteractive, firstInteractiveListener);
}
const btn = document.getElementById("load"); // Get the button from the page
// Detect clicks on the button
if (btn) {
  btn.onclick = function () {
    loadViz();
  };
}

first_interactive.webm

Transcript of the video:

00:00 I opened a new Chrome window with the "Guest" profile - this is not necessary to reproduce the issue (see above) but it is easier than closing/launching the Chrome application itself
00:01 I log in to my Tableau site (2022.2 Preview in this case) since I'm not embedding Vizs with JWT tokens
00:24 I open a new tab and access my web application
00:31 I click on the "Load" button - this should load the embedded Vizs and log a "First interactive" message in the browser's console when the "FirstInteractive" event is raised. The embedded Viz here is one of the Vizs that most frequently encounters the issue, it's a Dashboard with a Text box and an image (no Worksheet).
00:36 The Viz is fully loaded, the "FirstInteractive" event is not raised, and nothing is logged in the Console - this is the "first viz" behavior that only happens on Windows
00:41 I click on the "Load" button again to replace the existing embedded Viz with a new one (the same Dashboard)
00:43 The Viz is fully loaded, the "FirstInteractive" event is raised, and a "First interactive" message is logged in the Console
00:45 I click on the "Load" button again to replace the existing embedded Viz with a new one (the same Dashboard)
00:47 The Viz is fully loaded, the "FirstInteractive" event is not raised, and nothing is logged in the Console - this is the random issue that happens on all three OSes
00:50 I click on the "Load" button again to replace the existing embedded Viz with a new one (the same Dashboard)
00:52 The Viz is fully loaded, the "FirstInteractive" event is raised, and a "First interactive" message is logged in the Console (Chrome merges identical messages into a single line, and displays the number of identical messages with a number seen before the message itself)
00:54 I click on the "Load" button again to replace the existing embedded Viz with a new one (the same Dashboard)
00:56 The Viz is fully loaded, the "FirstInteractive" event is raised, and a "First interactive" message is logged in the Console

Web application: firstInteractive.zip

Workbook used: FirstInteractive_Workbook.zip

This issue is quite impactful for us as we're leveraging this "FirstInteractive" event to make sure that the Viz is properly loaded before automatically retrieving and displaying its information (Filters, Parameters, Data...).

illonage commented 2 years ago

Hi Florent - Thank you for opening an issue. It is indeed a bug, we just created one internally. For future reference, the bug number is 1431210

mmuttreja-tableau commented 2 years ago

Thanks for filling the bug. This is fixed in our 22.3 Release, you can test it off 10ax in a few days.

florent-guinard commented 2 years ago

@mmuttreja-tableau Thanks for your feedback and for fixing the issue !

It indeeds looks like the issue is fixed on 10ax, we'll perform additional tests and close the issue if everything is working properly.

florent-guinard commented 2 years ago

I confirm that the issue is now fixed on the 10ax preview site using the 3.3 Embedding API.

tableau / embedding-api-v3-guide