Written with AI assistance from the source video. The video is the authority.
16:41Vercel
Log in to leave a comment
No posts yet
When operating a SaaS with serverless functions, timeout limits ranging from 10 to 60 seconds often become a bottleneck. When implementing large-scale data backup or multimodal AI media generation pipelines, traditional serverless environments repeatedly interrupt the code.
Vercel Workflows keeps tasks running while dropping resource consumption to zero when functions enter a waiting state. To forecast costs, you can run a TypeScript script directly to pre-calculate monthly expenses. By defining daily execution counts, step counts, execution time, and payload sizes as an object, you feed them into a cost calculation function. If you exceed the Hobby plan's limits of 50,000 events and 1GB of writes per month, you should prepare to upgrade to Pro in advance. Running fewer than 15,000 times a month can be covered within the Pro base credits, reducing costs compared to maintaining a self-hosted Redis infrastructure.
`typescript
interface WorkflowMetrics {
dailyExecutions: number;
stepsPerExecution: number;
avgStepDurationMs: number;
payloadSizeKb: number;
}
function calculateEstimatedCost(metrics: WorkflowMetrics): { totalEvents: number; estimatedCostUsd: number } {
const totalEvents = metrics.dailyExecutions * metrics.stepsPerExecution * 30;
const freeTierEvents = 50000;
const overageEvents = Math.max(0, totalEvents - freeTierEvents);
const costPerThousand = 0.20;
const estimatedCostUsd = (overageEvents / 1000) * costPerThungk?: number;
return {
totalEvents,
estimatedCostUsd: Number(((overageEvents / 1000) * costPerThousand).toFixed(2))
};
}
`
When using BullMQ or AWS SQS, queue creation, job publishing, consumption, and Redis connection management all had to be built manually. This process unnecessarily bloated the code. The Vercel Workflows SDK removes this infrastructure code with code-level directives.
Migration is completed in 3 steps. First, wrap your next.config.ts file with the withWorkflow wrapper. Second, instead of traditional worker processes, write individual tasks as asynchronous functions using the use step directive. Third, ditch complex Parent-Child Job chaining structures and use JavaScript control statements and await sleep functions inside use workflow. As external Redis connection code disappears, the application memory footprint decreases and transition times speed up.
`typescript
import { workflow } from "@vercel/workflows";
export const { POST } = workflow(async (context) => {
const userId = context.request.payload.userId;
const data = await context.run("fetch-user-data", async () => {
const res = await fetch(https://api.example.com/users/${userId});
return res.json();
});
await context.sleep("wait-for-processing", "10m");
await context.run("finalize-task", async () => {
await db.users.update({ where: { id: userId }, data: { status: "processed" } });
});
});
`
To prevent data loss when non-deterministic failures occur, you must first categorize the nature of the errors. Vercel Workflows handles transient errors and fatal errors separately.
To catch errors within a step, first throw a RetryableError when HTTP 429 or 500-series errors occur to induce exponential backoff-based retries. Then, include unique key check logic inside steps that modify the database to prevent duplicate data from accumulating upon retries. Finally, connect Vercel Log Drains to Sentry to stream structured JSON logs in real time. Applying this pattern recovers state from the breakpoint even in exception scenarios, eliminating the need for manual data recovery.
`typescript
import { RetryableError } from "@vercel/workflows";
export async function processPaymentStep(context: any, paymentData: any) {
return await context.run("charge-payment", async () => {
const exists = await db.transactions.findUnique({
where: { idempotencyKey: paymentData.key }
});
if (exists) {
return exists;
}
const response = await paymentGateway.charge(paymentData);
if (response.status === 429 || response.status >= 500) {
throw new RetryableError("Payment gateway overloaded, retrying...");
}
return await db.transactions.create({
data: { idempotencyKey: paymentData.key, amount: response.amount }
});
});
}
`