customer-data.js error: .../section/load/?sections=instant-purchase&... JS error

Question

I keep getting a JS error in my site, it's an ajax get request to http://domain.com/customer/section/load/?sections=instant-purchase&update_section_id=false&_=1517327157790 which results in a "code 400 Bad request".

It gets called by the Instant Purchase module - which is disabled in my Magento 2.2.2 site.

What could cause this?

My understanding is that the sections.xml file does this, but if the module is disabled, it should stop, right?

What am I missing?

Answer 1

See my answer for a different question concerning similar issues:

https://magento.stackexchange.com/a/213550/14403

I believe this will work for you concerning instant-purchase as well.

Answer 2

sections.xml doesn't allow you to remove a section from being called sadly. Well not fully.

What happens is once upon a time you had that module enabled. As your visitors used your site, they populated the mage-cache-storage-section-invalidation key in their localStorage with values like {"instant-purchase":true}.

So whenever Magento makes a call to customer/section/load it looks to this key to know which sections to pull new data from the server for. Since you removed the module - and Magento didn't plan for us to remove their modules... (shame on you. and me.) - you get a 400 response because the key of instant-purchase doesn't exist on the server side.

You can prevent the PHP error and the 400 response by making a plugin to the Customer module.

# app/code/Namespace/Customer/etc/di.xml
    <type name="Magento\Customer\CustomerData\Section\Identifier">
        <plugin name="namespace-customer-plugin-customerdata-section-identifier" type="Namespace\Customer\Plugin\CustomerData\Section\Identifier" sortOrder="10" disabled="false"/>
    </type>

# app/code/Namespace/Customer/Plugin/CustomerData/Section/Identifier.php

class Identifier
{

    public function beforeMarkSections(
        \Magento\Customer\CustomerData\Section\Identifier $subject,
                                                          $sectionsData,
                                                          $sectionNames = null,
                                                          $updateIds = false
    ) {
        $sectionsToExclude = [ 'instant-purchase' ];
        foreach( $sectionsToExclude as $excludedSectionName ) {
            if( in_array( $excludedSectionName, $sectionNames ) ) {
                $sectionNames = array_filter( $sectionNames, fn( $s ) => $s != $excludedSectionName );
            }
        }
        return [$sectionsData, $sectionNames, $updateIds];
    }

}

Additional modules/sections you've removed can be added here as well.

However, this doesn't fix the bigger issue that the browser is calling for a section that it doesn't need to. Ideally deleting the section from localStorage would be the best solve here. I didn't write my example here to do that... Wouldn't be hard for someone to add that big. Instead I just removed that section from the list of sections to be called to the server.

In vendor/magento/module-customer/view/frontend/web/js/customer-data.js modify the reload function and add this bit of logic at the very top of it. This will remove your specified sections from the list of sections sent to customer/section/load.

var sectionsToExclude = [ 'instant-purchase' ];
for( var i = 0; i < sectionsToExclude.length; i++ ) {
    var indexMessages = sectionNames.indexOf( sectionsToExclude[i] );
    if( indexMessages > -1 ) {
        sectionNames.splice( indexMessages, 1 );
    }
    if( sectionNames.length == 0 ) {
        break;
    }
}

Also edit vendor/magento/module-customer/view/frontend/web/js/section-config.js

Replace this core line of code: return _.union(_.toArray(actions), _.toArray(sections['*']));

With this logic:

var mergedSectionNames =  _.union(_.toArray(actions), _.toArray(sections['*']));
var sectionsToExclude = [ 'instant-purchase' ];
for( var i = 0; i < sectionsToExclude.length; i++ ) {
    var indexMessages = mergedSectionNames.indexOf( sectionsToExclude[i] );
    if( indexMessages > -1 ) {
        mergedSectionNames.splice(indexMessages, 1);
    }
    if( mergedSectionNames.length == 0 ) {
        break;
    }
}
if( mergedSectionNames.length > 0 ) {
    return mergedSectionNames;
} else {
    return false;
}

Of course properly extend these files - don't edit the core files.

I use NewRelic to monitor JS errors. I've seen ~4k errors a day. After this change it's dropped down to ~300 a day. There are some other sources of this error, but this is a very common one.

Answer 3

Fixed this using window on load:

    <script type="text/javascript">
require([
        'jquery'
    ],
    function($) {
        $(window).on("load", function() {
            require([
                'Magento_Checkout/js/model/cart/totals-processor/default',
                'Magento_Customer/js/customer-data',
                'Magento_Checkout/js/model/quote',
                'Magento_Checkout/js/model/shipping-rate-processor/new-address',
                'Magento_Checkout/js/model/shipping-rate-processor/customer-address',
                'Magento_Checkout/js/model/shipping-rate-registry'
            ], function(defaultTotal, customerData, quote, defaultProcessor, customerAddressProcessor, rateRegistry) {
                $(document).ready(function() {

                    /** Do your code here */
                });

            });
        });
    });
</script>