Facebook Graph API - Received Invalid JSON reply

Question

We are using Facebook Graph API v2.9 to run "feed balancing" application: Like What You Hate

The app runs React served from a NodeJs server.

The app was running fine a few months ago (Dec. 2017) when we made some updates but we recently discovered that the app had stopped working.

Upon investigation I found that when I hit the following endpoints:

/me/picture?height=80&width=80
/me/picture
/{a-defined-user-id}/picture

graph api is returning the following error in the response:

{
    "error": {
        "code": 1,
        "error_subcode": 1357046,
        "message": "Received Invalid JSON reply.",
        "type": "http"
    }
}

Other endpoints, such as:

/me
/me/likes
/me/likes?limit=1000

return a JSON object as expected.

I've used the Graph API Explorer to hit the /me/picture endpoint and I get what seems to be a valid JSON response.

So it seems to be something with the SDK code. We are using the Javascript SDK and mounting it in our app thusly:

window.fbAsyncInit = function() {
    window.FB.init({
        appId            : fbAppId,
        xfbml            : true,
        version          : 'v2.9',
        cookie           : true
    });
    window.FB.AppEvents.logPageView();
};

(function(d, s, id){
    var js, fjs = d.getElementsByTagName(s)[0];
    if (d.getElementById(id)) {return;}
    js = d.createElement(s); js.id = id;
    js.src = '//connect.facebook.net/da_DK/sdk.js';
    fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));

One thing to note is that we are getting the Danish SDK (da_DK) servers, but I have also tried the US version (en_US) and saw the same issue.

Edit: Just found that there is a recent Bug Report open for this issue.

Solution 1

Was just able to resolve this issue by modifying the endpoint URL, per the latest on the bug report.

change: /{USER_ID}/picture

to: /{USER_ID}/picture?redirect=false

Solution 2

We ended up just using the current user id from the response of /me and putting the endpoint directly into the source of the image component in React:

export default class Avatar extends React.Component {

    static propTypes = {
        userId
    };

    render () {
        const { userID } = this.props;
        return <img className="avatar__gfx" src={{ `https://graph.facebook.com/${userId}/picture?type=small` }} />
    }
}

Solution 3

There is a workaround until facebook solves this bug. You can use

/me/?fields=picture

This will work with Pages picture as well

{page-id}/?fields=picture

but sadly doesn't seem to work with userId

Comments

[Laust Deleuran]

This is the same way we ended up circumventing it, too.

[Barrett H.]

This is the defined behavior from: developers.facebook.com/docs/graph-api/reference/user/pictur‌​e "By default the picture edge will return a picture instead of a JSON response. If you want the picture edge to return JSON that describes the image set redirect=0 when you make the request."

[Jordan]

Yep, this has been the only solution for us so far.