Use Case

Screenshot API for Bug Reporting

Automate visual bug reports. Capture the exact state of any page when issues are detected.

The Problem

Bug reports without context waste engineering time

"It looks broken" is not a bug report. Engineers need to see exactly what the reporter saw — the layout, the error state, the device. Asking people to take manual screenshots is inconsistent and often forgotten.

Bug reports lack visual evidence of the issue
Manual screenshots are inconsistent and often missing
Hard to reproduce visual bugs across different viewports
No automated way to capture error states when they occur

The Solution

Automated visual evidence for every bug

Trigger a screenshot capture whenever an error is detected. Attach it to the bug report automatically with the exact URL, viewport, and timestamp.

Step 1

Detect an issue

Your error monitoring tool catches a frontend error or a user reports an issue.

Step 2

Capture the state

Call the API with the exact URL and viewport to capture what the user saw.

Step 3

Attach to the ticket

Pipe the screenshot into Jira, Linear, or GitHub Issues automatically.

Code Example

Get started in minutes

A single API call is all you need.

node.js

// On error detection, capture a screenshot for the bug report
async function captureForBugReport(pageUrl: string, viewport: number) {
  const res = await fetch(
    `https://api.porto.dev/v1/screenshot?url=${encodeURIComponent(pageUrl)}&width=${viewport}&full_page=true`,
    { headers: { Authorization: "Bearer YOUR_API_KEY" } }
  );

  const screenshot = Buffer.from(await res.arrayBuffer());
  // Attach to Jira/Linear/GitHub issue via their API
  return screenshot;
}

// Capture both desktop and mobile views
await Promise.all([
  captureForBugReport("https://app.example.com/broken-page", 1280),
  captureForBugReport("https://app.example.com/broken-page", 375),
]);