0

I have a logging function which logs errors. When an Ajax Request fails with a non JSON data type, the log method should log it, however, we are getting the mutated error as the attached screenshot shows. I am trying to call this log action within a service.

Code

...
import {log} from '../actions/LoggingActions';
...
export default function request(url, opts, dispatch, type = 'application/x-www-form-urlencoded') {
  ...

  return new Promise((resolve, reject) => {
    $.ajax(args).then((data) => {
      dispatch(httpEndRequest([url, opts, dispatch]));
      resolve(data);
    }).fail((jqXHR, textStatus, errorThrown) => {
      const error = (jqXHR && jqXHR.responseJSON) ?
                      jqXHR.responseJSON.message :
                      'Error Making Request';
      dispatch(httpFailRequest([url, opts, dispatch], error));
      try {
        reject(JSON.parse(jqXHR.responseText));
      } catch (e) {
        console.log(jqXHR.responseText, jqXHR, error);
        reject(error);
        dispatch(log('Received data is not in JSON format', {requestUrl: url}, {result: e, response: jqXHR, status: textStatus, error: errorThrown}, 'error'));
      }
    });
  });
}

enter image description here

Suthan Bala
  • 3,209
  • 5
  • 34
  • 59
  • Using jQuery with React? Deal with effects. Check where you removed DOM element without sync with React. – elmeister Apr 10 '17 at 18:20
  • Doesn't seem like a good idea to have jquery doing that. Check this http://stackoverflow.com/questions/38836553/how-to-use-jquery-ui-with-react-js/40350880#40350880 – U r s u s Apr 10 '17 at 18:36
  • Thanks guys, I modified the code to use `axios` and the issue still persists. – Suthan Bala Apr 10 '17 at 20:34

1 Answers1

3

Instead of using jQuery with React, Use axios or fetch (Promise based HTTP clients). I personally prefer axios.

To use axios, do npm install axios --save. Then

import axios from 'axios';


return new Promise((resolve, reject) => {
  axios.get(url, {
    params: params
  })
    .then((response) => {
      resolve(response.data);
    })
    .catch((error) => {
      // error.response.status
      dispatch(log(error));
      reject(error);
    });
});
Dharmendra Poonia
  • 291
  • 1
  • 4
  • + for axios, simple – Nicholas Apr 10 '17 at 19:13
  • Thanks for the converted sample code, I have converted my code to use `axios`, but the issue still persists.. – Suthan Bala Apr 10 '17 at 20:35
  • Then I think issue is with something else here. A similar issue is here http://stackoverflow.com/questions/25026399/uncaught-error-invariant-violation-findcomponentroot-110-unable-to. See if you can figure out what the issue is or share some more code to understand the problem better. – Dharmendra Poonia Apr 11 '17 at 06:34