Hi all, I was wondering what the recommended approach is for ingesting and processing form data, wh

NNicolas Hi all, I was wondering what the recommended approach is for ingesting and proc...

B

Beny•3/18/24, 3:58 PM

There's a plugin which is good for processing forms using a middleware function: https://developers.cloudflare.com/pages/functions/plugins/static-forms/
However if you're using Astro I assume you'll want to use their middleware instead.

Here's an example:

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

// src/middleware.js
export async function onRequest({ request, locals }, next) {
    // Check if the current request path matches the specific form action path
    if (new URL(request.url).pathname === '/form-path' && request.method === 'POST') {
        try {
            // Process form data
            const formData = await request.formData();

            // Example of form data processing.
            if(formData.get('name') !== "john") {
                throw new Error("Name must be john!")
            }

            // After processing successfully, redirect to `/form-submitted`
            return Response.redirect(new URL("/form-submitted", request.url), 302);
        } catch (error) {
            // If there's an error in processing, set `locals.formError`
            // This can later be checked in the endpoint handling the form submission
            locals.formError = error.message;
        }
    }

    // If the path does not match, proceed with the normal request flow.
    return next();
}

Cloudflare Docs

Static Forms · Cloudflare Pages docs

The Static Forms Pages Plugin intercepts all form submissions made which have the data-static-form-name attribute set. This allows you to take action …

I

Isaac McFadyen•3/18/24, 5:17 PM

You shouldn't need to use Astro's middleware to do this though.

I

Isaac McFadyen•3/18/24, 5:18 PM

You should be able to use Endpoints, the middleware just adds complexity because you need to check the path yourself.

S

Smarter•3/18/24, 7:04 PM

I am using a Pages Function as a proxy to my backend API, to get it to work I had to install CF SSL Cert, and use SSL on my backend API host, I was unable to use regular http. However, I was wondering if I must also use port 443 for my backend API or if I can specify one and that will work? I figured I'd ask before I went through trying it out, since everything is technically working right now.

S

Smarter•3/19/24, 6:37 PM

I can't seem to provide a custom port for my backend, it fails with a 521 error code.

S

Smarter•3/19/24, 6:41 PM

But requests from the script to the standard 443 HTTPS port work fine.

S

Smarter•3/19/24, 6:41 PM

But I'm trying to deploy a dev copy as well at 8443 in my Preview enviorment.

S

Smarter•3/19/24, 6:47 PM

Documentation shows that 8443 is a supported port as well

(https://developers.cloudflare.com/fundamentals/reference/network-ports/)

S

Smarter•3/19/24, 6:54 PM

Oh... damn: https://developers.cloudflare.com/workers/platform/known-issues/#custom-ports

K

Kilisei•3/20/24, 12:35 PM

Hi i have a question regarding turnstile and mailchannels for my contact form im stuck and cant get my turnstile key to verify correctly is there an example i could look at and maybe find my mistake?

CChamp Has Pages Functions supported the Server-Sent Events web standard yet?

O

outsideurimagination•3/20/24, 12:57 PM

did you get server sent events working? for me the client gets disconnected right away and tries reconnecting constantly after. I've heard we may need to do something with durable objects or just resort to websockets. hard to find info out there

S

soy.david•3/20/24, 3:22 PM

How can I use TCP sockets in my SvleteKit project? I don't understand how to import it into the route .

D

D5•3/20/24, 8:03 PM

So I thought building a blog that fetches data from Appwrite and generates a static Cloudflare pages (SSR page generation with Astro)

The doubt is, from what I'm seeing, there's a limit to 10ms CPU time? Then as the code needs to fetch data form appwrite it will throw an instant timeout (as it will take probably more that 10ms to get some response)?

DD5 So I thought building a blog that fetches data from Appwrite and generates a sta...

H

Hello, I’m Allie!•3/20/24, 8:04 PM

CPU Time is time doing some kind of work. Even if AppWrite takes 10 seconds to return a response, that isn't counted

HHello, I’m Allie!CPU Time is time doing some kind of work. Even if AppWrite takes 10 seconds to r...

D

D5•3/20/24, 8:05 PM

Oh, fine. So I could generate then the page successfully, right?

DD5 Oh, fine. So I could generate then the page successfully, right?

H

Hello, I’m Allie!•3/20/24, 8:05 PM

You should be able to, assuming you aren't doing more than 10 ms. of work rendering the actual page

HHello, I’m Allie!You should be able to, assuming you aren't doing more than 10 ms. of work render...

D

D5•3/20/24, 8:06 PM

That's something I'm not sure about

DD5 That's something I'm not sure about 😬

H

Hello, I’m Allie!•3/20/24, 8:08 PM

Note with Paid-Plan Workers you can get up to 30s of CPU time

H

Hello, I’m Allie!•3/20/24, 8:08 PM

So 10ms isn't a hard limit there

D

D5•3/20/24, 8:11 PM

Ouch, astro takes about 100ms

D

D5•3/20/24, 8:11 PM

Then I will use some alternative

D

D5•3/20/24, 8:12 PM

Meanwhile the app scales

DD5 Ouch, astro takes about 100ms 😓

H

Hello, I’m Allie!•3/20/24, 8:12 PM

That seems extremely high. What are you doing, may I ask?

HHello, I’m Allie!That seems *extremely* high. What are you doing, may I ask?

D

D5•3/20/24, 8:36 PM

I didn't have tested it yet, but from what I've found that's what does it take

DD5 Ouch, astro takes about 100ms 😓

I

Isaac McFadyen•3/20/24, 8:54 PM

Are you sure you're not confusing CPU and wall time?

I

Isaac McFadyen•3/20/24, 8:54 PM

100ms sounds quite high indeed.

I

Isaac McFadyen•3/20/24, 8:54 PM

?cpu-time

F

Flare•3/20/24, 8:54 PM

CPU Time: the amount of work the CPU needs to do, measured in

ms

ms

. More CPU-heavy things will increase it (hashing passwords). This is not the same as the time a

fetch

fetch

request takes - a request might take 10 seconds but only use 1ms of CPU Time.
Wall Time: the actual amount of time a Worker runs for, as though you measured it with a clock or your browser DevTools

Iits.jcw if i want to send metrics to datadog from a high volume function, does it make s...

H

Hello, I’m Allie!•3/23/24, 6:40 PM

It wouldn't really work. Current advice is assume that the global state is nuked for every request. It can be reused over multiple requests, but it definitely isn't behavior you should rely on

Iits.jcw btw - what happens to in-flight isolates during a deploy? i assume they're allow...

H

Hello, I’m Allie!•3/23/24, 6:44 PM

They wait ~30 seconds, then are cut off.

H

Hello, I’m Allie!•3/23/24, 6:44 PM

They might get a bit longer, but that's the time you are guaranteed, barring other issues

Iits.jcw fyi, i'm trying to approximate the "worker trace event" format (https://develope...

H

Hello, I’m Allie!•3/23/24, 6:48 PM

Yup, that makes sense

Iits.jcw is it odd that there doesn't seem to be a duration captured in the worker trace ...

H

Hello, I’m Allie!•3/23/24, 6:55 PM

That might have something to do with Spectre Mitigation?

Cloudflare Docs

Security model · Cloudflare Workers docs

This article includes an overview of Cloudflare security architecture, and then addresses two frequently asked about issues: V8 bugs and Spectre.

Iits.jcw if I wanted to build (or utilize something existing) to diagnose network connect...

H

Hello, I’m Allie!•3/23/24, 7:22 PM

There is the Traceroute API which requires the Enterprise plan

Cloudflare API Documentation

Interact with Cloudflare's products and services via the Cloudflare API

H

Hello, I’m Allie!•3/23/24, 7:22 PM

Or you could do it in reverse, from your API?

H

Hello, I’m Allie!•3/23/24, 7:22 PM

Not sure how useful that is

S

Spunkie•3/24/24, 6:46 AM

Is there something obviously wrong with this function that would cause a 503/1019 error? I have a static nuxt 3 cf pages project that works until I deploy this code in a

/functions/[[catchall]].js

/functions/[[catchall]].js

/functions/[[catchall]].js

/functions/[[catchall]].js. This code logic works when deployed separately as a cf worker but not when translated to a cf pages function.

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

export async function onRequest(context) {
    const { request } = context;
    let url = new URL(request.url);

    // Set the hostname to the original site
    url.hostname = "example.com";
    let ogResponse = fetch(url, request);

    // Now set the hostname to the Cloudflare Pages version
    url.hostname = "test-branch.example.pages.dev";
    const cfPagesResponse = await fetch(url, request);

    // Return the Cloudflare Pages response if it's not a 404
    if (cfPagesResponse.status !== 404) {
        return cfPagesResponse;
    }

    // Otherwise, return the original site's response
    return await ogResponse;
}

SSpunkie Is there something obviously wrong with this function that would cause a 503/101...

W

Walshy•3/24/24, 1:38 PM

Well your fetch is gonna invoke the function again... which will do another fetch and invoke again... and repeat

W

Walshy•3/24/24, 1:39 PM

I think you want

env.ASSETS.fetch

env.ASSETS.fetch

env.ASSETS.fetch

env.ASSETS.fetch there instead which will try to request the site content
https://developers.cloudflare.com/pages/functions/api-reference/#envassetsfetch

Cloudflare Docs

API reference · Cloudflare Pages docs

Learn about the APIs used within Pages Functions.

H

heftymouse•3/25/24, 7:37 AM

does middleware count towards your functions quota?

H

heftymouse•3/25/24, 4:39 PM

additionally, can i only run middleware on some static files? i'd like it to run before my actual pages get served but not static assets

H

heftymouse•3/25/24, 4:41 PM

the documentation just mentions

functions/_middleware.ts

functions/_middleware.ts

for 'all requests, including in front of static files', can't tell if there's any granularity for static files

Hi all, I was wondering what the recommended approach is for ingesting and processing form data, wh

Similar Threads

Similar Threads

Similar Threads