LG-10973: Log heading and error message when warning shown

[night-jellyfish]

🎫 Ticket

Ticket: https://cm-jira.usa.gov/browse/LG-10973

🛠 Summary of changes

Currently, the Frontend: IdV: warning shown event does not tell us what error the user saw, only that an error message was displayed. There were a couple of times where a user's uploaded photo has a few errors, and we weren't sure which message they actually saw. For example, a case where this might appear is when the user uploaded a passport image with an unreadable address, we wanted to be sure that they saw the "wrong doc type" messaging and not the "couldn't read address" messaging.

This change logs the heading and error shown so that in the future we can check what the user saw with relative ease.

📜 Testing Plan

• Follow the flow through to the photo upload page
• Upload photos that will cause an error (maybe one PII error and one doc type error)
• Hit submit and stay on the warning page
• Search the log/events.log for the Frontend: IdV: warning shown entry
• Look for the heading property and check that it matches what you see on the page
• Look for the errorMessageDisplayed property and check that it matches what you see on the page

👀 Screenshots

Not exactly a screenshot, but here is the change in logs for a DOB entry error (log shortened with [...]):

Before:

{"name":"Frontend: IdV: warning shown",
"properties":{
    "event_properties":{
        "location":"doc_auth_review_issues",
        "remaining_attempts":76,
        "flow_path":"standard",
    [...]
"log_filename":"events.log"}

After:

{"name":"Frontend: IdV: warning shown",
"properties":
    {"event_properties":{
            "location":"doc_auth_review_issues",
            "remaining_attempts":79,
            "heading":"We couldn’t verify your ID",
            "errorMessageDisplayed":"We couldn’t read the birth date on your ID. Try taking new pictures.",
            "flow_path":"standard",
    [...]
"log_filename":"events.log"}

[dawei-nava]

This works, another possible way is to wrap UknownError with forwardRef(looks like it returns paragraph element for all scenarios). and create the ref and avoid creating additional div

const errorMessageDisplayedRef = useRef<HTMLParagraphElement>(null)

[dawei-nava]

Ok for now, may be we can refactor the error part once Kelli audit all the alerts/errors.