[EuiSearchBar] Next.js Can't catch errors from EuiSearchBar using Errorboundary about eui HOT 4 CLOSED

So I used, EuiErrorBoundary as well but it couldn't catch the error.

EuiErrorBoundary catches errors thrown by JS code due to developer implementation or API issues - it does not catch errors due to user input. Basically, if an error message doesn't appear in your devtools console, EuiErrorBoundary won't catch it.

Can you suggest some usage or work around to catch the error from EuiSearchBar or in its filters.

Your required onChange callback passes back any errors in the error key. If you really want to use EuiErrorBoundary for this, simply throw any caught errors, for example:

const searchBarOnChange = ({ query, queryText, error }) => {
  if (error) throw new Error(error);
  // Do something with the query
};

<EuiSearchBar onChange={searchBarOnChange}) />

from eui.

Thanks @cee-chen , but i have already raising the error when there is a change in the SearchBar input, const onChange = ({ query, error }) => { throw new Error("this will cause searchbar error")
https://github.com/Harshav0423/nextjs-eui/blob/main/src/app/components/search.jsx

from eui.

Ah, sorry, you're right. Throwing an error from the onChange won't trigger EuiErrorBoundary, what you need to do is store the error in state and then add a useEffect that throws on error change. This will cause a rerender and EuiErrorBoundary to correctly update.

Example:

const [error, setError] = useState();

const searchBarOnChange = ({ query, queryText, error }) => {
  if (error) setError(error);
  // otherwise do something with the query
};

useEffect(() => {
  if (error) throw new Error(error.message);
}, [error]);

return (
  <EuiErrorBoundary>
    <EuiSearchBar onChange={searchBarOnChange} />
  </EuiErrorBoundary>
);

from eui.

Thanks for that, I used react-error-boundary to catch any rendering errors. Replaced the EuiSearchbar to EuiBasicTable and wrapped ErrorBoundary around that, so that when there is an error in rendering the table it is going to catch that.

from eui.