How can I handle errors gracefully with fetch when the API returns a non-JSON response?

<!-- BEGIN COPY / PASTE -->
        fetch('https://api.example.com/data')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok');
                }
                const contentType = response.headers.get('content-type');
                if (contentType && contentType.includes('application/json')) {
                    return response.json();
                } else {
                    throw new Error('Received non-JSON response');
                }
            })
            .then(data => {
                console.log('Data:', data);
            })
            .catch(error => {
                console.error('Fetch error:', error);
            });
        <!-- END COPY / PASTE -->