Get Free Trial

Sporadic JSON parsing error with remote datasource

Tyler Ellis asked on August 31, 2020

We’ve experienced some erratic issues with the pivot component fetching and populating JSON formatted report data from a remote datasource.
Our implementation generally looks something like this:

report: {
dataSource: {
type: 'json',
filename: '/path/to/report.json'
// ...

It appears to “break” while walking over and parsing the JSON response, printing this to the browser console:

Uncaught SyntaxError: Unexpected token : in JSON at position 9
at JSON.parse ()
at b.AB (flexmonster.js:1094)
at Ne (flexmonster.js:1093)

Setting breakpoints to pause it immediately beforehand shows it passing a string that reads like this into JSON.parse:

"city_id":9, /* ... */ "is_primary":1}

Note the absent leading curly brace ({) – obviously that’s what’s causing JSON.parse to throw the above exception, but I can’t figure out how that’s happening – the response body is correctly formatted.
It’s very difficult to reproduce and almost seems random:

  • I’ve been able to get it to repeat with a very specific dataset, but even then it’s sporadic and only happens ~50% of the time.
  • I also can’t reproduce it in Firefox – it seems exclusive to Chromium-based browsers.
  • The problem disappears if I insert or remove a record from the dataset.

I thought this might be related to compression or content length: our server gzips the payloads at transfer, but disabling compression works. Fetching and parsing the data separately and passing it into the pivot component’s updateData() method also works. Neither of these workarounds are ideal as our datasets can often be enormous.
I don’t know that this problem is within your scope, but I figured I would reach out in case you have any ideas! Thanks in advance, and sorry for all the words!

5 answers

Vera Didenko Vera Didenko Flexmonster September 1, 2020

Hello, Tyler,
Thank you for reaching out to us. 
We would like to explain that such an issue could occur in the case of large JSON data. 
Recently, our team has released an experimental JSON stream loader for the optimized loading of large files. We kindly recommend trying out the new loader since it could help to resolve the issue you are facing. This loader is available only for loading files via URL.
To enable the stream loader, use dataSource.useStreamLoader: true in the report options, for example:

dataSource: {
filename: "",
useStreamLoader: true

We have prepared the JSFiddle example, which demonstrates the way to enable the mentioned loader.
This is available in the 2.8.14 version of Flexmonster. You are welcome to update the component.
Please let us know if this helps to resolve the issue. 
Looking forward to your reply.
Kind regards, 

Vera Didenko Vera Didenko Flexmonster September 7, 2020

Hello, Tyler,
How have you been? 
Our team would like to kindly take an interest in whether you found our previous response helpful. 
Did using the new JSON stream loader help to resolve the issue?
Looking forward to your feedback.
Kind regards, 

Vera Didenko Vera Didenko Flexmonster September 15, 2020

Hello, Tyler,
Our team is wondering if the JSON stream loader helped to resolve the issue.
Please let us know if everything works. 
Waiting for your reply.
Kind regards, 

Tyler Ellis September 15, 2020

Hey Vera!
Thanks for the tip and sorry for the late response! I’ve been out the past week.
I’ve upgraded the component and enabled that option, but unfortunately the problem is so difficult to reproduce that I’ll have to monitor it over time and watch if it props back up again. I should still have a snapshot of a dataset that was frequently causing it – I’ll try to toy around with that again and see if it’s still happening with these changes.
Thanks again for the help! I’ll keep you posted on how it works out!

Vera Didenko Vera Didenko Flexmonster September 16, 2020

Hello, Tyler, 
Thank you for the update. 
We will be happy to hear how it works out.
Looking forward to your feedback.
Kind regards,

Please login or Register to Submit Answer