React error when trying to build list of buttons [Solved]

After moving from 2.6.2 to 2.7.0 I’ve been experiencing issues with several of my Automation Tools throwing React 31 errors when trying to build a list of buttons from a prebuilt array.

My Code Example

        New-UDCard -Title "Single Group Removal" -Content {
            New-UDInput -Title "Enter NetID" -Content {
                New-UDInputField -Type textbox -Name 'NewUser' -Placeholder "Enter New Users NetID"
            } -Endpoint {
                param($newuser)   
                $Cache:strSIDusr,$strusr = Get-Sid -netid $newuser
                $Cache:newusr = $newuser
                [array]$Cache:grpstr =  Get-ADGroup -Filter {member -eq $strusr} | Select-Object -ExpandProperty Name
                [array]$Session:fgp = Get-ADGroup -filter {name -like "*" -and member -eq $strusr} | Select-Object -ExpandProperty distinguishedName          
                New-UDInputAction -Content @(
                    New-UDCard -Title "Select Groups to Remove User Access From:" -Content {
                        for($i=0; $i -lt $Cache:grpstr.Length;$i++) {
                            New-UDButton -Text $Cache:grpstr[$i] -OnClick(
                                New-UDEndpoint -Endpoint {
                                    $group = New-Object DirectoryServices.DirectoryEntry("LDAP://$($Session:fgp[$ArgumentList[0]])")
                                    [void]$group.member.Remove("<SID=$($ArgumentList[1])>")
                                    $group.CommitChanges()
                                    $group.Close()
                                    $gname = $Cache:grpstr[$ArgumentList[0]]
                                    Show-UDToast -Message "User Removed to Group"   
                                    Add-Content -Path $Cache:logpath -Value "$Cache:DateString - $User removed $Cache:newusr from $gname" -ErrorAction SilentlyContinue
                                } -ArgumentList @($i,$Cache:strSIDusr) 
                            )  
                        }
                    } -Links @(
                New-UDLink -Text 'Reset' -Url 'SupportTools'
                ) 
                )
            }

I have several tools that work like this that my support team uses to onboard / offboard users. In 2.6.2 I never saw these react errors but after moving to 2.7.0 it seems all of the tools that have these InputActions to build a list of buttons throw the React 31 error from above.

Has anyone seen this issue before or might have some insight into what might be going on? I’m going to continue testing and see if I can find anything but I figured I’d tap the ultimate brain power here as well.

Thanks!

Hi @aggiebeckett,

Could you try to remove the “New-UDEndpoint” part of the onclick, and just have the scriptblock of the endpoint.
If that doesn’t work, does it throw a react error if you’re running without onclick handlers?

On top of this, you might need to swap from -OnClick (…) to -OnClick {…}

1 Like

@BoSen29 and @Jacob-Evans I tried your suggestions on a test board got the same error, unfortunately.

New-UDPage -Name "React-Testing" -AuthorizedRole "Administrator" -Icon user -Content{
  New-UDGridLayout -Content {
     New-UDCard -Title "Terminations" -Id 'Terms' -Content {
        New-UDCard -Title "Single Group Removal" -Content {
            New-UDInput -Title "Enter NetID" -Content {
                New-UDInputField -Type textbox -Name 'NewUser' -Placeholder "Enter New Users NetID"
            } -Endpoint {
                param($newuser)   
                $Cache:strSIDusr,$strusr = Get-Sid -netid $newuser
                $Cache:newusr = $newuser
                [array]$Cache:grpstr =  Get-ADGroup -Filter {member -eq $strusr} | Select-Object -ExpandProperty Name
                [array]$Session:fgp = Get-ADGroup -filter {name -like "*" -and member -eq $strusr} | Select-Object -ExpandProperty distinguishedName          
                New-UDInputAction -Content @(
                    New-UDCard -Title "Select Groups to Remove User Access From:" -Content {
                        for($i=0; $i -lt $Cache:grpstr.Length;$i++) {
                            New-UDButton -Text $Cache:grpstr[$i] -OnClick{
                                $group = New-Object DirectoryServices.DirectoryEntry("LDAP://$($Session:fgp[$i])")
                                [void]$group.member.Remove("<SID=$($Cache:strSIDusr)>")
                                $group.CommitChanges()
                                $group.Close()
                                $gname = $Cache:grpstr[$i]
                                Show-UDToast -Message "User Removed to Group"   
                                Add-Content -Path $Cache:logpath -Value "$Cache:DateString - $User removed $Cache:newusr from $gname" 
                            }  
                        }
                    } -Links @(
                New-UDLink -Text 'Reset' -Url 'SupportTools'
                ) 
                )
            }
        }
    }       
}

}

Only one thing that i can suggest is to change from New-UDPage -Content to -Endpoint and give it a try.

Same Error changing Page to Endpoint.

I just tested on 2.8.3 and am not having this issue. Here’s how I modified your script so I didn’t have to use AD.

$Page = New-UDPage -Name "React-Testing" -AuthorizedRole "Administrator" -Icon user -Content {
    New-UDGridLayout -Content {
       New-UDCard -Title "Terminations" -Id 'Terms' -Content {
          New-UDCard -Title "Single Group Removal" -Content {
              New-UDInput -Title "Enter NetID" -Content {
                  New-UDInputField -Type textbox -Name 'NewUser' -Placeholder "Enter New Users NetID"
              } -Endpoint {
                  param($newuser)   
                  
                  [array]$Cache:grpstr =  @('1', '2', '3')
                  [array]$Session:fgp = @('asdf', 'asdf')

                  New-UDInputAction -Content @(
                      New-UDCard -Title "Select Groups to Remove User Access From:" -Content {
                          for($i=0; $i -lt $Cache:grpstr.Length;$i++) {
                              New-UDButton -Text $Cache:grpstr[$i] -OnClick{
                                  $group = New-Object DirectoryServices.DirectoryEntry("LDAP://$($Session:fgp[$i])")
                                  [void]$group.member.Remove("<SID=$($Cache:strSIDusr)>")
                                  $group.CommitChanges()
                                  $group.Close()
                                  $gname = $Cache:grpstr[$i]
                                  Show-UDToast -Message "User Removed to Group"   
                                  Add-Content -Path $Cache:logpath -Value "$Cache:DateString - $User removed $Cache:newusr from $gname" 
                              }  
                          }
                      } -Links @(
                  New-UDLink -Text 'Reset' -Url 'SupportTools'
                  ) 
                  )
              }
          }
      }       
  }
}

Have you tried 2.8.3?

@adam I have not but I’m going to roll it out now and see if it changes anything.

@adam after updating to 2.8.3 I was able to test your exact code and it worked. But when adding back in the AD scripts to variables it throws the React 31 error again.

So I’m thinking it’s probably something to do with what is being pulled from AD that react isn’t liking. Whats weird is it’s just a group name that is being pulled nothing crazy long or anything 1-2 words max.

Looking through the Dashboard logs it seems like it’s Registering and Unregistering the Buttons when you hit submit on the tool.

12:55:31 [Debug] NewElementCommand {“tag”:“span”,“attributes”:{“className”:"card-title left-align "},“events”:,“content”:[“Select Groups to Remove User Access From:”],“type”:“element”,“key”:“5c655781-86f1-4c92-981f-3c786b76c75e”,“onMount”:null,“id”:“4a351b24-9f0f-47a2-baa2-9cc04fa18962”,“refreshInterval”:5,“autoRefresh”:false,“hasCallback”:false}
12:55:31 [Debug] NewElementCommand HTML
12:55:31 [Debug] EndpointService Register() ec0ff1a7-c99d-4267-9519-030f1bd6aab5 f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Unregister() ec0ff1a7-c99d-4267-9519-030f1bd6aab5 f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Register() 142ed156-b930-44d5-9020-f63d59010a8d f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Unregister() 142ed156-b930-44d5-9020-f63d59010a8d f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Register() e6fc6f78-cf0f-43c0-93d6-8ee1b2384223 f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Unregister() e6fc6f78-cf0f-43c0-93d6-8ee1b2384223 f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Register() 6dd13d53-f567-4638-a6a1-344414b7e31c f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Unregister() 6dd13d53-f567-4638-a6a1-344414b7e31c f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Register() 7e348b6a-b6ff-4510-bba3-b95a5c2dd91d f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Unregister() 7e348b6a-b6ff-4510-bba3-b95a5c2dd91d f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Register() 7589b3c7-198d-49f6-89ae-3de9d82903b5 f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Unregister() 7589b3c7-198d-49f6-89ae-3de9d82903b5 f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Register() ad35ced7-c89c-48a7-851a-86238440534f f5861bcc-5fab-4e93-a2d1-7c74f5b97655
12:55:31 [Debug] EndpointService Unregister() ad35ced7-c89c-48a7-851a-86238440534f f5861bcc-5fab-4e93-a2d1-7c74f5b97655

The Total Registered Buttons here equates to the total number of groups for the user I’m looking at for testing.

It would be very strange but now its possible to find the command which is causing the error … Also try out if Get-Sid is causing that error … This seems for me the most suspicious one :wink: … Not that often used in the community projects

@augustin.ziegler you could absolutely be correct. Unfortunately I work in a very weird environment where our Domain and our Authenication domain do not have a 2-way trust so I’m forced to work with Foreign Security Principles which only allow me to manage users via SID’s it’s a terrible practice but the hand I’ve been dealt. I will mess around with that and see if that is the issue.

We also had to move our AD domain and came across the need of SID History to match users and sync changes … Totally understand :slight_smile:

I’ve moved everything from the Get-Sidendpoint back into the main body of the tool script and i’m still getting the same React 31 error. I’m stumped at this point I’m not even sure what to test for a fix.

I can test it at work tomorrow but maybe it is more related to some strange local caching issues … Have you tried it (if its possible) to test it on another computer/server/laptop?

Especially if you had a version change …

Yeah my Support team is the one who brought the issue to me so it’s been ran on multiple different computers with the same results.

ok strange … :confused:

Interesting enough after updating to 2.8.3 I’m not seeing the error logged in the Dashboard logs anymore but only those register unregistered events for the buttons. But upon further inspection it seems like the NewElementCommand is initiating with all of the Group Names but nothing is actually being displayed.

15:33:44 [Debug] NewElementCommand {“tag”:“div”,“attributes”:{“style”:{“backgroundColor”:null,“color”:null},“className”:“card ud-card”},“events”:[],“content”:[{“tag”:“div”,“attributes”:{“className”:“card-content”},“events”:[],“content”:[{“tag”:“span”,“attributes”:{“className”:“card-title left-align “},“events”:[],“content”:[“Select Groups to Remove User Access From:”],“type”:“element”,“key”:“4f0c9216-fc6b-490e-8bbb-cbfe2e871745”,“onMount”:null,“id”:“fdc563f3-7fb0-49ff-b3c5-99e484c86396”,“refreshInterval”:5,“autoRefresh”:false,“hasCallback”:false},{“tag”:“div”,“attributes”:{“className”:“left-align”},“events”:[],“content”:[{“id”:“01fd9ce4-72e5-4c22-9abd-823db87ae156”,“floating”:false,“onClick”:“01fd9ce4-72e5-4c22-9abd-823db87ae156”,“style”:null,“flat”:false,“type”:“ud-button”,“iconAlignment”:“left”,“disabled”:false,“isPlugin”:true,“backgroundColor”:null,“icon”:null,“text”:{“CliXml”:”<Objs Version=“1.1.0.1” xmlns=“http://schemas.microsoft.com/powershell/2004/04”>\r\n PITOSystemsTeam\r\n”},“fontColor”:null},{“id”:“84b8b303-8041-4e04-9355-9e6ec2fbdcd3”,“floating”:false,“onClick”:“84b8b303-8041-4e04-9355-9e6ec2fbdcd3”,“style”:null,“flat”:false,“type”:“ud-button”,“iconAlignment”:“left”,“disabled”:false,“isPlugin”:true,“backgroundColor”:null,“icon”:null,“text”:{“CliXml”:"<Objs Version=“1.1.0.1” xmlns=“http://schemas.microsoft.com/powershell/2004/04”>\r\n Documentation\r\n"},“fontColor”:null},{“id”:“4b92c5d2-8168-40e5-a528-345c093c48b5”,“floating”:false,“onClick”:“4b92c5d2-8168-40e5-a528-345c093c48b5”,“style”:null,“flat”:false,“type”:“ud-button”,“iconAlignment”:“left”,“disabled”:false,“isPlugin”:true,“backgroundColor”:null,“icon”:null,“text”:{“CliXml”:"<Objs Version=“1.1.0.1” xmlns=“http://schemas.microsoft.com/powershell/2004/04”>\r\n PITOUsers\r\n"},“fontColor”:null},{“id”:“f899a25d-cad2-4b05-be7a-044dd613f14f”,“floating”:false,“onClick”:“f899a25d-cad2-4b05-be7a-044dd613f14f”,“style”:null,“flat”:false,“type”:“ud-button”,“iconAlignment”:“left”,“disabled”:false,“isPlugin”:true,“backgroundColor”:null,“icon”:null,“text”:{“CliXml”:"<Objs Version=“1.1.0.1” xmlns=“http://schemas.microsoft.com/powershell/2004/04”>\r\n .FileSystemRootShareAccess\r\n"},“fontColor”:null},{“id”:“c1b95f47-a4e0-4b60-be99-929a692e47c2”,“floating”:false,“onClick”:“c1b95f47-a4e0-4b60-be99-929a692e47c2”,“style”:null,“flat”:false,“type”:“ud-button”,“iconAlignment”:“left”,“disabled”:false,“isPlugin”:true,“backgroundColor”:null,“icon”:null,“text”:{“CliXml”:"<Objs Version=“1.1.0.1” xmlns=“http://schemas.microsoft.com/powershell/2004/04”>\r\n Server Admins - File-Repo\r\n"},“fontColor”:null},{“id”:“849c41d8-a329-479c-939c-d3409fad33ca”,“floating”:false,“onClick”:“849c41d8-a329-479c-939c-d3409fad33ca”,“style”:null,“flat”:false,“type”:“ud-button”,“iconAlignment”:“left”,“disabled”:false,“isPlugin”:true,“backgroundColor”:null,“icon”:null,“text”:{“CliXml”:"<Objs Version=“1.1.0.1” xmlns=“http://schemas.microsoft.com/powershell/2004/04”>\r\n TAMUDocsRetentionImplementation\r\n"},“fontColor”:null},{“id”:“16b8063c-6363-42c6-921c-adaeb739f1e1”,“floating”:false,“onClick”:“16b8063c-6363-42c6-921c-adaeb739f1e1”,“style”:null,“flat”:false,“type”:“ud-button”,“iconAlignment”:“left”,“disabled”:false,“isPlugin”:true,“backgroundColor”:null,“icon”:null,“text”:{“CliXml”:"<Objs Version=“1.1.0.1” xmlns=“http://schemas.microsoft.com/powershell/2004/04”>\r\n RA - Certificate operations\r\n"},“fontColor”:null}],“type”:“element”,“key”:“0562a45c-15f9-4c04-8282-1a9bb6621f7b”,“onMount”:null,“id”:“73d3e148-7044-4788-8e58-c4703e2a2e64”,“refreshInterval”:5,“autoRefresh”:false,“hasCallback”:false}],“type”:“element”,“key”:“19d14f15-ebde-44d2-b25c-aae3992371a1”,“onMount”:null,“id”:“aa68ab66-13d8-4198-9e7a-fa967470d102”,“refreshInterval”:5,“autoRefresh”:false,“hasCallback”:false},{“tag”:“div”,“attributes”:{“className”:“card-action”},“events”:[],“content”:[{“url”:“React-Testing”,“id”:“33dffcee-5c49-417b-b391-63d20565e448”,“type”:“ud-link”,“color”:null,“icon”:"",“text”:“Reset”,“onClick”:null,“openInNewWindow”:false,“isPlugin”:true,“assetId”:“index.9a654c239f7e598a3172.bundle.js”}],“type”:“element”,“key”:“1e17fba4-5117-42f0-8887-99d901541bfb”,“onMount”:null,“id”:“bb9a6a12-ae7b-4d5a-a844-c62ef284bb67”,“refreshInterval”:5,“autoRefresh”:false,“hasCallback”:false}],“type”:“element”,“key”:“f1f5a266-6d72-460b-86c7-036b6390dc84”,“onMount”:null,“id”:“f880cd7e-455d-4fca-94f0-82df18739432”,“refreshInterval”:5,“autoRefresh”:false,“hasCallback”:false}

Hi @aggiebeckett
Could you try not passing XML as the button text? .tostring it or something.

Either that or test with a (get-random) text.

I haven’t tried it with XML but with a small random character generator it works great…

New-UDPage -Name "React-Testing" -AuthorizedRole "Administrator" -Icon user -Content {
  New-UDGridLayout -Layout '{"lg":[{"w":5,"h":16,"x":3,"y":0,"i":"grid-element-Terms","moved":false,"static":true}]}' -Content {
    New-UDCard -Title "Terminations" -Id 'Terms' -Content {
      New-UDCard -Title "Single Group Removal" -Content {
          New-UDInput -Title "Enter NetID" -Content {
              New-UDInputField -Type textbox -Name 'NewUser' -Placeholder "Enter New Users NetID"
          } -Endpoint {
              param($newuser)   
              [array]$Cache:grpstr = -join ((33..126) | Get-Random -Count 6 | % {[char]$_})
              [array]$Session:fgp = @('asdf', 'asdf')

              New-UDInputAction -Content @(
                  New-UDCard -Title "Select Groups to Remove User Access From:" -Content {
                      for($i=0; $i -lt $Cache:grpstr.Length;$i++) {
                          New-UDButton -Text $Cache:grpstr[$i] -OnClick{
                              Wait-Debugger
                              $group = New-Object DirectoryServices.DirectoryEntry("LDAP://$($Session:fgp[$i])")
                              [void]$group.member.Remove("<SID=$($Cache:strSID)>")
                              $group.CommitChanges()
                              $group.Close()
                              #$gname = $Cache:grpstr[$i]
                              Show-UDToast -Message "User Removed to Group"   
                              #Add-Content -Path $Cache:logpath -Value "$Cache:DateString - $User removed $Cache:newusr from $gname" 
                          }  
                      }
                  } -Links @(
              New-UDLink -Text 'Reset' -Url 'React-Testing'
              ) 
              )
          }
      }
  }       

}
}

So I’m assuming it has to be how Powershell is passing the Group Names back to the Button. Maybe just explictly converting that entire array to string might fix it?