FormatException randomly occurs while downloading JSON

Question

I'm trying to download json data from a custom API hosted in Heroku, the code works without issues most of the time, but randomly I get this error

flutter: FormatException: Unexpected character (at character 1)
<meta name="viewport" content="width=device-width,initial-scale=1.0,maximum...
^

I get this error at times, but if I re-download the same file using the same link it works, I tried everything, but still can't fix.

RandomData.dart

import 'package:digest/random.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter/foundation.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class RandomData extends ChangeNotifier {
  List<Random> articles = [];


  String utf8convert(String text) {
    List<int> bytes = text.toString().codeUnits;
    return utf8.decode(bytes);
  }

  Future addArticle(String url) async {
    try {
  http.Response _response = await http.get("http://randomapi.com/1?q=${url.trim()}");
  var decoded = utf8convert(_response.body.toString());
  var decodedData = jsonDecode(decoded);

  articles.add(Random(
    title: decodedData['title'],
    dateAdded: 'Added ${monthNames[date.month-1]} ${date.day}, ${date.year}',
    link: url,
    imageUrl: decodedData['image'],
));
  notifyListeners();

} catch (e) {
  print(e);
    }
  }
}

JSON Response:

{
  "item_id": 5,
  "title": "Example Domain",
  "image": "",
  "authors": [],
  "date": null,
  "video_links": [],
  "full_text": "Example Domain\n\nThis domain is for use in illustrative examples in documents. You may use this domain in literature without prior coordination or asking for permission.\n\nMore information...",
}

Please help me fix this.

Answer 1

We recently had a similar problem in our app. It was caused by the server returning a 502 Bad Gateway status, hence the response didn't contain a JSON-body but HTML instead. You could check if that's the case by checking the status code before decoding:

if (_response.statusCode == 200) {
  var decoded = // ...
} else {
  print('Something went wrong; status: ${_response.statusCode}');
}

I'm pretty sure that's the case here, as the exception you're getting shows HTML instead of the expected JSON: <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum...