Symfony version(s) affected: 4.4.13

Description

When Vue is not running as a SPA and fires an AJAX request on page load, the Web Debug toolbar does not show the AJAX request. Subsequent AJAX requests show fine. This is because the the WDT interceptor code runs after Vue does.

The code WDT uses to intercept AJAX requests is XMLHttpRequest.prototype.open

Specifically, it calls startAjaxRequest(idx) here.

This code runs inside Sfjs = (function() { which runs after the Vue code. I even tried stripping out the entire code which extends the XMLHttpRequest prototype, and run it outside of the Sfjs object.

However, Vue still runs before it does. This is because the Vue scripts are included before the Web Debug Toolbar script, and I don't know if there's a way to change that order.

How to reproduce

Add Vue and Axios to a Symfony project. Render Vue inside a Twig template. Configure Axios with the following header so Symfony knows Axios is making AJAX requests: { "X-Requested-With": "XMLHttpRequest" }. Make an API call as soon as Vue is ready to (i.e. without waiting for any user interaction).

Expected result: WDT shows the AJAX request.

Actual result: WDT does not show the AJAX request, but loading up /_profiler shows the AJAX call was made.

Possible Solution

A similar problem was reported (and fixed) at #22297. However, it doesn't apply to this case, because the WDT javascript runs after Vue.

Something like symfony/webpack-encore#429 (comment) works:

    {% for js in encore_entry_js_files('entrypoint') %}
            <script src="{{ asset(js) }}" type="text/javascript" defer="defer"></script>
    {% endfor %}

In this case this requirement should be clearly documented in the Encore setup. It would be better to have it work this way by default in the development environment.