slice error on fetch

[Tayger]

Hello

In the past I was using the fetch operation like this:

var gameObject = new kendo.data.DataSource({
  transport: {
    read: {
      url: "../php/readgamelist.php",
        type: "POST",
        dataType: "json",
        contentType: "application/json; charset=utf-8"
    }
  }
  ,success {}
  ,error {}
});


gameObject.fetch (...)

 

I've found out that with the success/error won't work anymore (maybe I'm wrong on success/error anyway and it never really worked properly). Of course in between I have installed newer KendoUI versions. Nevertheless I had to rewrite my code to make it working again:

console.log ('1');

var gameObject = new kendo.data.DataSource({
  transport: {
    read: {
      url: "../php/readgamelist.php",
      type: "POST",
      dataType: "json",
      contentType: "application/json; charset=utf-8"
    }
  }
});

console.log ('2');

gameObject.fetch()
  .then(function(){
    console.log ('3');
    console.log (gameObject.data());
  })
  .catch(function (error) {
    console.log ('4');
    console.log (error);
  });

 

This now works so far as it should. The problem comes up when I will not use the page (with this code) for hours. So there is a kind of server timeout. Calling then this function by page (GUI) will lead into this Browser output:

1
2
TypeError: e.slice is not a function. (In 'e.slice(0)', 'e.slice' is undefined)                 success kendo.all.js  7001

I have no clue why this error is coming up and how to fix that. My server (on which readgamelist.php is stored) can even handle a timeout and would return information about that (by return it to gameObject.data() but it doesn't seem to come to this since "3" is not in the error output. So therefore it won't come to read from the php file.

There is no example to catch an error in your fetch examples but I think I did it the correct way. I'm also confused that kendo.all.js returns from "success". I don't know the current version of Kendo UI I'm using (can't find any version hint in the files but it must be one of the latest one).

What else can I do to catch the real error?

Regards

 

[Marin Bratanov]

Hi,

The following section of our documentation explains the most common reasons and fixes for this error: https://docs.telerik.com/kendo-ui/troubleshoot/troubleshooting-common-issues#widget-throws-the-eslice-is-not-a-function-error.

On the success and error config options - they have never been available, you can see the full API of the Kendo Data Source widget in the following page: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource. The error and requestEnd events are the ways to know when the response has come in.

To handle the fetch() callback, you need to provide a function as an argument to it, and the argument of that function receives the data that is in the response of the XHR request. If the data is malformed and cannot be parsed, and exception may be thrown, though. It is likely that the timeout is causing the server to return a generic message or an entire HTML page and not a JSON literal/array.

The "success" method in the stack trace probably comes from the underlying jQuery .ajax() call where the success handler was called because a response was received that was not marked as an error by the server. Perhaps marking the server responses as erroneous when a timeout has occurred will let you handle errors through the error event. Alternatively, responseEnd may let you examine the response to see if it contains a specific error message you have.

All that said, maybe you need to define a schema to capture the exact shape of the returned response: https://docs.telerik.com/kendo-ui/api/javascript/data/datasource/configuration/schema. The data field of the schema can also be a function where the response comes in, so you could add logic there to look for the error markers your servicve sends, so you can return an array (an empty one, or with dummy data, or whatever is needed for your case) in case you discover missing data in the response, so this may work for capturing your specific conditions as well. You can do something similar with the parse function.

Regards,
Marin Bratanov
Progress Telerik

[Tayger]

Hello Marin

Thanks a lot for your informative answer! With that I could find out that I had a filter set in my Browser and therefore the network traffic to the server (and back) was filtered. That made me thinking that fetch was not doing anything to/with the server. After removing the filter I could see all the server traffic and realised that, in case of server timeout, I send back an object (not an array). It seems that fetch expects an array (what the "slice" error also confirm). It then was easy to transform the object into an array on server timeout and send this array back. The fetch operation now can handle this.

Since the content/structure is different on a server timeout it's difficult to implement a fixed schema for the usually expected data pattern. All over it works again, all fine, tnx!

Regards

[Marin Bratanov]

Thank you for sharing the exact situation and your solution with the community, Tayger. I hope they will be useful to someone else in a similar situation too.

--Marin