[FR] - How to catch event from Try Again! button when using React FaceLivenessDetector component

[ducthang2001]

On which framework/platform would you like to see this feature implemented?

React

Which UI component is this feature-request for?

Liveness

Please describe your feature-request in detail.

I am using @aws-amplify/ui-react-liveness which provide FaceLivenessDetector component. I have tested some testcase and one of these is faceliveness detect fail. When faceliveness check faill for a reason it will toast a Toast Message that includes message and a Try Again button!.

I have read about the onError props and log to the console as well as handle the error exception. But for improve users experience. I want to handle error when user click on the Try Again! button. How can i catch event onClick at the Try Again! button?

1. Steps to reproduce the issue

• Create a Faceliveness session
• Use FaceLivenessDetector component for streaming video
• Intentionally fail the FaceLiveness. For example ( stream video with multiple face, not bring face close to camera, etc ) just anything that fail the Faceliveness check.
  => After that the Try Again! button will appear, and i want to catch the event of user when click on it!

2. App logs: any faceliveness fail logs
3. Amplify library using: I am using React, it's @aws-amplify/ui-react-liveness": "^2.0.9
4. The Amplify library version: "aws-amplify": "^5.3.11"

Please describe a solution you'd like.

Catch the event when user click on the Try Again! button

We love contributors! Is this something you'd be interested in working on?

• 👋 I may be able to implement this feature request.
• ⚠️ This feature might incur a breaking change.

[sca1235]

having same issue

[thaddmt]

@ducthang2001 At this time you will probably need to write your own custom error view component in order to handle the click, there's documentation on how to do so here - https://ui.docs.amplify.aws/react/connected-components/liveness/customization#components

[reesscot]

Closing this out as we have added additional documentation here:
https://ui.docs.amplify.aws/react/connected-components/liveness/customization#error-view-example