CachedNetworkImageProvider: errorListener never fires when running on web

[technolion]

🐛 Bug Report

The errorListener of CachedNetworkImageProvider never fires when running on web. It does however fire on all other platforms. In this example the CachedNetworkImageProvider tries to load an image that does not exist.

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

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

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'CachedNetworkImageProvider Test',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'CachedNetworkImageProvider Test'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {

  ImageProvider _getNetworkImage() {
    String url = "https://www.google.com/no-image-here.jpg";


    CachedNetworkImageProvider provider = CachedNetworkImageProvider(
      url,
      errorListener: () {
        //this is never called when running on the web!
        print("CachedNetworkImageProvider: Image failed to load!");
      },
    );

    return provider;
  }

  @override
  Widget build(BuildContext context) {
    ImageProvider provider = _getNetworkImage();
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
            CircleAvatar(
                radius: 100,
                backgroundImage: provider,
              )
          ],
        ),
      ),
    );
  }
}

Expected behavior

The errorListener should be called on Chrome, too. Ideally it would also pass the reason of failure into the listener.

Reproduction steps

Run this project on macOS and on Chrome. On macOS the errorListener is called - on Chrome it is not.

test2.zip

Configuration

Version:

Flutter (Channel stable, 2.8.1, on macOS 12.0.1 21A559 darwin-x64, locale de-DE) cached_network_image: ^3.2.0 flutter_cache_manager: ^3.3.0

Platform:

• [x] Web

[technolion]

@renefloor Any chance this could be fixed soon?

[renefloor]

Don't know, have to dig into this if it can be fixed, but I am currently a bit busy in my personal life.

[technolion]

Thanks. I can also try taking a look into your code and maybe provide a pull request.

[jsml]

facing the same issue... I'll try to fix this

[chuck-h]

I may have the same problem on Android (but am somewhat inexperienced in flutter)

  ImageProvider get backgroundImage {
    try {
      return backgroundImageUrl.startsWith("assets") ?
      AssetImage(backgroundImageUrl) as ImageProvider :
      CachedNetworkImageProvider(backgroundImageUrl,
        // unsuccessfully trying to catch http timeout
        // ref https://github.com/Baseflow/flutter_cached_network_image/issues/703
        errorListener: () {
          print("CachedNetworkImageProvider: Image failed to load!");
        });
    } catch (e) {
      print("backgroundImage caught $e");
      return const AssetImage(CurrencyInfoCard.defaultBgImage) as ImageProvider;
    }
  }