Framer Production Checklist

Overview

Complete checklist for deploying Framer integrations to production.

Prerequisites

• Staging environment tested and verified
• Production API keys available
• Deployment pipeline configured
• Monitoring and alerting ready

Instructions

Step 1: Pre-Deployment Configuration

• [ ] Production API keys in secure vault
• [ ] Environment variables set in deployment platform
• [ ] API key scopes are minimal (least privilege)
• [ ] Webhook endpoints configured with HTTPS
• [ ] Webhook secrets stored securely

Step 2: Code Quality Verification

• [ ] All tests passing (npm test)
• [ ] No hardcoded credentials
• [ ] Error handling covers all Framer error types
• [ ] Rate limiting/backoff implemented
• [ ] Logging is production-appropriate

Step 3: Infrastructure Setup

• [ ] Health check endpoint includes Framer connectivity
• [ ] Monitoring/alerting configured
• [ ] Circuit breaker pattern implemented
• [ ] Graceful degradation configured

Step 4: Documentation Requirements

• [ ] Incident runbook created
• [ ] Key rotation procedure documented
• [ ] Rollback procedure documented
• [ ] On-call escalation path defined

Step 5: Deploy with Gradual Rollout

# Pre-flight checks
curl -f https://staging.example.com/health
curl -s https://status.framer.com

# Gradual rollout - start with canary (10%)
kubectl apply -f k8s/production.yaml
kubectl set image deployment/framer-integration app=image:new --record
kubectl rollout pause deployment/framer-integration

# Monitor canary traffic for 10 minutes
sleep 600
# Check error rates and latency before continuing

# If healthy, continue rollout to 50%
kubectl rollout resume deployment/framer-integration
kubectl rollout pause deployment/framer-integration
sleep 300

# Complete rollout to 100%
kubectl rollout resume deployment/framer-integration
kubectl rollout status deployment/framer-integration

Output

• Deployed Framer integration
• Health checks passing
• Monitoring active
• Rollback procedure documented

Error Handling

Examples

Health Check Implementation

async function healthCheck(): Promise<{ status: string; framer: any }> {
  const start = Dat

Framer Rate Limits

Overview

Handle Framer rate limits gracefully with exponential backoff and idempotency.

Prerequisites

• Framer SDK installed
• Understanding of async/await patterns
• Access to rate limit headers

Instructions

Step 1: Understand Rate Limit Tiers

Step 2: Implement Exponential Backoff with Jitter

async function withExponentialBackoff<T>(
  operation: () => Promise<T>,
  config = { maxRetries: 5, baseDelayMs: 1000, maxDelayMs: 32000, jitterMs: 500 }
): Promise<T> {
  for (let attempt = 0; attempt <= config.maxRetries; attempt++) {
    try {
      return await operation();
    } catch (error: any) {
      if (attempt === config.maxRetries) throw error;
      const status = error.status || error.response?.status;
      if (status !== 429 && (status < 500 || status >= 600)) throw error;

      // Exponential delay with jitter to prevent thundering herd
      const exponentialDelay = config.baseDelayMs * Math.pow(2, attempt);
      const jitter = Math.random() * config.jitterMs;
      const delay = Math.min(exponentialDelay + jitter, config.maxDelayMs);

      console.log(`Rate limited. Retrying in ${delay.toFixed(0)}ms...`);
      await new Promise(r => setTimeout(r, delay));
    }
  }
  throw new Error('Unreachable');
}

Step 3: Add Idempotency Keys

import { v4 as uuidv4 } from 'uuid';
import crypto from 'crypto';

// Generate deterministic key from operation params (for safe retries)
function generateIdempotencyKey(operation: string, params: Record<string, any>): string {
  const data = JSON.stringify({ operation, params });
  return crypto.createHash('sha256').update(data).digest('hex');
}

async function idempotentRequest<T>(
  client: FramerClient,
  params: Record<string, any>,
  idempotencyKey?: string  // Pass existing key for retries
): Promise<T> {
  // Use provided key (for retries) or generate deterministic key from params
  const key = idempotencyKey || generateIdempotencyKey(params.method || 'POST', params);
  return client.request({
    ...params,
    headers: { 'Idempotency-Key': key, ...params.headers },
  });
}

Output

• Reliable API calls with automatic retry
• Idempotent requests preventing duplicates
• Rate limit headers properly handled

Error Handling

my-framer-project/
├── src/
│   ├── framer/
│   │   ├── client.ts           # Singleton client wrapper
│   │   ├── config.ts           # Environment configuration
│   │   ├── types.ts            # TypeScript types
│   │   ├── errors.ts           # Custom error classes
│   │   └── handlers/
│   │       ├── webhooks.ts     # Webhook handlers
│   │       └── events.ts       # Event processing
│   ├── services/
│   │   └── framer/
│   │       ├── index.ts        # Service facade
│   │       ├── sync.ts         # Data synchronization
│   │       └── cache.ts        # Caching layer
│   ├── api/
│   │   └── framer/
│   │       └── webhook.ts      # Webhook endpoint
│   └── jobs/
│       └── framer/
│           └── sync.ts         # Background sync job
├── tests/
│   ├── unit/
│   │   └── framer/
│   └── integration/
│       └── framer/
├── config/
│   ├── framer.development.json
│   ├── framer.staging.json
│   └── framer.production.json
└── docs/
    └── framer/
        ├── SETUP.md
        └── RUNBOOK.md

┌─────────────────────────────────────────┐
│             API Layer                    │
│   (Controllers, Routes, Webhooks)        │
├─────────────────────────────────────────┤
│           Service Layer                  │
│  (Business Logic, Orchestration)         │
├─────────────────────────────────────────┤
│          Framer Layer        │
│   (Client, Types, Error Handling)        │
├─────────────────────────────────────────┤
│         Infrastructure Layer             │
│    (Cache, Queue, Monitoring)            │
└─────────────────────────────────────────┘

// src/framer/client.ts
export class FramerService {
  private client: FramerClient;
  private cache: Cache;
  private monitor: Monitor;

  constructor(config: FramerConfig) {
    this.client = new FramerClient(config);
    this.cache = new Cache(config.cacheOptions);
    this.monitor = new Monitor('framer');
  }

  async get(id: string): Promise<Resource> {
    return this.cache.getOrFetch(id, () =>
      this.monitor.track('get', () => this.client.get(id))
    );
  }
}

// src/framer/errors.ts
export class FramerServiceError extends Error {
  constructor(
    message: string,
    public readonly code: string,
    public readonly retryable: boolean,
    public readonly originalError?: Error
  ) {
    super(message);
    this.name = 'FramerServiceError';
  }
}

export function wrapF

// src/framer/client.ts
import { FramerClient } from '@framer/sdk';

let instance: FramerClient | null = null;

export function getFramerClient(): FramerClient {
  if (!instance) {
    instance = new FramerClient({
      apiKey: process.env.FRAMER_API_KEY!,
      // Additional options
    });
  }
  return instance;
}

import { FramerError } from '@framer/sdk';

async function safeFramerCall<T>(
  operation: () => Promise<T>
): Promise<{ data: T | null; error: Error | null }> {
  try {
    const data = await operation();
    return { data, error: null };
  } catch (err) {
    if (err instanceof FramerError) {
      console.error({
        code: err.code,
        message: err.message,
      });
    }
    return { data: null, error: err as Error };
  }
}

async function withRetry<T>(
  operation: () => Promise<T>,
  maxRetries = 3,
  backoffMs = 1000
): Promise<T> {
  for (let attempt = 1; attempt <= maxRetries; attempt++) {
    try {
      return await operation();
    } catch (err) {
      if (attempt === maxRetries) throw err;
      const delay = backoffMs * Math.pow(2, attempt - 1);
      await new Promise(r => setTimeout(r, delay));
    }
  }
  throw new Error('Unreachable');
}

const clients = new Map<string, FramerClient>();

export function getClientForTenant(tenantId: string): FramerClient {
  if (!clients.has(tenantId)) {
    const apiKey = getTenantApiKey(tenantId);
    clients.set(tenantId, new FramerClient({ apiKey }));
  }
  return clients.get(tenantId)!;
}

Framer Security Basics

Overview

Security best practices for Framer API keys, tokens, and access control.

Prerequisites

• Framer SDK installed
• Understanding of environment variables
• Access to Framer dashboard

Instructions

Step 1: Configure Environment Variables

# .env (NEVER commit to git)
FRAMER_API_KEY=sk_live_***
FRAMER_SECRET=***

# .gitignore
.env
.env.local
.env.*.local

Step 2: Implement Secret Rotation

# 1. Generate new key in Framer dashboard
# 2. Update environment variable
export FRAMER_API_KEY="new_key_here"

# 3. Verify new key works
curl -H "Authorization: Bearer ${FRAMER_API_KEY}" \
  https://api.framer.com/health

# 4. Revoke old key in dashboard

Step 3: Apply Least Privilege

Output

• Secure API key storage
• Environment-specific access controls
• Audit logging enabled

Error Handling

Examples

Service Account Pattern

const clients = {
  reader: new FramerClient({
    apiKey: process.env.FRAMER_READ_KEY,
  }),
  writer: new FramerClient({
    apiKey: process.env.FRAMER_WRITE_KEY,
  }),
};

Webhook Signature Verification

import crypto from 'crypto';

function verifyWebhookSignature(
  payload: string, signature: string, secret: string
): boolean {
  const expected = crypto.createHmac('sha256', secret).update(payload).digest('hex');
  return crypto.timingSafeEqual(Buffer.from(signature), Buffer.from(expected));
}

Security Checklist

• [ ] API keys in environment variables
• [ ] .env files in .gitignore
• [ ] Different keys for dev/staging/prod
• [ ] Minimal scopes per environment
• [ ] Webhook signatures validated
• [ ] Audit logging enabled

Audit Logging

interface AuditEntry {
  timestamp: Date;
  action: string;
  userId: string;
  resource: string;
  result: 'success' | 'failure';
  metadata?: Record<string

Framer Upgrade & Migration

Overview

Guide for upgrading Framer SDK versions and handling breaking changes.

Prerequisites

• Current Framer SDK installed
• Git for version control
• Test suite available
• Staging environment

Instructions

Step 1: Check Current Version

npm list @framer/sdk
npm view @framer/sdk version

Step 2: Review Changelog

open https://github.com/framer/sdk/releases

Step 3: Create Upgrade Branch

git checkout -b upgrade/framer-sdk-vX.Y.Z
npm install @framer/sdk@latest
npm test

Step 4: Handle Breaking Changes

Update import statements, configuration, and method signatures as needed.

Output

• Updated SDK version
• Fixed breaking changes
• Passing test suite
• Documented rollback procedure

Error Handling

Examples

Import Changes

// Before (v1.x)
import { Client } from '@framer/sdk';

// After (v2.x)
import { FramerClient } from '@framer/sdk';

Configuration Changes

// Before (v1.x)
const client = new Client({ key: 'xxx' });

// After (v2.x)
const client = new FramerClient({
  apiKey: 'xxx',
});

Rollback Procedure

npm install @framer/sdk@1.x.x --save-exact

Deprecation Handling

// Monitor for deprecation warnings in development
if (process.env.NODE_ENV === 'development') {
  process.on('warning', (warning) => {
    if (warning.name === 'DeprecationWarning') {
      console.warn('[Framer]', warning.message);
      // Log to tracking system for proactive updates
    }
  });
}

// Common deprecation patterns to watch for:
// - Renamed methods: client.oldMethod() -> client.newMethod()
// - Changed parameters: { key: 'x' } -> { apiKey: 'x' }
// - Removed features: Check release notes before upgrading

Resources

• Framer Changelog
• Framer Migration Guide

Next Steps

For CI integration during upgrades, see framer-ci-integration.