Flutter_cached_network_image: 404 HttpExceptions

[Peng-Qian]

🔙 Regression

Old (and correct) behavior

When the URL is invalid(the image fails to load), the console print the error info once, and there are no exceptions.

Current behavior

When the URL is invalid(the image fails to load) and if there two more CachedNetwrokImage with that invalid URL, the following error info repetitively prints in the console, and then it will show the exceptions.

Screenshot

Error Info

I/flutter ( 6648): CacheManager: Failed to download file from https://... with error:
I/flutter ( 6648): HttpException: Invalid statusCode: 404, uri = https://...

Exception

════════ Exception caught by image resource service ════════════════════════════════════════════════
The following HttpExceptionWithStatus was thrown resolving an image codec:
HttpException: Invalid statusCode: 404, uri = https://...

When the exception was thrown, this was the stack: 
Image provider: CachedNetworkImageProvider("https://...", scale: 1.0) 
 Image key: CachedNetworkImageProvider("https://...", scale: 1.0): CachedNetworkImageProvider("https://...", scale: 1.0)
════════════════════════════════════════════════════════════════════════════════════════════════════

Reproduction steps

create two more CachedNetworkImage widgets with the same invalid URL, and reload them a few times.

try to go to the image view screen a few times on the following example app, you will get the above issue.

import 'package:cached_network_image/cached_network_image.dart';
import 'package:flutter/material.dart';

void main() => runApp(LabApp());

const invalidUrl =
    'https://helpx.adobe.com/content/dam/help/en/stock/how-to/visual-reverse-image-search/jcr_content/main-pars/image/visual-reverse-image-search-v2_into.jpg';

class LabApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Lab',
      theme: ThemeData(
        primarySwatch: Colors.blueGrey,
        backgroundColor: Colors.white,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatelessWidget {
  const HomeScreen();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Home Screen'),
      ),
      body: SizedBox.expand(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            CachedNetworkImage(
              imageUrl: invalidUrl,
              errorWidget: (context, url, error) => Icon(Icons.error),
            ),
            RaisedButton(
              child: Text('Click Me'),
              onPressed: () => Navigator.push(
                context,
                MaterialPageRoute(
                  builder: (context) => ImageView(),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class ImageView extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text('Image View'),
      ),
      body: Center(
        child: CachedNetworkImage(
          imageUrl: invalidUrl,
          errorWidget: (context, url, error) => Icon(Icons.error),
        ),
      ),
    );
  }
}

Configuration

N/A

Version: 2.3.3

Platform:

• [x] :iphone: iOS
• [x] :robot: Android

[alr2413]

I've encountered the same issue, any solution?

[thongvo109]

me too :(

[thongvo109]

My solution:
I think you should give this package a try. Perhaps it can fix it. I tried
cached_network_image: ^2.0.0-rc

[fryette]

@renefloor do you have any plans to take a look at that bug in near future?
In our project we have a lot of images that can fail and during debugging really struggling with it

[renefloor]

The printing is done by the ImageStreamCompleter, which means I would need to fork that and I don't prefer to do that.
That the debugger pauses is being worked on by the Dart VM team, but I don't expect it to be fully fixed soon. You can disabled 'break on exceptions' though, this is a screenshot from intellij:

[fryette]

@renefloor,
Thanks for your answer.
But disabling exception handling at all is not an option. You can miss very important exceptions during development especially when you have a big team working on the same codebase.

Probably it is possible to implement something like that?
https://github.com/flutter/flutter/issues/20910#issuecomment-579194384

[renefloor]

But this is just not trying to get the image when you don't have an internet connection. That would break the offline caching though. Getting the state from the ImageProvider to the Image widget needs to be done by throwing an exception.

[0wzZZzz6]

I just encountered this one too.