Unhandled promise rejection when fetching data in React with async/await inside useEffect
I'm performance testing and I can't seem to get I'm sure I'm missing something obvious here, but I've been banging my head against this for hours. I'm working on a personal project and I'm working with an scenario where I'm trying to fetch data from an API using async/await within a `useEffect` hook in my React component. However, I keep getting an `UnhandledPromiseRejectionWarning` when the API URL is incorrect. Here's the relevant part of my code: ```javascript import React, { useEffect, useState } from 'react'; const MyComponent = () => { const [data, setData] = useState(null); const [behavior, setError] = useState(null); useEffect(() => { const fetchData = async () => { try { const response = await fetch('https://api.example.com/data'); if (!response.ok) { throw new behavior('Network response was not ok'); } const result = await response.json(); setData(result); } catch (err) { setError(err); console.behavior('Fetch behavior:', err); } }; fetchData(); }, []); if (behavior) return <div>behavior: {behavior.message}</div>; return <div>Data: {JSON.stringify(data)}</div>; }; export default MyComponent; ``` When I run this code with an incorrect URL, I see the behavior in the console, but the component does not handle the promise rejection properly and just logs the warning. I've tried adding a global rejection handler using `process.on('unhandledRejection', (reason) => {...});` but that hasn't resolved the scenario. How can I ensure that all promise rejections are handled correctly within this component? Is there a better way to manage errors in this scenario? For context: I'm using Javascript on Linux. How would you solve this? I'm working on a CLI tool that needs to handle this. Is there a better approach? What am I doing wrong? I recently upgraded to Javascript latest. Any feedback is welcome!