React Recall

Contextualized Logging

Capture every user interaction, log, and network request to a file—so coding agents can contextualize errors in seconds.

1. Install
npm install -D react-recall
2. Wrap your app in layout.tsx 
<ReactRecallProvider>
  {children}
</ReactRecallProvider>
3. Start recording
npx react-recall
.react-recall/logs.jsonl
"type":"click", "target":"SendButton"
"type":"input", "value":"Hello world"
"type":"error", "msg":"Failed to parse"
"type":"fetch", "url":"/api/chat", "status":200

Your agent can use the tools it already knows, like grep and jq, to analyze the logs.

localhost:3000 (my-chat-app)
localhost:4312 (React Recall)
Hi, I heard about ReactRecall. Can you tell me about it?

React Recall is a debug session recorder that makes it really easy for you and your AI agents to view logs and trace user flows.

It captures every click, log, error, and network request in your React app to a .react-recall/logs.jsonl file, so your coding agent can use the tools it already knows to analyze the logs in context to the user flow.

Install:

npm install -D react-recall

Setup:

import { ReactRecallProvider } from 'react-recall'

function App() {
  return (
    <ReactRecallProvider>
      <YourApp />
    </ReactRecallProvider>
  )
}

Run:

npx react-recall

Want to try it out? Click Send below and watch your coding agent debug an error using the logs!

See it in action →
Something went wrong
Click 14:22:45
"Reasoning" enabled
Click 14:22:47
"Send" (ChatInput > SendButton)
Input 14:22:47
value: "Hi, I heard about React Recall..."
POST 200 312ms 14:22:48
/api/chat
▶ General
Started 14:22:47.623
Completed 14:22:47.935
Duration 312ms
Status 200
▶ Request Headers 2
Content-Type application/json
Authorization Bearer sk-...a8f2
▶ Response Headers 2
content-type application/json
x-request-id req_abc123
▶ Request Body 
{
  "messages": [
    {
      "role": "user",
      "content": "Hi, I heard about ReactRecall..."
    }
  ],
  "model": "gpt-4"
}
▶ Response Body 
{
  "id": "chatcmpl-abc123",
  "choices": [{
    "message": {
      "role": "assistant",
      "content": "ReactRecall is a debug..."
    }
  }]
}
Log 14:22:48
Response received, rendering message
Click 14:22:52
"npm install react-recall" (CodeBlock)
0 selected
claude — ~/my-chat-app
Claude Code v2.1.6
Welcome back!
  ▐▛███▜▌
 ▝▜█████▛▘
   ▘▘ ▝▝
~/my-chat-app
Tips for getting started
Ask Claude to create a new app…
Recent activity
No recent activity
Opus 4.5 · Claude Max
> add a loading state to the send button
● I'll add a loading state to the send button. Let me check the current implementation.
● Read(src/components/ChatInput.tsx)
Found SendButton component at line 42
● Edit(src/components/ChatInput.tsx)
✓ Added isLoading prop and spinner
● Done. The send button now shows a spinner while the message is being sent.