Symfony profiler for your SPA (Single page application)

Here's a quick installation guide

Install the bundle into your API PROJECT

composer req mgdsoft/symfony-profiler-spa --dev

Add the new route to your API PROJECT:

# config/routes/web_profiler.yaml
when@dev:
    mgd_profiler_spa:
        resource: '@SymfonyProfilerSPABundle/Resources/config/routing/routing.yml'
        prefix: /

Create the asset or copy if you are not using asset component:

bin/console assets:install

This execution will copy 'load_toolbar_spa.js' file to your public folder, you only have to include it in your html file to your FRONTEND project:

<script src="//yourdomain.lol/bundles/symfonyprofilerspa/load_toolbar_spa.js"></script>

That's all! The load_toolbar_spa.js is created in vanilla JavaScript, so it's available for use in all frameworks and libraries. Interceptors available for XHR and fetch.

JS Config

For custom url toolbar you have to use this custom attribute data-url-toolbar

<script src="//yourdomain.lol/bundles/symfonyprofilerspa/load_toolbar_spa.js" defer data-url-toolbar="{ORIGIN}/internal/toolbar/{TOKEN}"></script>

How it works

If you take a look inside src/Resources/public/load_toolbar_spa.js, you'll find a simple script that creates an HTTP interceptor. The first x-debug-token-link header it detects will trigger a request to the API server to retrieve the profiler.

Trouble with CORS

Dont forget your nginx configuration to avoid cors

add_header Access-Control-Allow-Origin "http://yourdomain.lol";
add_header Access-Control-Allow-Methods "GET, POST, OPTIONS";
add_header Access-Control-Allow-Headers "Origin, X-Requested-With, Content-Type, Accept, Authorization, x-debug-token-link, X-Debug-Token";
add_header Access-Control-Expose-Headers "X-Debug-Token, X-Debug-Token-Link";

Cool things

Don't forget to configure your IDE to open errors/controllers, and for more information, please visit https://symfony.com/doc/current/reference/configuration/framework.html#ide. If you have trouble configuring PHPStorm, you can use this snippet for a quick solution.

parameters:
    env(SYMFONY_IDE): "javascript: (function () { let file = '%%f'; file = file.replace('/var/www/your-project/', ''); let newUrl = 'http://localhost:63342/api/file?file='+file+'&line=%%l'; fetch(newUrl); })()"

framework:
    ide: '%env(SYMFONY_IDE)%'

Replace /var/www/your-project/ with the current path of your project. It works using relative paths, so it will work in Docker. For more information, please visit https://www.develar.org/idea-rest-api/."

Enjoy!