[EuiSearchBar] Next.js Can't catch errors from EuiSearchBar using Errorboundary

[Harshav0423]

I have been using, Eui for Next.js, and ErrorBoundary from Next.js, to catch the error and render a fallback Component.
I have tested the fallback for error on EuiBasicTable, which can catch the errors, when throwing errors from the initial render, but the default search cannot catch the error that is thrown from the onChange function.
So I used, EuiErrorBoundary as well but it couldn't catch the error.

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

Key information

• EUI version:^93.1.1
• React version:^18
• Next - 14.1.0
• Build tool: (e.g. Webpack, Vite, Rollup, Next.js)

Code: https://github.com/Harshav0423/nextjs-eui/blob/main/src/app/pages/page.jsx, where I have used the EuiErrorBoundary, and commented code for ErrorBoundary from the Next.js

Thanks

[cee-chen]

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}) />

[Harshav0423]

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

[cee-chen]

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>
);

[Harshav0423]

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.