hm ... it would be good to be able to init some resources outside of a request handler .... but that

Ttcurdt hm ... it would be good to be able to init some resources outside of a request h...

I

Nope. The workaround is:

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

let variable;

export async function onRequestGet(context) {
    if (variable == null) {
        variable = initFromEnv(env);
    }
    // ...use variable
}

IIsaac McFadyen Nope. The workaround is: ```js let variable; export async function onRequestGet...

T

tcurdtOP•2/25/24, 2:23 AM

uff. ok.
and to be sure:
I assume there are no concurrency considerations that need to be taken into account?

Ttcurdt uff. ok. and to be sure: I assume there are no concurrency considerations that n...

I

Isaac McFadyen•2/25/24, 2:25 AM

Well it depends on how long your initFromEnv takes.

I

Isaac McFadyen•2/25/24, 2:25 AM

Workers are single-threaded so if there's no

await

await

points (no IO) inside initFromEnv then you should be good.

I

Isaac McFadyen•2/25/24, 2:26 AM

If you're

await

await

'ing inside the

initFromEnv

initFromEnv

then there's concurrency issues because Workers may switch the request they're serving on

await

await

points.

T

tcurdtOP•2/25/24, 3:11 AM

In this very case - no await. But I could imagine there to be one.
That said, I don't think there is ever the need for a full singleton restriction.
This would just be about caching. So I think it should be OK - even then.

A

alok•2/27/24, 10:50 AM

Hi, I have a BetterStack monitoring job hitting a pages function endpoint which always returns the same data (the code instantiates a few JS classes and then returns

{"env":"prod"}

{"env":"prod"}

, there's no sub-fetch or database queries going on. The endpoint sets

cache-control: private

cache-control: private

. On my BetterStack graph, I'm seeing lots of requests which take ~1 second and even a handful which take ~2 seconds. I switched to paid workers, but don't see any difference in the graph. So a couple questions:

any debugging suggestions for minimizing these latency spikes?
is the performance of workers vs page functions very different? I can migrate from page functions to workers with a little bit of work.
ideally I would like to see numbers more in line with https://www.openstatus.dev/blog/monitoring-latency-cf-workers-fly-koyeb-raylway-render.

My account id is 9be6f6ea52d6a7dffc494c0fe0bc6729 if anyone wants to help look into this. Thanks!

Screenshot_2024-02-27_at_11.38.46_AM.png

W

Walshy•2/28/24, 6:33 AM

Complex answer haha. What's the code doing? Are you fetching external resources?
They're the same. Functions is just Workers
That benchmark is measuring time to invoke and start. The code is very simple and returns right away. Adding more complexity (e.g. fetching external resources) will understandably add more time before a response can be returned

We'd really need to understand the code to understand where this can come from. You talked about it a bit but we'd really need to know more.

Also question, do you have something like Smart Placement enabled?

WWalshy 1. Complex answer haha. What's the code doing? Are you fetching external resourc...

A

alok•2/28/24, 8:39 AM

The code isn't doing anything. It's instantiating two classes I use everywhere (the constructors just set a bunch of properties). Then returns with
```
Response.json()
```
```
Response.json()
```

WWalshy 1. Complex answer haha. What's the code doing? Are you fetching external resourc...

A

alok•2/28/24, 8:42 AM

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to

Workers with a D1 binding will always be placed in a data center near the location of the D1 database they are bound to

=> I do have a D1 binding.

A

alok•2/28/24, 8:42 AM

not all my requests need the D1 binding. I guess I should split things into two workers? Or two distinct pages projects.

S

saitama sendpie•2/28/24, 10:16 AM

I have a Hugo project with the following directories:

├─ functions
│  └─ get_info
│     └─ index.js

├─ functions
│  └─ get_info
│     └─ index.js

When I run

pnpx wrangler dev functions

pnpx wrangler dev functions

it keeps saying

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

 [ERROR] The entry-point file at "functions" was not found.

  The provided entry-point path, "functions", points to a directory, rather than a file.

When I run it using

pnpx wrangler dev functions/get_info/index.js

pnpx wrangler dev functions/get_info/index.js

my script works perfectly.

This also means, that my build logs show the following error because it can't find the index.js. How do I fix this?

P

poa•2/28/24, 5:45 PM

hi can anyone help me from logging in with only a id

In small web game?

P

poa•2/28/24, 5:45 PM

I got a code

P

poa•2/28/24, 5:45 PM

A public funtion but dont know how to use

L

Lambo•2/29/24, 7:18 PM

Hi, is it not possible to get query parameters via a Pages Function?

I am wanting to do a login callback via a Pages Function, which returns a token as a query parameter, however, my

context.request

context.request

object is completely empty?

I would have expected

context.request.url

context.request.url

to at least exist?

My

JSON.stringify(context)

JSON.stringify(context)

look like:

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

{
  "request": {},
  "functionPath": "/api/auth-callback",
  "params": {},
  "data": {},
  "env": {
    "ASSETS": {}
  }
}

When going to

http://localhost:8788/api/auth-callback?token=aaabbb

http://localhost:8788/api/auth-callback?token=aaabbb

K

kian•2/29/24, 7:20 PM

Just an issue with

JSON.stringify

JSON.stringify

(and sometimes

console.log

console.log

) - it doesn't handle properties on most objects.

K

kian•2/29/24, 7:20 PM

Try logging

context.request.url

context.request.url

directly

L

Lambo•2/29/24, 7:20 PM

Aha!

L

Lambo•2/29/24, 7:20 PM

Thank you!

K

kian•2/29/24, 7:23 PM

fwiw, JSON.stringify is the culprit here

K

kian•2/29/24, 7:23 PM

Even on browsers, you can't stringify the Web API objects

L

Lambo•2/29/24, 7:23 PM

Interesting, good to know

K

kian•2/29/24, 7:23 PM

console.log is better, but still has some issues - util.inspect from the nodejs_compat compatibility flag is much better

L

Lambo•2/29/24, 7:23 PM

Cheers, will keep that in mind

K

kian•2/29/24, 7:23 PM

K

kian•2/29/24, 7:23 PM

It will actually recurse, show Header values, etc

L

Lambo•2/29/24, 7:23 PM

neat.

A

akazwz•3/1/24, 2:33 AM

how cloudflare pages set node_compat, i set nodejs_compat flag in dashboard, but it does not work
and cloudflare worker is normal when set in wrangler.toml

P

Patrick M•3/1/24, 1:12 PM

Would any Cloudflare staff be able to tell me why my deployment failed? Deployment id 8270b12c-f15e-4468-8072-04f3ef0862e9
The cli showed upload success but the dashboard says “failure”.
I changed some dependencies, maybe the bundle size got too large or they are not compatible with the runtime?

PPatrick M Would any Cloudflare staff be able to tell me why my deployment failed? Deployme...

P

Patrick M•3/1/24, 3:54 PM

Still can't figure it out. I tried a few different strategies to pin down the issue:

```
wrangler pages functions build ...
```
```
wrangler pages functions build ...
```
then run the compiled file via plain
```
wrangler dev
```
```
wrangler dev
```
in local and remote mode and
```
wrangler deploy
```
```
wrangler deploy
```
All worked fine. Also the compiled script was 700kb minified gzipped.
`Tried reverting all the packages to the last known good packages. this didn't work too. Then I tried deleting some old deployments (maybe I have too many preview deployments??) Somehow it worked. Then I switched back to the latest main branch and it didn't work again.
Any other ideas of things I should check?

PPatrick M Still can't figure it out. I tried a few different strategies to pin down the is...

P

Patrick M•3/1/24, 4:15 PM

I think was a file size issue! This is a Remix Vite app. I turned on

build.minify

build.minify

in my vite config and it deployed. I guess I am closer to the 1mb limit than I thought.

Does

wrangler pages deploy

wrangler pages deploy

minify by default?

Feature request: Could
```
wrangler pages deploy
```
```
wrangler pages deploy
```
show the uploaded size of the worker bundle? (Right now it just shows
```
Uploading Functions bundle
```
```
Uploading Functions bundle
```
) (Edit I found an existing feature request)
I guess I will write myself a script to print my worker bundle script size and gzipped size to help keep better track of this in the future.

L

Lambo•3/1/24, 5:54 PM

Hey, I want to parse some HTML which I am scraping via a Pages Function. My initial thinking was

HTMLRewriter

HTMLRewriter

would be the way to do this, but I'm not sure now I'm actually trying to implement it.

Essentially, if I was querying on the client I would have something like:

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

const items = Array.from(parsedData.querySelectorAll("#example-parent")).map(parent => {
  const thingOne = parent.querySelector("#example-thing-one").getAttribute("content")
  const thingTwo = parent.querySelector("#example-thing-two").getAttribute("content");

  return { thingOne, thingTwo }
});

If I try implement something similar via

HTMLRewriter

HTMLRewriter

I end up with:

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

class ExampleElementHandler implements HTMLRewriterElementContentHandlers{
    element(element: Element): void {
        element.??? // how do I access the children
    }
}

const parsedData = new HTMLRewriter()
  .on("#example-paret", new ExampleElementHandler())
  .transform(res);

However, because

Element

Element

doesn't (as far as I can tell) implement any methods to get the children elements, I'm not sure how I should progress.

Any pointers are greatly appreciated.

KKynson ```javascript export const onRequest: PagesFunction<{}> = async (context) => { ...

I

Isaac McFadyen•3/2/24, 3:42 PM

You are ignoring the fetch request.

I

Isaac McFadyen•3/2/24, 3:42 PM

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

export const onRequest: PagesFunction<{}> = async (context) => {
  const req = context.request;
  return fetch(req);
}

Try this. If you want to modify the response you'll have to change this a bit.

PPatrick M I think was a file size issue! This is a Remix Vite app. I turned on `build.mini...

J

Jeff•3/3/24, 2:11 PM

Hey Patrick! I think I'm running into the same thing, any luck on the size monitoring?

P

Patrick M•3/3/24, 2:49 PM

Not yet, planning to take a look tomorrow. My thinking is to just add a step to my build script that will run the secret/unofficial command “wrangler pages functions build” to compile the workers function, then print the raw and gzipped size of this output. Hopefully this will be accurate enough to be useful but I’m not sure yet.

J

Jeff•3/3/24, 5:15 PM

In my case I forgot to pay for workers paid tier on the new account!

P

Patrick M•3/4/24, 4:34 AM

Here’s the script I came up with to show build stats:

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

import { filesize } from 'filesize';
import fs from 'node:fs/promises';
import { temporaryDirectoryTask } from 'tempy';
import { $ } from 'zx';

$.verbose = false;

async function printFileSize(memo, path) {
  const stats = await fs.stat(path);
  console.log(memo + ': ' + filesize(stats.size));
}

console.log(`check-worker-size.js Final Worker Size:`);

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --outdir ${outdir}`;
  await printFileSize('Raw', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Gzipped', `${outdir}/index.js.gz`);
});

await temporaryDirectoryTask(async (outdir) => {
  await $`pnpm wrangler pages functions build --minify --outdir ${outdir}`;
  await printFileSize('Minified', `${outdir}/index.js`);
  await $`gzip ${`${outdir}/index.js`}`;
  await printFileSize('Minified & Gzipped', `${outdir}/index.js.gz`);
});

P

Patrick M•3/4/24, 4:40 AM

In my case I got these results:

Raw: 6.07 MB
Gzipped: 1.05 MB
Minified: 2.23 MB
Minified & Gzipped: 655.69 kB

It seems like 1mb limit I passed was on the “gzipped” version. So even if secret command “wrangler pages function build —minify” exists “wrangler pages deploy” does in fact not seem to minify. I guess I can understand it because minifying will make the error logs harder to parse, so it should probably not be the default…

Secondly I realized that npm package I recently installed “effect” was 70kb. Removed that and my project seemed to deploy again.

Iits.jcw can service bindings be used to call a Function (Pages) from a worker?

H

Hello, I’m Allie!•3/5/24, 11:23 AM

No

H

Hello, I’m Allie!•3/5/24, 11:23 AM

Or at least not that I know of

H

Hello, I’m Allie!•3/5/24, 11:23 AM

Hm...

hm ... it would be good to be able to init some resources outside of a request handler .... but that

Similar Threads

Similar Threads

Similar Threads