Laravel-debugbar: Incompatible with BrowserSync Proxy

[iforwms]

I followed the installation steps as per the readme, but kept getting the following error in the console:

Uncaught SyntaxError: Unexpected token ILLEGAL

The line causing there error is:

phpdebugbar.addDataSet({ dataset values here });

I have BrowserSync set up as a proxy server for the built-in php server so I have live CSS injection, but when trying to use BrowserSync with the debugbar I get the error above. Switching to the PHP server port fixes the issue, but then BrowserSync doesn't work.

Local PHP server:

php -S localhost:8000

Gulp task:

gulp.task('browser-sync', function() {
 browserSync({
  proxy: "localhost:8000"
  });
});

[robbinhan]

me too

[intositeme]

Having the same issue as well. Running on Laravel 5.1.
Am using a proxy of myowndomain.com

[Kurre]

This problem is apparently caused by Foxy module, one of BrowserSync's dependencies.

https://github.com/BrowserSync/browser-sync/issues/644

Devs are aware of this issue (have been for some time), so hopefully patch is on the way.

[wPatrick]

maybe this helps as a workaround until its patched

https://github.com/BrowserSync/browser-sync/issues/644#issuecomment-151169262

[leek]

I ended up creating a Config ServiceProvider that conditionally disables the Request Data Collector(s) when I'm viewing my app through BrowserSync. The rest of the DebugBar works fine and when I need the Request information, I load the app without BrowserSync.

Here is ConfigServiceProvider.php, if anyone is interested:
https://gist.github.com/leek/9074c61385a968f72437

[barryvdh]

So this should be fixed by updating foxy or browser sync, right?

[danbovey]

Still get this after upgrading from [email protected] to [email protected]. It is still dependent on a browser-sync version from 9 months ago.

[quentindecosne]

I just updated Browser-sync per https://github.com/BrowserSync/browser-sync/issues/644#issuecomment-200004124 and no more errors.

[hikouki]

@iforwms
Try to use browser-sync v2.11.2 :)

[Twinski]

Thanks so much @hikouki ! That did the trick for me :)

[dan-iway]

This problem came up again because although the error got fixed in foxy, newer versions of browser-sync no longer use foxy but its own implementation of the rewriteLinks function, which again breaks the escaping.

I finally could fix this by using this proxy configuration for browserSync:

        proxy: {
            target: '127.0.0.1',
            reqHeaders: function () {
                return { host: 'localhost:3000' };
            }
        }

Because the proxy target does not literally match the host nothing gets rewritten when accessing the page on http://localhost:3000. Setting the host in reqHeaders additionally fixes the problem of redirects within laravel not honoring port 3000.

[pappu687]

Thanks @dan-iway

Since Laravel's artisan start at localhost:8000 by default, this might help others.

proxy: {
    target: 'localhost:8000',
    reqHeaders: function() {
        return {
            host: 'localhost:3000'
        };
    }
}

[acidjazz]

much appreciated @pappu687 this worked for me, before I was getting "invalid or unexpected token"

[acidjazz]

any ideas on how we could ultimately resolve this btw? does anyone have a clear idea on which tool to blame?

[funder7]

Thank you very much @pappu687!
Your fix its still used in '18 :)

[taver]

thanks @pappu687, still used here too :)

[avengerweb]

Any news?

[MiguelDebruyne]

Any news on this issue? I've been downloading themes from older projects with debugbar and it worked. Don't know why though.

I don't understand how the routing and the ports works, I whish I did.. The connectPHP port and the Browsersync proxy mixed through each other isn't making it more comprehensible for me, but it works.
I tried the suggestions of Browsersync settings to no avail. The page doesn't load a thing.

p.connectPhp.server({
        base: dirs.src,
        port: 8010,
        // Remove logging of files per page refresh
        stdio: 'ignore'
    }, function () {
        p.browserSync.init({
            // What i normally use
            // proxy: '127.0.0.1:8010',

            // October cms - debugbar fix
            // https://github.com/barryvdh/laravel-debugbar/issues/405#issuecomment-232556274
            proxy: {
                target: 'localhost:8000',
                reqHeaders: function() {
                    return { host: '127.0.0.1:8010' };
                }
            },
            port: 8080,
            notify: false,
            open: false
            // logLevel: 'silent'
        });
    });

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If this issue is still present on the latest version of this library on supported Laravel versions, please let us know by replying to this issue so we can investigate further.
Thank you for your contribution! Apologies for any delayed response on our side.