I did `yarn add @types/node -D`, but I'm still getting this error

Ddave I did `yarn add @types/node -D`, but I'm still getting this error

J

James•7/21/24, 3:48 AM

You might be hitting https://github.com/cloudflare/workerd/issues/1298

D

daveOP•7/21/24, 3:50 AM

all good, I ended up switching my project away from browser rendering.

몰

몰라세스•7/26/24, 4:31 AM

It seems like you can use a string that is unlikely to be included in the URL, and then divide it by that string on the server.

For example, if divide is , (comma), you can divide the string A "a.com,b.com,c.com" with A.split(",").

몰

몰라세스•7/26/24, 4:32 AM

I'm not sure since I haven't looked at the source code in detail, but this is the simplest way to pass an Array via URL.

몰몰라세스 It seems like you can use a string that is unlikely to be included in the URL, a...

H

Hamed•7/26/24, 4:58 AM

I'm not sure really how the

split

split

split

split method could be helpful in this case. But appreciate your comment.

H

Hamed•7/28/24, 1:15 PM

Hi again!

I've got this Worker already deployed to the Cloudflare. I need to run it every

x

x minutes. So I did it under

Settings > Triggers > Cron Triggers

Settings > Triggers > Cron Triggers

Settings > Triggers > Cron Triggers

Settings > Triggers > Cron Triggers of that specific worker (picture). But the worker never triggered and never run? And I can see the errors (picture) but I don't know where to track down the logs! I appreciate any thought!?

import puppeteer from '@cloudflare/puppeteer';
import { nanoid } from 'nanoid';

const URLS = [
    'https://cloudflare.com',
    'https://google.com',
    'https://wikipedia.org',
];

export default {
    async fetch(_, env) {
        let browser;
        try {
            browser = await puppeteer.launch(env.MYBROWSER);

            const processUrl = async (url) => {
                const page = await browser.newPage();
                await page.goto(url);
                let img = await page.screenshot();

                const filename = new URL(url).hostname.replace(/^www\./, '').replace(/\./g, '-');
                const id = nanoid(5);

                await env.BROWSER_KV_DEMO.put(`${filename}_${id}`, img);

                await page.close();
            };

            await Promise.all(URLS.map(processUrl));
        } catch (error) {
            console.error({ error });
        } finally {
            if (browser) {
                await browser.close();
            }
        }
        return new Response('ok');
    },
};

import puppeteer from '@cloudflare/puppeteer';
import { nanoid } from 'nanoid';

const URLS = [
    'https://cloudflare.com',
    'https://google.com',
    'https://wikipedia.org',
];

export default {
    async fetch(_, env) {
        let browser;
        try {
            browser = await puppeteer.launch(env.MYBROWSER);

            const processUrl = async (url) => {
                const page = await browser.newPage();
                await page.goto(url);
                let img = await page.screenshot();

                const filename = new URL(url).hostname.replace(/^www\./, '').replace(/\./g, '-');
                const id = nanoid(5);

                await env.BROWSER_KV_DEMO.put(`${filename}_${id}`, img);

                await page.close();
            };

            await Promise.all(URLS.map(processUrl));
        } catch (error) {
            console.error({ error });
        } finally {
            if (browser) {
                await browser.close();
            }
        }
        return new Response('ok');
    },
};

import puppeteer from '@cloudflare/puppeteer';
import { nanoid } from 'nanoid';

const URLS = [
    'https://cloudflare.com',
    'https://google.com',
    'https://wikipedia.org',
];

export default {
    async fetch(_, env) {
        let browser;
        try {
            browser = await puppeteer.launch(env.MYBROWSER);

            const processUrl = async (url) => {
                const page = await browser.newPage();
                await page.goto(url);
                let img = await page.screenshot();

                const filename = new URL(url).hostname.replace(/^www\./, '').replace(/\./g, '-');
                const id = nanoid(5);

                await env.BROWSER_KV_DEMO.put(`${filename}_${id}`, img);

                await page.close();
            };

            await Promise.all(URLS.map(processUrl));
        } catch (error) {
            console.error({ error });
        } finally {
            if (browser) {
                await browser.close();
            }
        }
        return new Response('ok');
    },
};

import puppeteer from '@cloudflare/puppeteer';
import { nanoid } from 'nanoid';

const URLS = [
    'https://cloudflare.com',
    'https://google.com',
    'https://wikipedia.org',
];

export default {
    async fetch(_, env) {
        let browser;
        try {
            browser = await puppeteer.launch(env.MYBROWSER);

            const processUrl = async (url) => {
                const page = await browser.newPage();
                await page.goto(url);
                let img = await page.screenshot();

                const filename = new URL(url).hostname.replace(/^www\./, '').replace(/\./g, '-');
                const id = nanoid(5);

                await env.BROWSER_KV_DEMO.put(`${filename}_${id}`, img);

                await page.close();
            };

            await Promise.all(URLS.map(processUrl));
        } catch (error) {
            console.error({ error });
        } finally {
            if (browser) {
                await browser.close();
            }
        }
        return new Response('ok');
    },
};

HHamed Hi again! 👋 I've got this Worker already deployed to the Cloudflare. I need ...

K

kian•7/28/24, 1:38 PM

You need a

scheduled

scheduled

handler,

fetch

fetch

is for HTTP requests

K

kian•7/28/24, 1:38 PM

https://developers.cloudflare.com/workers/configuration/cron-triggers/#1-define-a-scheduled-event-listener

Y

yangyangy•7/28/24, 3:52 PM

workers.api.error.no_access_to_browser_worker [code: 10088]

J

jjjrmy•7/28/24, 9:28 PM

is there any way to get around the Cloudflare Human Check?

Jjjjrmy is there any way to get around the Cloudflare Human Check?

H

Hello, I’m Allie!•7/28/24, 9:52 PM

Be a human, click the button?

H

Hello, I’m Allie!•7/28/24, 9:54 PM

Oh, in Browser Rendering? Not that I know of

H

Hello, I’m Allie!•7/28/24, 9:54 PM

Unless it is your website

E

Erisa•7/28/24, 10:26 PM

Well browser rendering is not a human, so it would be intentional that you can't pass it.

E

Erisa•7/28/24, 10:26 PM

If it's your website you can identify those requests in some way and bypass challenges for them

E

emil•8/2/24, 12:06 PM

Not exactly sure on the concurrent sessions pricing. If I run 10 sessions at a time max is it correct I won't ever be billed for concurrent sessions? (I'm on Workers paid)

E

emil•8/2/24, 12:07 PM

Also I have a 1/minute Cron trigger on the same worker with my Browser binding, but it doesn't actually use the browser binding, so that shouldn't start any sessions, correct?

E

emil•8/2/24, 12:51 PM

Also getting this on page.pdf() calls with Puppeteer - looks like the GitHub issue on it had no answers since April: https://github.com/cloudflare/puppeteer/issues/37

GitHub

[Bug]: Puppeteer PDF generation via Page.pdf() method · Issue #37 ·...

Bug description I was creating a simple html to pdf converter when I stumbled into a little issue with all the current version of the fork. In the current implementation of the Page.pdf method in t...

0

0xbrmn•8/11/24, 1:23 PM

Adding WebGL to Browser rendering would be amazing.

M

Mr. Technician•8/12/24, 2:03 PM

Are there plans to allow more than 2 browser per minute for the rendering API?

M

Mr. Technician•8/12/24, 2:03 PM

it's an unfortunate limitation that means I can't use it for my project

MMr. Technician Are there plans to allow more than 2 browser per minute for the rendering API?

P

Peps•8/12/24, 2:30 PM

Hm out of curiosity, is there a reason you can't re-use sessions?

P

Peps•8/12/24, 2:31 PM

There's a guide on how to re-use session at https://developers.cloudflare.com/browser-rendering/get-started/reuse-sessions/

Cloudflare Docs

Reuse sessions · Browser Rendering docs

The best way to improve the performance of your browser rendering worker is to reuse sessions. One way to do that is via Durable Objects, which allows …

M

Mr. Technician•8/12/24, 2:31 PM

hmm I was not aware of that as an option...

M

Mr. Technician•8/12/24, 2:31 PM

but I would still need to run tasks in serial, no?

M

Mr. Technician•8/12/24, 2:33 PM

I have site that currently uses Cloudflare pages for the React piece but uses Azure Functions coupled with Browserless in a VM for web scraping

M

Mr. Technician•8/12/24, 2:52 PM

the issue is I need to spin up a new browser each time a user makes a new request. Reuse is on the table but not if I need many concurrent browsers

P

Peps•8/12/24, 3:21 PM

I need to spin up a new browser each time

why?

PPeps > I need to spin up a new browser each time why?

M

Mr. Technician•8/12/24, 7:32 PM

I guess I am using the wrong term. What I need is multiple discrete puppeteer sessions if there happen to be multiple concurrent users running different requests

M

Mr. Technician•8/12/24, 8:08 PM

https://developers.cloudflare.com/browser-rendering/platform/limits/

Cloudflare Docs

Limits · Browser Rendering docs

Control and interact with a headless browser instance programmatically.

M

Mr. Technician•8/12/24, 8:08 PM

"two concurrent browsers"

M

Mr. Technician•8/12/24, 8:09 PM

so does browser = session?

M

Mr. Technician•8/12/24, 8:34 PM

I'm confused as to how this is useful to much of anyone if it's so limited

P

Peps•8/12/24, 9:34 PM

hm you could create multiple browser contexts per browser I believe

P

Peps•8/12/24, 9:34 PM

and then have a context per-user

PPeps hm you could create multiple browser contexts per browser I believe

M

Mr. Technician•8/12/24, 11:19 PM

I was inferring that possibility from people saying that taking screenshots freezes the entire browser context

M

Mr. Technician•8/12/24, 11:19 PM

I am not taking screenshots so that should be fine

.

.gwapes•8/13/24, 2:20 PM

Hi, im following this with ts https://developers.cloudflare.com/browser-rendering/get-started/screenshots/, but im getting this error? Idk what's wrong

Argument of type 'Fetcher' is not assignable to parameter of type 'BrowserWorker'.
  Types of property 'fetch' are incompatible.
    Type '(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined) => Promise<Response>' is not assignable to type '{ (input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<...>; }'.

//env 
import { Fetcher } from "@cloudflare/workers-types";

export interface env {
    MYBROWSER: Fetcher
}

Argument of type 'Fetcher' is not assignable to parameter of type 'BrowserWorker'.
  Types of property 'fetch' are incompatible.
    Type '(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined) => Promise<Response>' is not assignable to type '{ (input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<...>; }'.

//env 
import { Fetcher } from "@cloudflare/workers-types";

export interface env {
    MYBROWSER: Fetcher
}

Argument of type 'Fetcher' is not assignable to parameter of type 'BrowserWorker'.
  Types of property 'fetch' are incompatible.
    Type '(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined) => Promise<Response>' is not assignable to type '{ (input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<...>; }'.

//env 
import { Fetcher } from "@cloudflare/workers-types";

export interface env {
    MYBROWSER: Fetcher
}

Argument of type 'Fetcher' is not assignable to parameter of type 'BrowserWorker'.
  Types of property 'fetch' are incompatible.
    Type '(input: RequestInfo<unknown, CfProperties<unknown>>, init?: RequestInit<CfProperties<unknown>> | undefined) => Promise<Response>' is not assignable to type '{ (input: RequestInfo | URL, init?: RequestInit | undefined): Promise<Response>; (input: RequestInfo, init?: RequestInit | undefined): Promise<...>; }'.

//env 
import { Fetcher } from "@cloudflare/workers-types";

export interface env {
    MYBROWSER: Fetcher
}

Sscythe Could you be hitting this https://github.com/cloudflare/workerd/issues/1298 ? Ot...

.

.gwapes•8/15/24, 9:23 PM

Tbh I think the docs are wrong. https://developers.cloudflare.com/browser-rendering/get-started/screenshots/ the typescript code here says to type MYBROWSER as Fetcher, but await puppeteer.launch takes BrowserWorker

Cloudflare Docs

Deploy a Browser Rendering Worker | Browser Rendering docs

By following this guide, you will create a Worker that uses the Browser Rendering API to take screenshots from web pages. This is a common use case for browser automation.

T

tony.l•8/19/24, 4:22 AM

Hi, I'm getting

failed: Code generation from strings disallowed for this context

failed: Code generation from strings disallowed for this context

failed: Code generation from strings disallowed for this context

failed: Code generation from strings disallowed for this context whenever an xpath selector is used on @Cloudflare/puppeteer. I understand it's a security measure to restrict the use of

createFunction

createFunction

createFunction

createFunction in the worker, but it's necessary for xpaths to work in puppeteer. does anyone have a clue how to work around this?

call site-

page.waitForXPath(xPathSelector, { visible: true })

page.waitForXPath(xPathSelector, { visible: true })

page.waitForXPath(xPathSelector, { visible: true })

page.waitForXPath(xPathSelector, { visible: true })
extracted stacktrace-

  stack: EvalError: Code generation from strings disallowed for this context
    at new Function (<anonymous>)
    at createFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93195:9)
    at interpolateFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93214:10)
    at get _querySelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93288:33)
    at XPathQueryHandler.waitFor (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93374:34)
    at Frame2.waitForSelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102047:32)
    at Frame2.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102075:17)
    at CDPPage.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:100304:29)

  stack: EvalError: Code generation from strings disallowed for this context
    at new Function (<anonymous>)
    at createFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93195:9)
    at interpolateFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93214:10)
    at get _querySelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93288:33)
    at XPathQueryHandler.waitFor (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93374:34)
    at Frame2.waitForSelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102047:32)
    at Frame2.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102075:17)
    at CDPPage.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:100304:29)

  stack: EvalError: Code generation from strings disallowed for this context
    at new Function (<anonymous>)
    at createFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93195:9)
    at interpolateFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93214:10)
    at get _querySelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93288:33)
    at XPathQueryHandler.waitFor (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93374:34)
    at Frame2.waitForSelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102047:32)
    at Frame2.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102075:17)
    at CDPPage.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:100304:29)

  stack: EvalError: Code generation from strings disallowed for this context
    at new Function (<anonymous>)
    at createFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93195:9)
    at interpolateFunction (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93214:10)
    at get _querySelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93288:33)
    at XPathQueryHandler.waitFor (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:93374:34)
    at Frame2.waitForSelector (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102047:32)
    at Frame2.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:102075:17)
    at CDPPage.waitForXPath (file://<app-root>/.wrangler/tmp/dev-Ol4QPo/index.js:100304:29)

J

Jorge•8/22/24, 7:15 AM

Hii, does anyone know where can I find the pricing for the browser rendering?

I did `yarn add @types/node -D`, but I'm still getting this error

Similar Threads