Grab Worker - Development Setup#

Overview#

The grab worker handles screenshot generation for aesthetic.computer. This guide covers local development and testing.

Local Development#

Option 1: Wrangler Dev (Recommended)#

Run the worker locally with Cloudflare's dev environment:

cd /workspaces/aesthetic-computer/grab
npm run dev

This starts a local server at http://127.0.0.1:8787

Test locally:

curl -I "http://127.0.0.1:8787/icon/128x128/prompt.png"

Option 2: Remote Testing#

Use the deployed worker during development:

# Production worker
curl -I "https://grab.aesthetic.computer/icon/128x128/prompt.png"

# Or workers.dev URL
curl -I "https://aesthetic-grab.aesthetic-computer.workers.dev/icon/128x128/prompt.png"

Integration with Netlify Dev#

When running netlify dev (typically on http://localhost:8888), the redirects in netlify.toml will proxy requests to the grab worker:

Local aesthetic.computer makes request to /icon/128x128/prompt.png
Netlify redirect proxies to https://grab.aesthetic.computer/icon/128x128/prompt.png
Grab worker generates and returns screenshot

Testing the Full Stack#

# Start netlify dev
cd /workspaces/aesthetic-computer
netlify dev

# In another terminal, test icon generation
curl -I "http://localhost:8888/icon/128x128/prompt.png"

# Should see redirect to grab.aesthetic.computer

Dev Stack Integration#

Adding to Emacs Web Panels#

To run the grab worker in your dev stack alongside other services:

Create an Emacs pane for the grab worker:

# In your dev startup script or manually
cd /workspaces/aesthetic-computer/grab && npm run dev

Monitor logs with wrangler tail:

cd /workspaces/aesthetic-computer/grab
npx wrangler tail

Check worker status:

cd /workspaces/aesthetic-computer/grab
npx wrangler dev --test-scheduled

Environment Variables for Development#

The worker automatically detects localhost URLs and adjusts timeouts:

Production timeout: 30 seconds
Development: Can increase if needed by updating wrangler.toml

Debugging#

View Real-time Logs#

cd /workspaces/aesthetic-computer/grab
npx wrangler tail

# In another terminal, trigger a screenshot
curl "https://grab.aesthetic.computer/icon/256x256/prompt.png" > /dev/null

Common Issues#

1. Empty Screenshots

Ensure @cloudflare/puppeteer is latest version (not 0.0.1)
Check browser binding is active in wrangler.toml

2. Timeout Errors

Increase SCREENSHOT_TIMEOUT_MS in wrangler.toml
Check if aesthetic.computer piece loads properly

3. 404 on Custom Domain

Custom domain may not be set up yet
Use aesthetic-grab.aesthetic-computer.workers.dev URL instead

4. Canvas Not Found

Piece may not have rendered yet
Increase RENDER_DELAY_MS in wrangler.toml
Check if piece uses window.preloaded flag

Local vs Production URLs#

Production (After Custom Domain Setup)#

https://grab.aesthetic.computer/icon/128x128/prompt.png
https://grab.aesthetic.computer/preview/1200x630/prompt.png

Workers.dev (Always Available)#

https://aesthetic-grab.aesthetic-computer.workers.dev/icon/128x128/prompt.png
https://aesthetic-grab.aesthetic-computer.workers.dev/preview/1200x630/prompt.png

Local Development#

http://127.0.0.1:8787/icon/128x128/prompt.png
http://127.0.0.1:8787/preview/1200x630/prompt.png

Testing Query Parameters#

The worker constructs URLs with query parameters to tell the aesthetic.computer client which resolution to render:

# Icon request becomes:
# https://aesthetic.computer/prompt?icon=128x128

# Preview request becomes:
# https://aesthetic.computer/prompt?preview=1200x630

# Test this by checking logs:
npx wrangler tail

You should see log messages like:

Taking screenshot: 128x128 of https://aesthetic.computer/prompt?icon=128x128
Canvas element found
Screenshot generated successfully

Hot Reloading#

Wrangler dev supports hot reloading:

Make changes to src/index.ts
Save the file
Wrangler automatically rebuilds and restarts
Test with curl immediately

Performance Monitoring#

Check Screenshot Generation Time#

curl -w "\nTime: %{time_total}s\n" -o /dev/null -s \
  "https://grab.aesthetic.computer/icon/128x128/prompt.png"

Typical times:

First request (cold start): ~8-12 seconds
Cached requests: < 1 second
Browser reuse: ~3-5 seconds

Monitor Durable Object State#

Check if browser sessions are being reused:

npx wrangler tail --format json | jq '.logs[] | select(.message | contains("Browser DO"))'

You should see:

Browser DO: setting alarm - Browser staying alive
Browser DO: alarm triggered - Browser cleanup after 60s

Next Steps#

Set up custom domain grab.aesthetic.computer via Cloudflare Dashboard
Add grab worker startup to main dev scripts
Configure Emacs web panel for grab worker logs
Test integration with various pieces (wipe, line, etc.)
Monitor error rates in production