'Failed to load resource: net::ERR_INCOMPLETE_CHUNKED_ENCODING in Django deployed to Heroku

enter image description here

How to fix this error? I have set a server-sent event that sends data only if there is new data in the database to the frontend. but every minute it keeps on sending data even though there is no new data in the database. This problem is not present during development, but when deployed to Heroku this error shows.

views.py

def event_stream():
    initial_data = ""

    while True:
        deposit_records = Deposit.objects.filter().values('date').order_by(
            '-id').annotate(bottles=Sum('number_of_bottles'), credits=Sum('credits_earned'), not_bottle=Sum('not_bottle'))
        bottle = Deposit.objects.aggregate(Sum('number_of_bottles'))[
            'number_of_bottles__sum']
        # deposit_records = Deposit.objects.order_by(
        #     "-id").values("number_of_bottles", "credits_earned", "date")
        data = json.dumps(list(deposit_records) +
                          list(str(bottle)), cls=DjangoJSONEncoder)
        # print(data)
        if not initial_data == data:
            yield "\ndata: {}\n\n".format(data)
            initial_data = data
        time.sleep(1)


def stream(request):
    response = StreamingHttpResponse(event_stream())
    response['Content-Type'] = 'text/event-stream'
    return response

JS

var eventSource = new EventSource("{% url 'stream' %}")

eventSource.onopen = function(){
        console.log('yay its open');
    }

eventSource.onmessage = function(e){
        if(!e){
            eventSource.end()
        }
        else{
            console.log(e)
            var final_data = JSON.parse(e.data)
}
eventSource.onerror = function(e) {
        console.log(`error ${e}`);
    }


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source