Randomly occuring Unexpected end of JSON on GET request

I’m developing a simple web project where one of the features (Related to the error) will display a quote, credit and source. This feature works as intended using setInterval every 12seconds to call a function which will make a connection to my XAMPP hosted MYSQL server and return a random row as a JSON object which I can use to display on the page. below is the Quote retrieval script and PHP:

quotes.js

(function() {
  ajax = new XMLHttpRequest();
  var method = "GET";
  var url = "data.php";
  var asynchronous = true; // revise asynchronous

  var quoteContainer = document.getElementById("quote");
  var authorContainer = document.getElementById("author");

  function getQuote() {

    ajax.onreadystatechange = function(){
      if (this.readyState == 4 && this.status == 200) {

        var data = JSON.parse(this.responseText);
console.log(data)

        quoteContainer.innerHTML =  """ + data.Quote + """
        authorContainer.innerHTML = data.Author + " - " + "<a href='"+ data.Source +"' target='_blank'>source</a>";

      }

    }

    ajax.open(method,url,asynchronous);
    ajax.send();
  }

  getQuote();
  setInterval(getQuote,12000); //set to 100 for testing

}());

Data.php

<?php
// write secondry query for seasonal messages
$conn = mysqli_connect("localhost","root","","quotes_db");
$sql = "SELECT * FROM quote_table ORDER BY RAND() LIMIT 1;";


$result = mysqli_query($conn,$sql);
$data= mysqli_fetch_assoc($result);

echo json_encode($data);
?>

The issue is that on random occasions while this is running the server returns a ‘null’ packet (with the titled error) I have checked the network data using Chromes developer console and the effected packets are empty and take slightly longer to return. I have checked my database table for special characters and it all seems normal. due to the packet returning null the page is left empty

1. How can I stop this error appearing, so that I can get a continuous stream of random rows from my table?
2. If the answer is not an obvious one what bug-testing steps should I take to find a fix?

If more information is needed I can update this post.

Error log

Answer

The issue is caused by your encoding: Jean de La Bruyère is transmitted as Jean de La Bruy�re by MySQL.

PHP json_encode() is not able to deal with the encoding of the French character as shown in this print_r() output of the mysqli_fetch_assoc() result:

Array
(
    [QuoteID] => 6
    [Quote] => Those who make the worst use of their time are the first to complain of its brevity.
    [Author] => Jean de La Bruy�re
    [Source] => https://www.goodreads.com/author/show/778012.Jean_de_La_Bruy_re
)

As json_encode() is only accepting UTF-8 encoded strings (“All string data must be UTF-8 encoded.”, cf. PHP Documentation), you can tell MySQL to return every result in UTF-8 encoding by simply executing the following query once after opening the connection:

mysqli_query($conn, "SET NAMES 'utf8'");