fix: use array index as key instead of btoa() for non-Latin characters

[taradaidv]

Problem

btoa() throws InvalidCharacterError when encoding strings containing non-Latin1 characters (Unicode > 255), breaking the rendering of log results with non-Latin characters.

Solution

Replaced btoa(res) with array index for React keys in the logStashResult map function.

Changes

• Changed key={btoa(res)} to key={index} in App.tsx line 73
• Added index parameter to .map() callback

Testing

• ✅ Compiles without errors
• ✅ Works with Cyrillic characters from Logstash output
• ✅ No InvalidCharacterError in browser console

Related

Fixes issue with syslog messages containing non-Latin characters.

[epacke]

Thank you for your PR!

Using index as key is generally not ideal in React as the keys should be consistent and using index could lead to unexpected results. Would it be possible to give me an example that fails so I can try to work around it?

You can read more about the index thing here:
https://dev.to/shiv1998/why-not-to-use-index-as-key-in-react-lists-practical-example-3e66

[epacke]

Following up on this. Do you have an example?

[taradaidv]

Following up on this. Do you have an example?

Hi! Thanks for the ping - I was swamped and hadn’t been following the thread closely. I’ve worked around it locally, but I’d love to contribute a proper fix upstream - you’ll know best how you’d prefer to address it.

For a minimal reproduction, try rendering a string with the emoji 🦄 - the UI throws an InvalidCharacterError from btoa() and the page goes blank when the results list renders.

I’ve also attached two screenshots: the second shows JSON rendering correctly with the fix applied.

[epacke]

Solved it in #331 . Thanks for your patience!

[epacke]

Closing this one. Feel free to create an issue if you run into more problems. 👍