# Observability The Amazon Bedrock AgentCore Browser provides built-in observability features including live view, session recording, session replay, and CloudWatch metrics. **Topics** + [Live View](browser-dcv-integration.md) + [Session Recording and Replay](browser-session-recording.md) + [CloudWatch Metrics](browser-metrics.md) # Live View Amazon Bedrock AgentCore’s Live View is powered by [AWS DCV](https://docs.aws.amazon.com/dcv/). Each browser session launches a dedicated DCV server that streams the browser interface and enables real-time user interaction. To embed the Live View into your web application, use the BrowserLiveView React component from the [Amazon Bedrock AgentCore TypeScript SDK](https://github.com/aws/bedrock-agentcore-sdk-typescript). The component wraps the [AWS DCV Web Client](https://docs.aws.amazon.com/dcv/latest/websdkguide/what-is.html) internally and handles connection setup, SigV4 authentication, and video rendering, so you can integrate a live browser stream with minimal code while retaining full control over your UI. ## Using the BrowserLiveView component The BrowserLiveView component requires a SigV4-presigned Live View URL. After starting a browser session (see [Managing browser sessions](browser-managing-sessions.md)), generate the presigned URL using the [generateLiveViewUrl](https://github.com/aws/bedrock-agentcore-sdk-typescript/blob/main/src/tools/browser/client.ts#L380) method from the TypeScript SDK’s Browser class. The method signs the Live View stream endpoint with SigV4 credentials and returns a time-limited URL that you pass to the BrowserLiveView component. Install the Amazon Bedrock AgentCore TypeScript SDK: ``` npm install bedrock-agentcore ``` Import the BrowserLiveView component and render it with the presigned URL. The component handles WebSocket connection, DCV protocol negotiation, video stream decoding, and frame rendering. It auto-scales to fit its parent container while preserving aspect ratio. ``` import { BrowserLiveView } from 'bedrock-agentcore/browser/live-view' ``` The remoteWidth and remoteHeight must match the viewport configured for the browser session. Mismatched values cause cropping or black bars. The Live View begins streaming as soon as the presigned URL is valid and the browser session is active. If the container remains empty, verify that the presigned URL has not expired and that the browser session is still running. For a complete walkthrough including a sample React application, see [Embed a live AI browser agent in your React app with Amazon Bedrock AgentCore](https://aws.amazon.com/blogs/machine-learning/embed-a-live-ai-browser-agent-in-your-react-app-with-amazon-bedrock-agentcore/). # Session Recording and Replay Browser session recording and replay provides comprehensive observability for debugging, auditing, or training purposes. When you create a browser with session recording enabled, Amazon Bedrock AgentCore automatically captures browser interactions and stores them in your specified Amazon S3 bucket for later analysis. Session replay captures comprehensive browser interaction data that enables you to view replays and understand the actions that occurred during browser sessions. This functionality helps you resolve errors and improve future invocations by providing detailed insights into browser behavior. Information collected during session replay includes: + Session DOM changes and mutations + User actions including clicks, scrolls, and form interactions + Console logs and error messages + Chrome DevTools Protocol (CDP) events + Network events and HTTP requests ## Prerequisites for session recording To enable session recording, you need: + An Amazon S3 bucket to store recording data + An IAM execution role with permissions to write to your Amazon S3 bucket + A custom browser tool configured with recording enabled ## Configure IAM role for recording To enable session recording, you need an IAM execution role with permissions to write recording data to Amazon S3 and log activity to CloudWatch. For detailed instructions on setting up permissions, see [Permissions](browser-resource-session-management.md#browser-permissions). The execution role requires additional permissions beyond the standard browser permissions: ``` { "Sid": "S3Permissions", "Effect": "Allow", "Action": [ "s3:PutObject", "s3:GetObject", "s3:ListBucket", "s3:ListMultipartUploadParts", "s3:AbortMultipartUpload" ], "Resource": [ "arn:aws:s3:::your-recording-bucket", "arn:aws:s3:::your-recording-bucket/*" ] }, { "Sid": "CloudWatchLogsPermissions", "Effect": "Allow", "Action": [ "logs:CreateLogGroup", "logs:CreateLogStream", "logs:PutLogEvents", "logs:DescribeLogStreams" ], "Resource": "*" } ``` Replace `your-recording-bucket` with your actual Amazon S3 bucket name. ## Step 1: Create a browser tool with recording Create a custom browser tool with recording enabled. For detailed instructions on creating browser tools, see [Creating an AgentCore Browser](browser-using-tool.md#browser-create). When creating your browser tool, ensure you: + Enable session recording in the configuration + Specify your Amazon S3 bucket and prefix for storing recordings + Use the IAM execution role from Step 1 Example using Python SDK: ``` import boto3 import uuid region = "us-west-2" bucket = "your-recording-bucket" client = boto3.client("bedrock-agentcore-control", region_name=region) response = client.create_browser( name="MyRecordingBrowser", description="Browser with session recording enabled", networkConfiguration={"networkMode": "PUBLIC"}, executionRoleArn="arn:aws:iam::123456789012:role/AgentCoreBrowserRecordingRole", clientToken=str(uuid.uuid4()), recording={ "enabled": True, "s3Location": { "bucket": bucket, "prefix": "browser-recordings" } } ) browser_identifier = response.get("browserId") or response.get("browserIdentifier") print(f"Created browser with recording: {browser_identifier}") print(f"Recordings will be stored at: s3://{bucket}/browser-recordings/") ``` ## Step 2: Use the recording-enabled browser Use your recording-enabled browser with any automation framework. All browser interactions will be automatically recorded. Example using Strands: ``` from strands import Agent from strands_tools.browser import AgentCoreBrowser # Use the browser created with recording browser_identifier = "your-browser-identifier" region = "us-west-2" browser_tool = AgentCoreBrowser(region=region, identifier=browser_identifier) agent = Agent(tools=[browser_tool.browser]) prompt = ( "Navigate to https://docs.aws.amazon.com/bedrock-agentcore/latest/devguide/what-is-bedrock-agentcore.html " "and summarize the key features of AgentCore." ) response = agent(prompt) print("Agent Response:") print(response.message["content"][0]["text"]) ``` All interactions during this session will be automatically recorded and uploaded to your Amazon S3 bucket when the session ends. ## Step 3: Monitor live sessions and replay recordings The AWS Console provides comprehensive tools for both real-time monitoring and recorded session analysis. ### Live view monitoring Monitor browser sessions in real-time and interact with active sessions: **To access live view in the console** 1. Open the Amazon Bedrock AgentCore console and navigate to **Built-in tools** 1. Select your browser tool from the list (for example, `MyRecordingBrowser` ) 1. In the **Browser sessions** section, locate an active session with status **Ready** or **In progress** 1. In the **Live view / recording** column, click the provided "View live session" URL 1. The live view opens in a new browser window, displaying the real-time browser session The live view interface provides: + Real-time video stream of the browser session + Interactive controls to take over or release control from automation + Session status indicators and connection information + Ability to interact directly with the browser when control is enabled ### Session replay and analysis Access detailed session recordings and analysis through the console replay interface: **To access session replay in the console** 1. Navigate to your browser tool and select a completed session with **Terminated** status 1. Click **View Recording** for the session you want to analyze 1. The session replay page displays with comprehensive analysis tools **Session analysis features** The console provides multiple analysis tools: + **Video Player** : Interactive playback with timeline scrubber for navigation + **Pages Navigation** : Panel showing all visited pages with time ranges + **User Actions** : All user interactions with timestamps, methods, and details + **Page DOM** : DOM structure and HTML content for each page + **Console Logs** : Browser console output, errors, and log messages + **CDP Events** : Chrome DevTools Protocol events with parameters and results + **Network Events** : HTTP requests, responses, status codes, and timing **Navigate recordings** Use these methods to navigate through recordings: + Click on pages in the Pages panel to jump to specific moments + Click on user actions to see where they occurred in the timeline + Use the video timeline scrubber for precise navigation + Choose **View recording** links in action tables to jump to specific interactions ## Step 4: Access recordings programmatically Access live view and recording insights programmatically using the Amazon Bedrock AgentCore SDK and APIs for custom integration and automated analysis. ### Programmatic live view access Connect to live browser sessions using the browser client and viewer server: ``` import time from rich.console import Console from bedrock_agentcore.tools.browser_client import browser_session from browser_viewer import BrowserViewerServer console = Console() def main(): try: # Create browser session with browser_session('us-west-2') as client: print("✅ Browser ready!") ws_url, headers = client.generate_ws_headers() # Start viewer server console.print("[cyan]Starting viewer server...[/cyan]") viewer = BrowserViewerServer(client, port=8005) viewer_url = viewer.start(open_browser=True) # Keep running while True: time.sleep(1) except KeyboardInterrupt: console.print("[yellow]Shutting down...[/yellow]") if 'client' in locals(): client.stop() console.print("✅ Browser session terminated") if __name__ == "__main__": main() ``` ### Programmatic recording access Access recording data directly from Amazon S3 for custom analysis workflows: ``` import boto3 s3_client = boto3.client('s3', region_name='us-west-2') # List recordings in your bucket bucket_name = "your-recording-bucket" prefix = "browser-recordings/" response = s3_client.list_objects_v2(Bucket=bucket_name, Prefix=prefix) print(f"Recordings in s3://{bucket_name}/{prefix}:") for obj in response.get('Contents', []): print(f" {obj['Key']} ({obj['Size']} bytes)") print(f" Last Modified: {obj['LastModified']}") print() ``` Recording data structure: ``` s3://your-recording-bucket/browser-recordings/ └── session-id/ ├── batch_1.ndjson.gz ├── batch_2.ndjson.gz └── batch_3.ndjson.gz ``` Each session creates a folder with the session ID, and recording data is uploaded in chunks as the session progresses. ## Session replay programmatic examples For advanced use cases, you can build custom session replay viewers and integrate recording data into your own analysis workflows. The following GitHub examples show a standalone session replay viewer and what the complete browser experience looks like when using the browser session replay feature. For additional examples, see [AgentCore Browser examples on GitHub](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/). ### Standalone Session Replay Viewer The standalone session replay viewer is a separate tool for viewing recorded browser sessions directly from Amazon S3 without creating a new browser. + Connect directly to S3 to view recordings + View any past recording by specifying its session ID + Display error messages when artifacts are missing from S3, with console replay URLs specific to session ID + Interactive video playback interface with timeline navigation + Action markers on timeline showing form fills, clicks, and navigation events + Observability table displaying pages traveled with duration and URL details + Console events, CDP logs, and network logs for each page interaction + Session duration tracking integrated at page level + Real-time action verification with visual correlation between video and action data ``` # View the latest recording in a bucket python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data # View a specific recording python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data --session 01JZVDG02M8MXZY2N7P3PKDQ74 # Use a specific AWS profile python view_recordings.py --bucket session-record-test-123456789012 --prefix replay-data --profile my-profile ``` For reference, see [Standalone session replay viewer on GitHub](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/live_view_sessionreplay/view_recordings.py). ### Complete Browser Experience with Recording and Replay A comprehensive tool for creating browser sessions with recording capabilities and advanced replay features. + Create browser sessions with automatic recording to S3 + Live view with interactive control (take/release) + Adjust display resolution on the fly + Automatic session recording to S3 + Integrated session replay viewer with video player interface + Timeline scrubbing with precise action location tracking + Page-by-page analysis with navigation timeline and URL copying + Form filling action verification with click location details + Session duration tracking integrated at page level + Real-time action verification with visual correlation between video and action data ``` # View the latest recording in a bucket python -m live_view_sessionreplay.browser_interactive_session ``` For reference, see [Interactive browser session on GitHub](https://github.com/awslabs/amazon-bedrock-agentcore-samples/blob/main/01-tutorials/05-AgentCore-tools/02-Agent-Core-browser-tool/interactive_tools/live_view_sessionreplay/browser_interactive_session.py). # CloudWatch Metrics You can view the following metrics in Amazon CloudWatch: + Session counts: The number of browser sessions that have been requested + Session duration: The length of time browser sessions are active + Error rates: The frequency of errors encountered during browser sessions + Resource utilization: CPU, memory, and network usage by browser sessions These metrics can be used to monitor the usage and performance of your browser sessions, set up alarms for abnormal behavior, and optimize your resource allocation. For more information, see [AgentCore generated built-in tools observability data](observability-tool-metrics.md).