Observe & debug

Show Customers a Replay

View as Markdown

After a run finishes, give your users proof of what happened: a video-style replay they can scrub next to the activity timeline. A single embedded View composes both from the run you already have.

1import { Bctrl } from "@bctrl/sdk";
2
3const bctrl = new Bctrl({ apiKey: process.env.BCTRL_API_KEY! });
4
5// ... run finished, runtime stopped ...
6
7const replay = await bctrl.views.create({
8  scope: { runId },
9  recordings: true,
10  trace: true,
11  events: true,
12  presentation: {
13    mode: "embedded",
14    allowedOrigins: ["https://portal.acme.com"],
15  },
16  expiresInSeconds: 86_400,
17});
18
19console.log(replay.url);

Embed the replay using the same View surface as a live browser view:

1<iframe
2  src="https://...embed URL..."
3  width="1280"
4  height="800"
5  style="border: 0"
6></iframe>

📸 Content TODO: screenshot of the finished layout - replay iframe on the left, activity timeline rendered as a list on the right. If you have the redesigned activity UI, a capture of a real run (navigation → typing → captcha solve → download) sells it best.

The timeline is part of the composition

With events: true, the embedded View can render the Run’s event history beside the replay, using the same visual system as hosted Views. You do not need to recreate the timeline in your frontend. If you want a custom native UI, use the Run events API separately.

If you need the raw record instead - every request, console line, and navigation - use Run events.

Expiry

The View is a time-limited lease (expiresInSeconds). It defaults to 28,800 seconds (8 hours) and allows up to 2,592,000 seconds (30 days). Mint a fresh one on each customer session rather than storing its bearer URL.

Next