Flutter CachedNetworkImage errors: (CacheManager: Failed to download file) and (SocketException or HttpException)

Question

I'm using the cached_network_image library. If I set it up like this:

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    print('MyApp building');
    return MaterialApp(
      home: Scaffold(
        body: HomeWidget(),
      ),
    );
  }
}

class HomeWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Center(
      child: Container(
        child: CachedNetworkImage(
          imageUrl: "https://example.com/image/whatever.png",
          placeholder: (context, url) => CircularProgressIndicator(),
          errorWidget: (context, url, error) => Icon(Icons.error),
       ),
      ),
    );
  }
}

with a URL that is invalid (either because it returns a 404 or the server refuses the connection), then my IDE freezes and gives one of the following errors:

HttpExceptionWithStatus (HttpException: Invalid statusCode: 404, uri = https://example.com/image/whatever.png)

or this (if I change it to a non-existent host):

SocketException (SocketException: Failed host lookup: 'ksdhfkajsdhfkashdfkadshfk.com' (OS Error: No address associated with hostname, errno = 7))

What I would expect is for the CachedNetworkImage widget to just show the errorWidget, but it doesn't.

Answer 1

The creator of cached_network_image says (source):

If you have break on exceptions enabled the debugger stops, but that's because the dart VM doesn't always know whether an exception is caught or not. If you continue this still shouldn't freeze your app.

That was the key I needed. It is just the debugger stopping. You can hit the continue button or disable stopping on uncaught exceptions. The CachedNetworkImage widget will then show the errorWidget as expected.

In VS Code you can uncheck this in the bottom left of the debug pannel.

I believe there is a similar setting in Android studio based on this post.

Answer 2

I also experienced this issue, and could not find a flutter way to solve the 404 issue which crashes the app.

As a solution, I am using imagekit as a CDN and we can tell imagekit to display a default image if the original image is missing: https://docs.imagekit.io/features/default-images