👋 Hello all - how can I get access to the beta? I'm looking to replace prerender.io in our stack, a

TTom 👋 Hello all - how can I get access to the beta? I'm looking to replace prerende...

Z

zegevlier•10/19/23, 1:16 PM

Put your account ID here browser-rendering-apiBrowser Rendering API Beta Access

Zzegevlier Put your account ID here https://discord.com/channels/595317990191398933/1112675...

T

TomOP•10/19/23, 1:20 PM

Will do, thanks!

T

TomOP•10/19/23, 2:00 PM

fyi - The docs here (https://developers.cloudflare.com/browser-rendering/platform/wrangler/#bindings) mention

node_compat

node_compat

but in the getting started example (https://developers.cloudflare.com/browser-rendering/get-started/screenshots/#4-configure-wranglertoml) its

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

compatibility_flags = [ "nodejs_compat" ]

A

Ashley•10/20/23, 11:48 AM

how long does it take to spin up a new browser instance? I am running this code:

    const browser = await puppeteer.launch(env.BROWSER);
    const page = await browser.newPage();

    const [res] = await Promise.all([
        page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() !== "OPTIONS", {timeout: 10 * 1000}),
        page.goto('https://someurl.com', {waitUntil: "domcontentloaded"}),
    ]);

    const browser = await puppeteer.launch(env.BROWSER);
    const page = await browser.newPage();

    const [res] = await Promise.all([
        page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() !== "OPTIONS", {timeout: 10 * 1000}),
        page.goto('https://someurl.com', {waitUntil: "domcontentloaded"}),
    ]);

    const browser = await puppeteer.launch(env.BROWSER);
    const page = await browser.newPage();

    const [res] = await Promise.all([
        page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() !== "OPTIONS", {timeout: 10 * 1000}),
        page.goto('https://someurl.com', {waitUntil: "domcontentloaded"}),
    ]);

    const browser = await puppeteer.launch(env.BROWSER);
    const page = await browser.newPage();

    const [res] = await Promise.all([
        page.waitForResponse(res => res.url().includes('something') && res.request().method().toUpperCase() !== "OPTIONS", {timeout: 10 * 1000}),
        page.goto('https://someurl.com', {waitUntil: "domcontentloaded"}),
    ]);

And locally, on my Mac, it takes 2-3 seconds in total. In Cloudflare however, it seems to be taking a lot longer perhaps? I don't really know, but it's getting exceeded resources and the log tail says CPU exceeded. It says for CPU, but again, I can't see how one request like this would use so much CPU... it's listed as using 75ms of CPU time, so I'm just really confused!

A

Ashley•10/20/23, 12:16 PM

This makes it even more confusing

Varying CPU times, some exceeded, some not

K

Kuririn•10/20/23, 4:21 PM

How can I check if I have access to the beta?

K

Kuririn•10/20/23, 4:22 PM

I filled out the form a few weeks ago.

K

Kuririn•10/20/23, 4:27 PM

I put my account id in the #Browser Rendering API Beta Access

KKuririn How can I check if I have access to the beta?

C

Chaika•10/20/23, 4:58 PM

I think the only way would just be trying to deploy a worker using the browser rendering binding: https://developers.cloudflare.com/browser-rendering/get-started/screenshots/
If it tells you that you don't have access.. then you don't

KKuririn I filled out the form a few weeks ago.

C

Chaika•10/20/23, 4:58 PM

If you never got anything back about filling in the form, I would assume you're not in it yet. Vero replies to everyone who puts their ID in that thread when they get enabled -- when that happens, you'd know for sure

Original message was deleted

M

Mackenly•10/21/23, 5:14 PM

It often seems a lot of forms get posted in blog posts and what not, maybe looked at a few times, and not used any further. Would be great if there were some sort of beta/early access program/request tool within the account dashboard. Really thankful for the team working on this discord.

Z

zegevlier•10/21/23, 6:04 PM

This is a bit off-topic for this channel, but I know that #magic-network-monitoring prioritized people in the discord because they usually give more feedback.

FFirefox When running the following code I keep getting a type error of `readable is not ...

I

ItsWendell•10/23/23, 6:53 PM

Any solutions found? It seems like what is returned in the PDF is not an Buffer, debugging this now more. Edit: Okay so

.pdf()

.pdf()

.pdf()

.pdf() doesn't work but this does:

        const qoutePdf = await page.createPDFStream({
            printBackground: true,
            format: 'a4',
        });

        // Create web compatible readable stream
        const { readable, writable } = new TransformStream();

        const writer = writable.getWriter();

        qoutePdf.on('data', (chunk) => {
            writer.write(chunk);
        });

        qoutePdf.on('end', () => {
            writer.close();
        });

        return new Response(readable, {
            status: 200,
            headers: {
                'Content-Type': 'application/pdf',
            },
        });

        const qoutePdf = await page.createPDFStream({
            printBackground: true,
            format: 'a4',
        });

        // Create web compatible readable stream
        const { readable, writable } = new TransformStream();

        const writer = writable.getWriter();

        qoutePdf.on('data', (chunk) => {
            writer.write(chunk);
        });

        qoutePdf.on('end', () => {
            writer.close();
        });

        return new Response(readable, {
            status: 200,
            headers: {
                'Content-Type': 'application/pdf',
            },
        });

        const qoutePdf = await page.createPDFStream({
            printBackground: true,
            format: 'a4',
        });

        // Create web compatible readable stream
        const { readable, writable } = new TransformStream();

        const writer = writable.getWriter();

        qoutePdf.on('data', (chunk) => {
            writer.write(chunk);
        });

        qoutePdf.on('end', () => {
            writer.close();
        });

        return new Response(readable, {
            status: 200,
            headers: {
                'Content-Type': 'application/pdf',
            },
        });

        const qoutePdf = await page.createPDFStream({
            printBackground: true,
            format: 'a4',
        });

        // Create web compatible readable stream
        const { readable, writable } = new TransformStream();

        const writer = writable.getWriter();

        qoutePdf.on('data', (chunk) => {
            writer.write(chunk);
        });

        qoutePdf.on('end', () => {
            writer.close();
        });

        return new Response(readable, {
            status: 200,
            headers: {
                'Content-Type': 'application/pdf',
            },
        });

E

Erwin•10/24/23, 1:44 AM

Hey lovely CF people.. I am having a proper challenge building the Open Telemetry library and auto-instrumenting it, because you are implementing exactly the same interface as say a service binding (a

fetch

fetch

method), but at least in your documentation you instruct people to invoke that in a way that is not spec compliant.

This leads to two problems:
1) I can't (easily) distinguish between a ServiceBinding and a BrowserRendering Binding
2) When I try to create a

Request

Request

out of the parameters you specify (

/v1/acquire

/v1/acquire

/v1/acquire

/v1/acquire) it (obviously) fails because

/v1/acquire

/v1/acquire

/v1/acquire

/v1/acquire is not a valid URL.

Now #2 can probably be easily solved by passing in a proper URL, but that would just prevent things from crashing.

Technically I could solve #1 by instrumenting any

fetch

fetch

function with a generic wrapper and then decide which instrumentation implementation to use based on the parameters passed into the

fetch

fetch

function, but that would be pretty brittle, because I would have to hardcode exactly what you would pass into the first request.

EErwin Hey lovely CF people.. I am having a proper challenge building the Open Telemetr...

I

ItsWendell•10/24/23, 7:25 AM

It's probably ideal to auto instrument any browser binding, regardless of clients used, but out of interest, have you tried auto-intstrumenting

@cloudflare/puppeteer

@cloudflare/puppeteer

@cloudflare/puppeteer

@cloudflare/puppeteer?

IItsWendell It's probably ideal to auto instrument any browser binding, regardless of client...

E

Erwin•10/24/23, 7:55 AM

The puppeteer library can easily add support for instrumentation by just using the OTel API functions. That will be picked up by this library and be automatically added.

E

Erwin•10/24/23, 7:56 AM

And I can write the code for the instrumenting of the binding, but I would love a proper way to identify what binding am looking at when I enumerate “Env”

K

Kuririn•10/24/23, 10:50 AM

is there a way to see my current usage of browser rendering api?

Original message was deleted

E

Erwin•10/24/23, 10:53 AM

Oh I knew that, but I wasn’t planning on adding that myself..

But I just forked the repository to see what it would take

N

Niek•10/24/23, 5:55 PM

i would also love to get access to browser rendering beta:

3e38dc7049f501248503b981bf442450

3e38dc7049f501248503b981bf442450

3e38dc7049f501248503b981bf442450

3e38dc7049f501248503b981bf442450

NNiek i would also love to get access to browser rendering beta: `3e38dc7049f501248503...

Z

zegevlier•10/24/23, 8:47 PM

Put the ID in here: browser-rendering-apiBrowser Rendering API Beta Access

Original message was deleted

E

Erwin•10/25/23, 1:01 AM

I just took a look at adding instrumentation to the

@cloudflare/puppeteer

@cloudflare/puppeteer

@cloudflare/puppeteer

@cloudflare/puppeteer package, I realised that while adding the spans is going to be very straightforward, it would be quite a bunch of work figuring out what to instrument. So if someone else wants to do that, I would be more than happy to help that. But I am going to focus on the core library in the copious spare time that I have

C

charl.dev•10/26/23, 9:51 AM

on our ent account, im getting

workers.api.error.no_access_to_browser_worker

workers.api.error.no_access_to_browser_worker

workers.api.error.no_access_to_browser_worker

workers.api.error.no_access_to_browser_worker, do we need to enable it?

getting the error when trying to run

dev

dev

dev

dev or

deploy

deploy

deploy

deploy. Role is worker admin. Can dm the acc id

7

730283•10/26/23, 9:57 AM

Can develop do something

Ccharl.dev on our ent account, im getting `workers.api.error.no_access_to_browser_worker`, ...

C

charl.dev•10/26/23, 10:03 AM

dm'd the PO the be added

Z

zegevlier•10/26/23, 10:07 AM

It's not enabled by default for any accounts currently. I assume your contact at CF will be able to add it for you, but otherwise you can also put the account ID in here: browser-rendering-apiBrowser Rendering API Beta Access

C

charl.dev•10/26/23, 10:17 AM

thanks, dont want to post the account id publically, messaged vero

Z

zegevlier•10/26/23, 10:18 AM

Alright. Just FYI: The account ID is considered safe to be public.

Zzegevlier Alright. Just FYI: The account ID is considered safe to be public.

C

charl.dev•10/27/23, 7:14 AM

okta was considered safe

Ccharl.dev okta was considered safe 🙂

H

Hello, I’m Allie!•10/27/23, 7:29 AM

I mean, yes, your account ID can be used to in an attack. But, to perform said attack, the attacker needs access to your account. If they have access to your account, they can find your account ID anyway

H

Hello, I’m Allie!•10/27/23, 7:29 AM

It's like a Discord User ID. Here's mine:

459755459117711362

459755459117711362

459755459117711362

459755459117711362. It can be used in a attack, but it is by no means what determines whether you are vulnerable or not

H

Hello, I’m Allie!•10/27/23, 7:30 AM

Same thing with your domain

C

charl.dev•10/27/23, 7:31 AM

Its more around our audit guys, I'm just playing with the okta thing.

I trust cf over any provider

I have browser rendering on my personal account, so can build on that till its enabled on the ent acc

A

Avocadio•10/28/23, 2:55 PM

hey, in this code it returns empty json

A

Avocadio•10/28/23, 2:55 PM

but i just want to get the inner text of selector's

A

Avocadio•10/28/23, 2:55 PM

can you guys help

A

Avocadio•10/28/23, 10:25 PM

i got this. in case anyone wonders visit my repo :https://github.com/cahmetcan/iuc-yemekhane-scrape

GitHub

GitHub - cahmetcan/iuc-yemekhane-scrape: Scraping Food List of Ista...

Scraping Food List of Istanbul University for goodwill - GitHub - cahmetcan/iuc-yemekhane-scrape: Scraping Food List of Istanbul University for goodwill

W

windymelt•10/30/23, 1:06 PM

I used this feature to generate OG:Image generation. My server serves html, then worker renders.

Wwindymelt I used this feature to generate OG:Image generation. My server serves html, then...

T

TomOP•10/31/23, 1:49 PM

Check out https://github.com/vercel/satori#documentation

it's probably faster than spinning up a whole browser to render an image

GitHub

GitHub - vercel/satori: Enlightened library to convert HTML and CSS...

Enlightened library to convert HTML and CSS to SVG - GitHub - vercel/satori: Enlightened library to convert HTML and CSS to SVG

J

jason•11/3/23, 9:30 PM

Hello. I'm taking a screenshot of websites with the

screenshot()

screenshot()

screenshot()

screenshot() method, and even with

fullPage: false

fullPage: false

fullPage: false

fullPage: false i'm getting the full site instead of just the view port. When I also pass

captureBeyondViewport: false

captureBeyondViewport: false

captureBeyondViewport: false

captureBeyondViewport: false i am getting only the viewport, however, I also get the scrollbar - which I don't want. Is there a reason I'm getting the full page even when setting it to false. I'm manaully setting the viewport as well.

A

Andy•11/7/23, 1:54 AM

Hello people!

A

Andy•11/7/23, 1:55 AM

I was told I can request for the beta access over here!

A

Andy•11/7/23, 1:56 AM

Can I get access for this Account ID: 6413bfbe023fbf879350a20fe7a2245b?

AAndy Hello people!

C

Chaika•11/7/23, 2:46 AM

Put your ID in the thread for access here: Browser Rendering API Beta Access (can also be found via pins)

CChaika 👋 Put your ID in the thread for access here: https://discord.com/channels/5953...

A

Andy•11/7/23, 3:20 AM

alright!

J

jason•11/7/23, 2:39 PM

Hello, I'm trying to understand the proposed pricing structure and how to optimize it. Based on the proposed pricing in this blog post[1], you get 500 sessions per month for free and then 10 cents per session after that. A session, as I understand it, is an active running browser. The naive approach, at any sort of scale, quickly becomes expensive. So the blog says to use a durable object to keep the browser alive and re-use the existing session instead of starting a new one. The example code uses an alarm to keep the browser alive while idle for 1 minute before shutting it down. Using this structure, If I'm understanding it right. Worst case scenario, if I had a job that triggered every 61 seconds, I'd end up starting about 1440 sessions per day. Which is $144/day or over $4k/mon. That's expensive. So, the solution would be the extend the life of the durable object to, say 2 minutes, which would reduce the $4k to $0, for the browser cost.

However, the durable objects aren't free, but I'm having a much harder time understanding how expensive they will be. For example, why do I need to shut down the browser at all? How much does it cost for the browser to sit idle in a Durable Object? Is that documented anywhere? And what if it's not idle? If my worker is handling 1 request per sec, so the browser is in active use all of the time, what sort of costs is that going to yield for the DO?

Any information would be appericiated.

[1] https://blog.cloudflare.com/running-serverless-puppeteer-workers-durable-objects/

Jjason Hello, I'm trying to understand the proposed pricing structure and how to optimi...

M

Mackenly•11/7/23, 4:28 PM

It costs about $4 to keep a DO alive an entrie month but I'm not sure if that's somehow against terms for browser rendering or if there's unintended consequences.
browser-rendering-api

As far as understanding the pricing I've got no clue and there hasn't been any real clarification on that. Not a single use case makes sense to pay $4000 per month for a single browser instance. You could hire a human for that.

MMackenly It costs about $4 to keep a DO alive an entrie month but I'm not sure if that's...

J

jason•11/7/23, 4:33 PM

Thanks for the reference to those previous messages. I'm glad that I'm not the only one who is confused by all of this.

J

jason•11/7/23, 4:34 PM

Some people were mentioning that having one session open, means one request at a time, but that's not true. You can use

newPage()

newPage()

newPage()

newPage() to use the same browser to process request async - but there's got to be some limit to that. I can't imagine one browser would do 100s of request simulateously. But again, those limits don't seem documented either.

MMackenly It costs about $4 to keep a DO alive an entrie month but I'm not sure if that's...

U

Unsmart•11/7/23, 4:42 PM

Seeing as the blog post about browser rendering showed how to keep sessions alive with a durable object I would find it highly unlikely to be against TOS LUL

👋 Hello all - how can I get access to the beta? I'm looking to replace prerender.io in our stack, a

Similar Threads