fix(react): reset recording toggle state and expose record button errors

[jdimovska]

💡 Overview

This PR fixes an issue where the record button gets stuck in a loading state when startRecording/stopRecording fails. Additionally RecordCallButton and RecordCallConfirmationButton now accept an onError prop so consumers can surface recording failures to users.

🎫 Ticket: https://linear.app/stream/issue/REACT-932/reset-recording-toggle-state-and-expose-record-button-errors

Summary by CodeRabbit

• Bug Fixes

  • Improved error handling for call recording so the UI stops showing a pending state after failures and remains responsive.

• Enhancements

  • Record call controls now surface errors through the UI handler, and button behavior for starting/stopping recordings preserves appropriate disabling while awaiting responses.

[changeset-bot]

⚠️ No Changeset found

Latest commit: 063999f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[coderabbitai]

No actionable comments were generated in the recent review. 🎉

ℹ️ Recent review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: 50bfcc96-994e-4fbf-b148-4c17ec736595

📥 Commits

Reviewing files that changed from the base of the PR and between 3fc7ebc and 063999f.

📒 Files selected for processing (1)

• packages/react-sdk/src/components/CallControls/RecordCallButton.tsx

🚧 Files skipped from review as they are similar to previous changes (1)

• packages/react-sdk/src/components/CallControls/RecordCallButton.tsx

---

📝 Walkthrough

Walkthrough

Updated call-recording error handling and unified component click handlers to route through a centralized error handler, adjusting component prop types to accept error callbacks.

Changes

Cohort / File(s)	Summary
Hook Error Handling packages/react-bindings/src/hooks/callUtilHooks.ts	Changed toggleCallRecording error path to set isAwaitingResponse = false before rethrowing errors from call.startRecording() / call.stopRecording(), ensuring awaiting state is cleared on failure.
Component Error Handler Integration packages/react-sdk/src/components/CallControls/RecordCallButton.tsx	Added createCallControlHandler/PropsWithErrorHandler usage; updated exported prop types to PropsWithErrorHandler<{ caption?: string }>; routed button clicks through createCallControlHandler(props, toggleCallRecording) and passed onError where applicable.

Sequence Diagram(s)

sequenceDiagram
    participant UI as "Record Button (UI)"
    participant Handler as "createCallControlHandler"
    participant Hook as "useToggleCallRecording"
    participant Call as "Call API (start/stop)"

    UI->>Handler: onClick
    Handler->>Hook: invoke toggleCallRecording
    Hook->>Call: call.startRecording() / call.stopRecording()
    alt success
        Call-->>Hook: resolved
        Hook-->>Handler: update isAwaitingResponse=false
        Handler-->>UI: success callback
    else failure
        Call-->>Hook: throws error
        Hook-->>Hook: set isAwaitingResponse=false
        Hook-->>Handler: rethrow error
        Handler-->>UI: call onError with error
    end

Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Poem

🐰 I tapped the button, ears all a-flutter,
Errors unrolled — but I fixed the clutter.
Awaiting states reset, no more delay,
Handlers catch slips along the way.
Hop, record, repeat — all tidy today.

🚥 Pre-merge checks | ✅ 3

✅ Passed checks (3 passed)

Check name	Status	Explanation
Title check	✅ Passed	The title accurately summarizes the main changes: resetting recording toggle state on error and exposing error handling to record button consumers.
Description check	✅ Passed	The description follows the template structure with Overview and Ticket sections, clearly explaining the fixes and new functionality without critical omissions.
Docstring Coverage	✅ Passed	No functions found in the changed files to evaluate docstring coverage. Skipping docstring coverage check.

_{✏️ Tip: You can configure your own custom pre-merge checks in the settings.}

✨ Finishing Touches

📝 Generate docstrings

• Create stacked PR
• Commit on current branch

🧪 Generate unit tests (beta)

• Create PR with unit tests
• Commit unit tests in branch reset-recording-state

---

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

_{Comment @coderabbitai help to get the list of available commands and usage tips.}

[coderabbitai]

Actionable comments posted: 1

🤖 Prompt for all review comments with AI agents

Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@packages/react-sdk/src/components/CallControls/RecordCallButton.tsx`:
- Around line 51-53: The "End recording" CompositeButton is still clickable
while isAwaitingResponse, allowing duplicate stop requests; update the
RecordCallButton to guard the confirmation like the other buttons by preventing
clicks and visual state change when isAwaitingResponse: add a disabled (or
equivalent) prop to CompositeButton and/or wrap handleClick so it returns early
if isAwaitingResponse, and keep showing LoadingIndicator instead of the label;
reference CompositeButton, handleClick, and isAwaitingResponse when making the
change.

🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

• Push a commit to this branch (recommended)
• Create a new PR with the fixes

---

ℹ️ Review info

⚙️ Run configuration

Configuration used: defaults

Review profile: CHILL

Plan: Pro

Run ID: a4c98a0d-592a-4361-a341-595e2f994afb

📥 Commits

Reviewing files that changed from the base of the PR and between 1b7e6a9 and 3fc7ebc.

📒 Files selected for processing (2)

• packages/react-bindings/src/hooks/callUtilHooks.ts
• packages/react-sdk/src/components/CallControls/RecordCallButton.tsx