Welcome Guest, Not a member yet? Register   Sign In
How to debug ajax requests?
#1
Question 

Hi! New CI user here. Pretty happy with it so far, but the things that puzzles me is debugging failed ajax requests.

So far I've been able to figure out what is going on by manually adding breakpoints, but I'd like to just get the regular error feedback CI normally provides when I visit the page directly, instead of receiving a blank 500 (Internal Server Error).

Am I missing something here?

[Image: ci-error.png]
Reply
#2

(This post was last modified: 10-06-2021, 11:32 PM by InsiteFX.)

Read this should help you out.

How do I debug a jQuery Ajax request

Give that a try.
What did you Try? What did you Get? What did you Expect?

Joined CodeIgniter Community 2009.  ( Skype: insitfx )
Reply
#3

Thank you for the response, unfortunately I'm not much further yet. I'm not using jQuery, just vanilla JS, so I'm working with formData. I'll post an example of my script below.

To test, I am adding a non-existing function to my controller code. When I change the routing to accept 'get' as well and then open this page, I'll get a nice descriptive error message, telling me that there is a "Call to undefined function App\Controllers\breaking_test()".

I'd like to get useful error messages like this in my ajax response, but as far as I can tell they are not in there. All I've found is a status: 500 and a generic statusText that contains "Internal Server Error".

But it is a big response object, perhaps I need to dig deeper? I did not find the "textStatus" or "errorThrown" objects mentioned in the link you posted. I'll add a screenshot of the response object as well.

[Image: full-response.png]

My (simplified) ajax script:

Code:
let formData = new FormData();
formData.append('id', element.dataset.id);

// Send request
fetch('/collectionscreens/move', { method: 'POST', body: formData })
  .then((response) => {
    if (response) {
      console.log('Response received');
      console.log(response);
    } else {
      throw Error('No response!');
    }
    if (response.ok == false) {
      console.log('Response not ok!');
      throw Error(response.statusText);
    }
    return response;
  })
  .then((response) => response.json())
  .then(data => {
    // Do stuff with data
  })
  .catch(error => {
    console.log('Somethings wrong...');
    console.error(error);
  });
Reply
#4

When I'm building between a JS environment and Codeigniter 4, I have found great use in something called ChromePhp (https://github.com/ccampbell/chromephp). As long as you're assured that your AJAX call is making it through (CSRF, authentication, etc.) and you want to find out what's actually going on in the backend, at any time you can call \ChromePhp::log($something) and it will show up in the Google Chrome console (same as console.log()). I always break my back end form controllers up into smaller bits so I can test A) the receipt of the data and B) what happens after I do something with it (response from external API, $model->errors(), etc.).

You have to also install the Chrome extension for it and ensure it's turned on for the page you're testing.
Reply
#5

(10-06-2021, 07:22 AM)DrSiemer Wrote: Hi! New CI user here. Pretty happy with it so far, but the things that puzzles me is debugging failed ajax requests.

So far I've been able to figure out what is going on by manually adding breakpoints, but I'd like to just get the regular error feedback CI normally provides when I visit the page directly, instead of receiving a blank 500 (Internal Server Error).

Am I missing something here?

[Image: ci-error.png]

How about using Network tab?
[Image: WsYOSud.png]
Reply




Theme © iAndrew 2016 - Forum software by © MyBB