CacheManager: Connection closed before full header was received

[wangxingxing123654]

🐛 Bug Report

CacheManager: Failed to download file from https://harbor.alpha.stylewe.com/image_cache/resize/335x445/image/catalog/2015-04-01/new pic/15-4-1-15-3.JPG with error: Connection closed before full header was received

Expected behavior

Reproduction steps

Configuration

Version: 1.x

Platform:

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

[wangxingxing123654]

but brower can open it , [pic url](https://harbor.alpha.stylewe.com/image_cache/resize/335x445/image/catalog/2015-04-01/new pic/15-4-1-15-3.JPG)

[khalid-alsaleh-dev]

any solutions for this issue ?

[whatamelon]

this is really issue. when I get over 30 images, some images are stuck and not represent. Is this issue is flutter's http issue or cache library's issue?

[Ocelyn]

same issue here, the fix to change request from https to HTTP is not helping

[Arley011]

Same here, pls fix it :)

[renefloor]

I think it might be a problem that the server closes the connections when to many images are downloaded at the same time. So I guess it could be solved with queuing as proposed in #453

[bradsb]

@renefloor This issue is still occurring on Flutter 1.22.1, with CachedNetworkImage 2.3.3

[renefloor]

Which version of flutter_cache_manager is in your pubspec.lock?

[bradsb]

  flutter_cache_manager:
    dependency: transitive
    description:
      name: flutter_cache_manager
      url: "https://pub.dartlang.org"
    source: hosted
    version: "2.0.0"

[renefloor]

Are you requesting a lot of images? I guess there can be more reasons why a connection is dropped. Can you give me a small reproducible example?

[renefloor]

Apparently it is not really related to doing to many requests, as it is reproduced with doing just 1 request as well. I'll reopen this issue, but you'll should keep track (and thumbs up) this issue: https://github.com/flutter/flutter/issues/41573

[shbmbhrdwj]

I was facing the same issue, when I was using ListView, you can fix this by using ScrollAwareImageProvider with CachedNetworkImageProvider passed to it as imageProvider.

Edit: This solution significantly reduces the events encountered for the issue, but do not consider this as a valid solution for the problem, it still needs to be fixed at the platform/package end.

[erf]

@shbmbhrdwj Could you provide an example ?

[SamKlim]

@shbmbhrdwj example please :)

[shbmbhrdwj]

@erf @SamKlim It's pretty straitforward:

You can use it like this:

Image(
    image: ScrollAwareImageProvider(
        context: _disposableBuildContext,
        imageProvider: CachedNetworkImageProvider(
           imageUrl,
        ),
    ),
)

[erf]

@shbmbhrdwj how would you add a Placeholder with that example and where do you get _disposableBuildContext from ?

[MichaelMarner]

This week I've been investigating workarounds for the upstream Flutter issue in CachedNetworkImage. The approach I have taken is to implement my own CacheManager and FileService so I can add some simple retry logic. If the request fails with a ClientException, then we wait for 100ms or so, then retry the request up to X times.

Here is the FileService we are using right now - it could easily be extended to retry on response error codes (501, etc) but we are not concerned with that for our purposes.

/// A FileService for Flutter Cache Manager that implements
/// simple retry logic in the event that fetching fails due
/// to client errors, which typically occur with poor internet
/// connections.
///
/// Note that this service does not retry on certain HTTP error
/// codes, (400, 500, etc), but this would be trivial to extend.
class CaFileService extends FileService {
  CaFileService({
    /// Override the default HTTP client
    http.Client? httpClient,
    this.maxAttempts = 2,
  }) : _httpClient = httpClient ?? http.Client();

  /// The HTTP client to use. A Client will be automatically
  /// created if not set.
  final http.Client _httpClient;

  /// The maximum number of attempts before giving up
  /// on fetching the resource.
  final int maxAttempts;

  @override
  Future<FileServiceResponse> get(
    String url, {
    Map<String, String>? headers,

    /// The current attempt
    int attemptNumber = 1,
  }) async {
    final req = http.Request('GET', Uri.parse(url));
    if (headers != null) {
      req.headers.addAll(headers);
    }

    try {
      final httpResponse = await _httpClient.send(req);
      return HttpGetResponse(httpResponse);
    } catch (err) {
      if (attemptNumber < maxAttempts) {
        // We use an increasing delay with each attempt.
        final delay = attemptNumber * 100;
        await Future.delayed(Duration(milliseconds: delay));

        // retry the fetch
        return get(url, headers: headers, attemptNumber: attemptNumber + 1);
      } else {
        // Reached the maximum number of retries, so giving up.
        rethrow;
      }
    }
  }
}

You can use this by passing a custom CacheManager to CachedNetworkImage.

[Alfaizkhan]

Same issue, pls fix it :)

[marcellocamara]

Same issue here, for a lot of images in the same view - they are all downloading in the same time

[aissam-amez]

the same issue, I'm using cache manager, with errorBuilder some of the images on the page are rendered with the errorBuilder

[aissam-amez]

i used this code https://github.com/flutter/flutter/issues/25107#issuecomment-456667247 and added a timeout duration ,i think it fixed my problem

import 'dart:io';

class MyHttpOverrides extends HttpOverrides { @override HttpClient createHttpClient(SecurityContext? context) { return super.createHttpClient(context) ..maxConnectionsPerHost = 300 ..connectionTimeout = const Duration(minutes: 6) ..idleTimeout = const Duration(minutes: 6); } }

void main() { HttpOverrides.global = MyHttpOverrides(); runApp(MyApp()); }

[pishguy]

i have this problem yet