search

department-of-veterans-affairs / va.gov-team

Public resources for building on and in support of VA.gov. Visit complete Knowledge Hub:
https://depo-platform-documentation.scrollhelp.site/index.html
281 stars 202 forks source link

Investigate Datadog RUM issues with actions #87625

Closed dcloud closed 2 months ago

dcloud commented 3 months ago

Description

Spawned from https://github.com/department-of-veterans-affairs/va.gov-team/issues/86178, we have a few open support tickets with Datadog support because we are seeing issues with

User story

As a Cartography team member, I want Datadog RUM to record actions accurately and reliably

Notes

DDG support requests:

Prior investigation

Notes from prior work:

While department-of-veterans-affairs/vets-website#30605 appears to have made some of the console functions work, making it possible/easy to grab a session_id via DD_RUM.getInternalContext()?.session_id, there are remaining issues:

  • signficant lag between actions taken in a session and events appearing in DDG. Need to reload datadog to see events appear

  • The issues with labelling click actions on the "Learn More" content accordian

    • Opening the accordion appears to record sibling content: "Welcome to the new home for My HealtheVet. Now you can manage your health care needs in the same pla [...]" - @action.id:f1861868-b2dc-4ca5-b04a-20d87083d6d6
    • Closing grabs the content inside the accordion, per @action.id:1c375a4c-c7ef-4015-a282-198f9b1e43fb
  • Possible double-counted click actions, e.g. @action.id:e9163295-a195-49c3-a20f-59f18f8bba8c -> @action.id:1976d1e0-8fdc-4811-9447-61540ddf68c3… I wouldn't expect to see the non-custom click being recorded any more on links that have the datadogRum.addAction call

Per my clicking around in staging - @session.id:2c298dca-f11a-4a8d-a42b-f53e4e1eb0d1

These observations should probably be put into a "Datadog debug" ticket if we need to continue to fix things with DD_RUM

Possible tasks:

Acceptance criteria

dcloud commented 3 months ago

Noting that the at least two of the places the we see incorrect action names being recorded are on links within web componenents:

Aside on datadogLogs

Talked with someone on pensions and they wired up datadogLogs in addition to RUM. I wonder if this could help uncover client-side errors generally… I'm not sure how it might help with our RUM woes

dcloud commented 3 months ago

Also seeing an action on the temp Medical Records page that also appears to grab random text. Not sure where the click is for

click on Medical records COMING SOON Soon, you’ll be able to find, print, and download your medical records o [...]

My guess at this time is a click on an element within the VaBreadcrumbs in MedicalRecords.jsx

dcloud commented 3 months ago

Looing at how Datadog determines the action text function-module which has a getActionNameFromElementForStrategies that gets run up to two times. First with priorityStrategies and if that doesn't yield a name, then fallbackStrategies. The fallback uses a getTextualContent function that checks if an element has an innerText prop. So multiple places to look at and compare to how a web component might behave differently from vanilla HTML…

dcloud commented 3 months ago

If I run vets-website locally with DDG manually enabled, I can pause in various points in the Datadog code, and using that I saw that getTextualContent gets run for the accordion, and that function tries to extract text from the <va-alert-expandable> web component rather than the <a> within <va-alert-expandable>. Since that is the element that gets inspected, it makes sense that DDG would grab the whole text inside the expanded element.

I should look at the <va-link> elements since I'd expect that to grab the correct text because that component is a wrapper around a stock <a> element.

dcloud commented 3 months ago

Checking out the <va-link> and seeing that computeClickActionBase sees the event.target as the <va-link>… event.target.textContent and event.target.innerText are empty strings…

The fallback strategy in Datadog RUM code will go up the DOM tree from elements to parent elements to grab text. This is what we're seeing, though I was seeing just the heading above a link…

It looks like it goes va-link -> li -> ul.mhv-c-link-list -> nav -> div.vads-l-col--12, and the div's element.innerText is `"My VA health benefits", and at least on localhost the recursion up the tree ends. That doesn't quite match what we've seen in staging and production where the entire div's content is in the action.

I'm not seeing those click actions appear in datadog, though my session did.

dcloud commented 3 months ago

Adding data-dd-action-name gets the Rum code to grab that value, but I still don't see actions recorded into ddg during my testing (a session is recorded but not the actions), so hard to confirm that would work in other environments

dcloud commented 3 months ago

As the event flow shows, I created https://github.com/department-of-veterans-affairs/vets-design-system-documentation/issues/3001 which is to start discussion with VADS about the web components and how they interact with Datadog

dcloud commented 2 months ago

To reiterate findings:

dcloud commented 2 months ago

Tickets spawned from this investigation:

dcloud commented 2 months ago

@wesrowe @LynneJohnson224 This is ready to be closed

wesrowe commented 2 months ago

Closing