TimeoutError: Navigation timeout of 30000 ms exceeded (only in with localhost url's)

[mustafaeida]

Hello guys
i have this error
The command "PATH=$PATH:/usr/local/bin NODE_PATH=npm root -g node '/Volumes/Data/www/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"http:\/\/localhost:8000\/test","action":"screenshot","options":{"type":"png","args":[],"viewport":{"width":800,"height":600}}}'" failed. Exit Code: 1(General error) Working directory: /Volumes/Data/www/public Output: ================ Error Output: ================ TimeoutError: Navigation timeout of 30000 ms exceeded at /Volumes/Data/www/node_modules/puppeteer/lib/cjs/puppeteer/common/LifecycleWatcher.js:106:111 at async FrameManager.navigateFrame (/Volumes/Data/www/node_modules/puppeteer/lib/cjs/puppeteer/common/FrameManager.js:90:21) at async Frame.goto (/Volumes/Data/www/node_modules/puppeteer/lib/cjs/puppeteer/common/FrameManager.js:416:16) at async Page.goto (/Volumes/Data/www/node_modules/puppeteer/lib/cjs/puppeteer/common/Page.js:821:16) at async callChrome (/Volumes/Data/www/vendor/spatie/browsershot/bin/browser.js:191:9)

        $base64Data = Browsershot::url('http://localhost:8000/test')
           ->timeout(60)
            ->base64Screenshot();

and this code works with other links

And the http://localhost:8000/test link is working

[DanielFatkic]

Have you ever found an solution for this?

I'm getting a similar issue, but also only with the localhost. Calling google.com or any other website works just fine.

The command "PATH=$PATH:/usr/local/bin NODE_PATH=npm root -g node '/Users/d/Sites/localhost/vendor/spatie/browsershot/src/../bin/browser.js' '{"url":"https:\/\/localhost\/d","action":"pdf","options":{"path":"example.pdf","args":[],"viewport":{"width":800,"height":600}}}'" failed. Exit Code: 1(General error) Working directory: /Users/d/Sites/localhost/d/admin Output: ================ Error Output: ================ Error: net::ERR_CONNECTION_REFUSED at https://localhost/d at navigate (/usr/local/lib/node_modules/puppeteer/lib/cjs/puppeteer/common/FrameManager.js:115:23) at processTicksAndRejections (internal/process/task_queues.js:85:5)

[akhan619]

Ok. I had the same issue of timeout of 30000 ms when try to convert a view on Localhost. I was running it via php artisan serve. After playing around on a new Laravel project I narrowed it down to the use of a specific blade command.

<link href="{{ asset('css/app.css') }}" rel="stylesheet">

The issue seems to be that puppeteer is not handling local network requests. For now I have gotten it to work as follows:

@env('local')
      @php
            echo '<style>' . file_get_contents(realpath(public_path('css/app.css'))) . '</style>';
      @endphp
@endenv
@env(['staging', 'production'])
    <link href="{{ asset('css/app.css') }}" rel="stylesheet">
@endenv

The above works without a hitch. So something is up with localhost uri resources in puppeteer.

[Mahbubur-rahman-mishal]

Hello,

I am having the same error in my production website, sometimes it can create images and maximum time it can't create images.
Can you suggest me something?

[idecarva]

Hello,

Same error here on localhost

Browsershot::url(config('app.url')."/image")
    ->waitUntilNetworkIdle()
    ->noSandbox()
    ->ignoreHttpsErrors()
    ->setNodeBinary('/usr/bin/node')
    ->setNpmBinary('/usr/bin/npm')
    ->hideBackground()
    ->dismissDialogs()
    ->timeout(120)
    ->windowSize(1700, 390)
    ->save($absolutePathToImage);

The strangest thing is that the exact same code works on Tinkerwell but not on the browser, still looking for a solution...

[nymul-islam-moon]

have you found the solution?

[luciandex]

I found a possible solution on internet. This worked for me.
Run the following into your project root (or in workspace container if run in Docker).

$ which node

result ------> /usr/local/bin/node (may be different)

$ export NODE_PATH='/usr/local/bin/node' <---result

$ npm run dev <---- probably not neccessary to rerun this(?)

[rtaylor82]

I'm having the same problem on a Laravel Sail install of 20.04... works fine when I push to staging server hosted on Forge. So it's a local resource issue. Any ideas?

[dominikgeimer]

I am having the same issue on Sail.

[Mahbubur-rahman-mishal]

I have resolved my problem by minimizing the CSS and JS file, if possible you may try by minimizing your CSS and JS file

[rtaylor82]

It times out regardless of the page it's trying to snapshot, so I don't think it's related to my css/js files

[Alzy]

I'm currently having this issue as well. I am running on Windows using a Docker container for my app. To test, I've created an html file inside of the public folder called dummy.html. I can access this page easily in my chrome browser by going to http://localhost/dummy.html AND if I remote in to my docker container image and run curl http://localhost/dummy.html. The only time it doesn't work is when I try to run Browsershot on that url or any localhost url.

[rostockahoi]

Are y'all using Sail or plain artisan servel? If so, I think I have found the reason for why it's not working but I have not found a solution for it.

Laravel Sail is using artisan serve under the hood and it seems like it can only handle one connection at a time. Now, when calling route A to the server that triggers Browsershot, during that connection, Puppeteer tries to render the URL that should be saved by Browsershot. Because that initial call to route A is blocking artisan serve none of Puppeteers calls get a response in time.

When running a Browsershot command in e.g. Tinkerwell everything works fine. Also, calling external URLs is working too.

So how can we make Browsershot work while running Laravel with artisan serve? I don't see a way. For now a workaround is to use web server based setup that can handle multiple connections.

[rostockahoi]

I think I found a solution for using Browsershot with artisan serve. I could fix it by running Browsershot within a queue job. Here is how it works:

• create a job that runs the Browsershot command
• in your controller dispatch that job like MyRenderJob::dispatch() or even MyRenderJob::dispatchAfterResponse()
• configure the queue driver to be something other than sync, I use redis
• run artisan queue:listen
• hit your controller route

By using the queue the blocking request from my explanation above is shifted to be before Browsershot.

I wanted to use queue jobs for PDF rendering anyway so it's not a deal for me, might be for others.

[Rezrazi]

This solves it !
Something related to proc_open that is being used by Symfony's Process component. You need to have your server and Browsershot running on separate processes

[gabrielbidula]

Another solution to test locally would be on using Ngrok ie: Browsershot::url('https://5c04-31-151-144-8.ngrok.io/') .

[davidjr82]

For me the solution in development has been to access to the shell with sail shell and run a new php artisan serve from the container itself with php artisan serve --port=8001, and use the url http://localhost:8001 to make the snapshots instead of using the same localhost that is currently serving the main request.

Hope it helps to someone else.

[davidjr82]

Other option is to set the PHP_CLI_SERVER_WORKERS environment variable bigger than 1, and then the built-in php server can handle more than one request at the same time. This option exists from php7.4.

It's easy to find how to configure it in sail just googling it.

Hope it helps someone else.

[aaronballz]

This! Just add it to your docker-compose.yml:

[hyphen81]

this worked for me! thx!

[paulbeh]

Or if using artisan serve, run like this: PHP_CLI_SERVER_WORKERS=10 php artisan serve

[incoming-th]

This worked for me thanks

PHP_CLI_SERVER_WORKERS=10 php artisan serve

[razan-rai]

Sometime if you have image then you need to convert the image to base64.

Converting to base64

public function generateBase64EncodedImage($filename){
        $filePath = public_path($filename);
        if (file_exists($filePath)) {
            return base64_encode(file_get_contents($filePath));
        }
        return null;
    }

Generation of base64
$school->logo = $this->generateBase64EncodedImage($school->logo);

Using base64 in blade
<img class="gradesheet_logo" src="data:image/jpeg;base64,{{ $school->logo }}" alt="School Logo">