Introduction

The JS Error: [object Object] is common on Magento sites.

This error is traced to a function called getFromServer which is a standard Magento function that retrieves user data from the server in multiple places.

In its default implementation, this getFromServer function throws a vague [object Object] function when it encounters any error from the server. This provides no information about which error occurred or what caused the error, which isn’t very helpful for debugging or investigating the issue.

Fortunately, we have a quick, straightforward fix that reveals the nature of the error and enables you to further investigate or action a fix.

Issue Discovery

The getFromServer function is part of Magento’s implementation for loading and managing user data. You can read more about this function in Magento's StackExchange post on Customer Sections.

There are multiple variations of this getFromServer function depending on the file and context, but it usually looks like this example from the customer-data.js file:

getFromServer: function(sectionNames) {
var parameters = {
    'requesting_page_url': window.location.href
};

if (productId) {
    parameters.data = {
        'product_id': productId
    };
}

if (_.isArray(sectionNames)) {
    parameters.sections = sectionNames.join(',');
}

return $.getJSON(options.sectionLoadUrl, parameters).fail(function(jqXHR) {
    throw new Error(jqXHR);
	});
}

You may see other versions of getFromServer that include extra parameters such as forceNewSectionsTimestamp and different function bodies, but in this article we will consider them together.

The final few lines of the function–which should be identical across the getFromServer implementations–request user section data from the server:

return $.getJSON(options.sectionLoadUrl, parameters).fail(function(jqXHR) {
    throw new Error(jqXHR);
	});

If an errors occur and the server cannot respond with the requested data, the error handler is triggered and the server error response, jqXHR, is thrown as an error.

The problem is that jqXHR is a JSON object, and the JavaScript error parameter expects a string. As a result,  the error converts the jqXHR object directly into its string form [object Object], which makes the object itself into a sort of “black box” that hides any helpful error information.

Potential Solutions

There are multiple methods to reveal the error object, depending on how you'd like to display the error data.

The most straightforward way is to simply stringify the entire JSON object, as below:

return $.getJSON(options.sectionLoadUrl, parameters).fail(function(jqXHR) {
    throw new Error(JSON.stringify(jqXHR));
	});

This reveals the error object from the server in a form you can observe in the browser console and in Noibu, albeit in a relatively raw format.

If you only want to see specific attributes of the jqXHR error object, you can throw a more specific error with only those attributes–e.g. statusText. You could also add code to clean up the response or format it to be more readable.

For example:

return $.getJSON(options.sectionLoadUrl, parameters).fail(function(jqXHR) {
		const errorMessage = jqXHR.statusText
    throw new Error(formatNicely(errorMessage));
	});

Conclusion & Next Steps

Applying this fix will NOT solve the underlying error that causes getFromServer to fail. Instead, this fix uncovers the error information for investigation and debugging. Without this additional context, you may find it difficult to troubleshoot or further investigate the real problem, as [object Object] will always be the same regardless of the error's specifics.