DEV Community: Agustina Chaer

Why Validating Segment Events Is So Frustrating (And How I Fixed It)

Agustina Chaer — Thu, 09 Apr 2026 01:35:03 +0000

Validating analytics events should be simple. It’s not.

If you’ve ever had to check whether events are firing correctly, you probably know the drill: trigger an action, open your debugging tool, click into an event, expand a massive JSON payload, scroll… scroll more… and hope the one or two properties you care about are actually there.

Then do it again. And again. And again.

Most of the time, you’re not exploring the data. You’re just trying to answer very specific questions:

• Does this event fire when it should?
• Does it include the right properties?
• Are those properties correct?

But the tools we rely on don’t optimize for that. They show the entire payload we send to segment and bid you good luck.

That is where I found myself nearly a year ago, when after a round of QA too many analytics tickets were filed. The system we had for checking events was just too error prone and bugs were getting past us.

So I decided to do something about it...

If you want the TL;DR here is the link to the Chrome Extension I built Analytics X-Ray

If it is broken, then fix it

I first made a list of the things I would want.

Make it easy to spot the attributes that actually matter to me.
Filter out noisy events
Better timeline visualization
No weird UI issues

Then I got to building it, or to be honest, Cursor and I got to building. This started as an internal tool and was the perfect opportunity for me to get used to using AI for larger sets of work.

And a few days later I had a good enough extension that made analytics debugging actually enjoyable. Well, at least for me cause I got to test out my new shiny tool.

And I got exited! Ideas kept coming and what originally was a very small MVP was now a fully fledged analytics tool.

Here are some of my favorites:

Easier to read timeline by:
- Color coding events by keyword: Page, View, Click, etc.
- Dividers on page navigation and reload for clearer separation.
Simplified view of an event by:
- Presenting the payload in nicer collapsible sections
- With color coding attribute types
- And property pinning for surfacing what matters to you.
Filtering events by:
- search event name, property key and values
- Hiding noisy events all together.

Standing the test of use

What started as a tool for myself turned into an internal tool for my team.

Gained great internal adoption
- over 70 weekly active users (almost all the Eng team)
- Used by Devs, QAs and Data.
A lot of dormant analytics bugs were discovered.
Issues get caught earlier.
More features were added.
- Even branching out to other internal dev tool verticals
The user experience got refined

I really recommend building internal tools, it has been a big improvement on our team's workflow.

Making it Open Source

After all those months of tinkering with the internal tool I felt like I had created something that could actually be very useful to the tech community and decided it was worth sharing.

The analytics portion of the internal tool in particular, what started it all, had potential to be generalized.

So with the idea in my head and all the learnings along the way I rebuilt it but with open source in mind.

And that is how Analytics X-Ray came to be.

If you use Segment on your day to day and any of what I said resonated with you. I invite you to check out the extension, here are the links:

Analytics X-Ray in the Chrome Web Store

Analytics X-Ray Repo

Contributions are more than welcomed! Let me know if you try it out!

How to Effectively Integrate a Typography System in React Native

Agustina Chaer — Tue, 05 Jul 2022 15:17:34 +0000

The Problem

If there is one thing that most react native apps have in common, it is how they display text. Some simple apps show very little, but most apps display a lot. That is why it's vital to put the right system in place, to ensure adding and refactoring texts in your app is as simple as possible.

Now, you might be thinking - why am I reading an article on how to manage such a simple component? It's just text, right? Yes, but more often than not, you need to apply styles and properties to said text to make it look the way you want. When you have to do it for all the texts in your app, it adds up. This, of course, begs the question - how can I reduce the amount of code repetition?

Over the years, I have seen my fair share of attempts at solving this problem, and I can finally say that I have landed on one solution that left me quite pleased.

The Solution

The solution is quite simple, but it's based on following best UI practices. What do I mean? Having predefined styles for headings, paragraphs, and other texts that you might need. What is important is that all the texts of your app fall into one of those definitions and that the amount doesn't get out of hand. It's good to keep the number of definitions short, so it's easier to remember what to put when coding and that your app is consistent in its respective styling, which in turn, gives you usability and accessibility points.

Without any further ado, here is the aforementioned code of the component and supplementary files:

Once you have all of that in place, you can simply import the component and use it as follows:

It's as simple as that, and usually, you will only have to apply extra styles to a particular text component instance if you need to add spacing, color, or wrapping.

Taking the naming convention and hierarchy of text components from the web makes it very easy to understand and remember. As you may have noticed, with the use of prop-types, it is very easy to notice if you misspelled a type when setting it on an instance of said component.

Although adding custom fonts to your React Native project is out of scope for this article, you might find (link here) this article useful where we cover that subject (How to customize fonts in React Native)

Conclusion

As you can see, the solution is very clean and simple, but it fixes a problem in a component that is so basic that it is also often overlooked. Putting a bit of time and thought into these kinds of components that make up the core DNA of our apps can go a long way.

I hope you find this article helpful and that you end up implementing this solution in your projects.

Digital Accessibility 101: The importance of Digital Accessibility

Agustina Chaer — Tue, 05 Jul 2022 14:56:41 +0000

This is the first installment of a series of articles where we are going to dive into digital accessibility. Some of the topics that are going to be covered are:

Why is this subject so important?
Why should you make your sites/applications accessible?
How can you make your site/app accessible?

In this article, we are going to tackle the first two questions.

Why is Digital Accessibility so Important?

It is estimated that over 1.2 billion people live with some form of disability. This makes up approximately 15% of the population. As you can imagine, just as with the real world, people with disabilities encounter barriers to navigate the digital space on a daily basis.

When done right, the digital medium can be a great tool for people with disabilities as it can enable them to do things that they couldn’t do before or make a task more effortless. Some examples of this are:

A blind person reading the news with their computer using a screen reader whereas before there were only newspapers.
A physically disabled person opting for online shopping vs going to the store in person.
A hard-of-hearing person opting for the online version of a class they are attending at a university because it’s close-captioned.
A speech-impaired person filling in a contact form or ordering food with an app because calling is not an option or they would have needed to ask someone else to do it for them.

There are many more examples just like those. That being said, the one thing they all rely on to actually work is that they need to be accessible. We can easily transform the examples above so they are not useful anymore:

The news site is not coded properly, it does not have the correct text hierarchy. Without going into too much detail, the site becomes just a big blob of text to the tools a blind person would use to navigate the site making it unusable. The blind person would need to find another place to get the news from.
The e-commerce site is not keyboard accessible so many of the physically disabled people that don’t use a mouse to navigate the web wouldn’t be able to shop online in that store. They would need to find another site or go to the store in person.
The university uploads the class but doesn’t add any closed captions or transcripts making it useless for the hard of hearing.
The restaurant has a web page showcasing their menu but the only way to order is by calling the phone number on their site, speech impaired people would probably order someplace else that is accessible.

With the digital medium becoming more and more popular, the lack of digital accessibility can become even prohibitive and exclusionary. Think how many things you do on a normal day that involves interacting with a website or an app?

How would you feel if those sites and apps weren’t built in a way that you could use them? You would feel left out and you would probably find it harder to get things done.

The Curb Cut Effect

The curb cut effect is the phenomenon that occurs when disability-friendly features end up benefiting a larger group of people than the people it was originally designed for.

The name comes from the curb cut ramps installed for people in wheelchairs, those ended up being really useful to other people. For example, parents pushing strollers, workers pushing heavy carts, business travelers wheeling luggage, even runners and skateboarders.

The same can be identified in many places in the digital space. One very clear example that probably most people have used is the addition of closed captions, now included in all streaming services and video platforms.

Closed captions have allowed hard-of-hearing people to watch and understand content in a way they couldn’t before. They also allow everyone to watch content in a foreign language or watch a video without audio if needed too, especially in situations like being at a library without headphones.

We all suffer at some point some kind of disability, limitation or impairment

To further solidify the concept of “Accessibility benefits us all” let’s talk broaden the scope and talk about disabilities, limitations and impairments:

Permanent: These are the ones we normally think about when we think of disabilities (Visual, Auditory, Cognitive, Physical, and Speech).
Temporary: Ear infection that prevents you from hearing properly for a while or you broke your arm and now can’t use a mouse to use your computer for a couple of weeks.
Situational: You are on a bus and want to watch a video but you forgot your headphones so you need close captions. Even something as simple as looking at your phone outside if it’s very bright, not enough contrast ratio on an app you might be using might make it unusable in that situation.
Socioeconomic: Using a very old device with a poor internet connection in a site that has not been optimized for those conditions can result in a very poor experience for the user.

As you can see the lack of accessibility affects us all to some degree.

Why Should You Make Your Site/Application Accessible?

The simplest answer to the question above is that “It’s the right thing to do”. That alone should be enough to convince you. It should be a no-brainer that making your products usable by anyone and not excluding more than a billion people is the way to go.

What you might not know is that by doing the right thing, you will also be benefiting your company in a lot of ways. Some of them are:

Reach a wider audience, hence more customers and more revenue.
Better SEO (Search Engine Optimization), which means that people will find you more easily when using search engines like Google.
Better user experience for all users can help with user retention.
Avoid potential discrimination lawsuits, if you want to know more here is a good article about digital discrimination lawsuits in the US.

What Comes Next?

Now that we have talked about why accessibility is so important and why you should make your site/application accessible, it’s time to start the journey of making your site/application accessible.

To help you in that journey, we’ll be posting more articles in the upcoming weeks that will touch on key things you need to do and take into consideration.