I have a React web app in which I am embedding Tableau reports. I am also using JWT token for security. When a user is not authorize to view a report I want to show an error message on the page however there is no way I am able to find to listen to the error.

import React, { useEffect, useRef } from "react";

const TableauViz = ({ src, options, token }) => {
   const vizContainer = useRef(null);

   useEffect(() => {
      // Initialize the Tableau Viz web component
      const vizElement = document.createElement("tableau-viz");
      vizElement.id = "tableauViz";
      vizElement.src = src;
      vizElement.token = token;

      // Add options as attributes
      for (const [key, value] of Object.entries(options)) {
         vizElement.setAttribute(key, value);
      }

      // Append the viz element to the container
      vizContainer.current.innerHTML = "";
      vizContainer.current.appendChild(vizElement);
   }, [src, options]);

   return <div ref={vizContainer} className="tableau-viz-container m-auto" />;
};

export default TableauViz;

Above is my code. Users are able to view the reports if they are authorized. Also this code internally fires a network request for checking the authorization but that is not in my control so when it throws 401 or some other error then I am unable to catch and display it.

As per the docs, I did try listening to the onVizLoadError event but that didn't work. Tableau documentation for listening to error

   function handleError(ev){
      console.log("handleError", ev);
   }

   useEffect(() => {
      // Initialize the Tableau Viz web component
      const vizElement = document.createElement("tableau-viz");
      vizElement.id = "tableauViz";
      vizElement.src = src;
      vizElement.token = token;
      vizElement.onVizLoadError = handleError;

      // Add options as attributes
      for (const [key, value] of Object.entries(options)) {
         vizElement.setAttribute(key, value);
      }

      // Append the viz element to the container
      vizContainer.current.innerHTML = "";
      vizContainer.current.appendChild(vizElement);
   }, [src, options]);

I tried listening to onVizLoader like this, even tried to it view addeventlistener but they did not work, nothing printed in the console.

Any help will be appreciated.