javascript - How to catch 401 or other errors in Tableau embed ReactJs - Stack Overflow

admin管理员组

文章数量:1400148

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.

本文标签： javascriptHow to catch 401 or other errors in Tableau embed ReactJsStack Overflow