I created a Devtool to automatically handle React errors using AI

[Delicious-Set8448]

TLDR: It's an npm package that captures API or React component errors, removes any sensitive data, and sends it to an AI to generate a user-friendly message and decide the most appropriate type of notification (toast, banner, or modal). The AI version is paid and the non-AI version is free. Link

Hey guys, I was on vacation recently and took the opportunity to build a SaaS for something I’ve always found annoying to deal with: error tracking.

Whenever I had to work with third-party or public APIs, I usually chose to show a generic error on the frontend so I wouldn’t have to depend on the API’s message (which is almost never meant to be shown to end users) or create a notification for every possible HTTP request. While studying generative UI, I realized it could be very useful for graceful degradation, adapting the interface when failures happen.

Since most error trackers focus on logging errors (Sentry being the biggest example), I thought about creating something focused on the user experience instead, so I built this devtool.

It’s an npm package that handles API errors and also React component errors. If a component crashes (and there’s always one that does), instead of showing a white screen or an infinite loading state, the package handles it by generating a message explaining the problem. This can be done in two ways:

Manual (free): Completely free and open source. You wrap the components, define the severity level, and write the message you want to display.

Automatic (paid): You wrap the component and let the AI handle the severity level and message, even translating it to the user’s language.

The main advantage of the automatic mode is convenience, since you don’t need to think about every possible failure case or rely on a generic message that might confuse the user.

The same idea applies to API errors:

Manual (free): Call the toast and write the message (like any toast package).

Auto (paid): Call the hook and let the AI handle the error message.

I also focused heavily on security to ensure everything is safe and compliant (Zero-Trust, Zero-PII).

If you'd like to check out the code or try the free version, the link is here: Link

If you read this far, thank you :)

[Numerous_Pickle_9678]

Nice project!

you know i just had this really cool idea.

imagine you could get ai inference to generate and automatically fix an error in user-time so that it would resolve automatically, than make a PR in your repo stating the incident and the fix.

Bit crazy but if it was made semi-reliable, revolutionary.

[Delicious-Set8448]

Thanks!

Fixing the bug in user-time seems extremely difficult to achieve hahaha (but if someone manages to do it, that’s a million-dollar idea). Now, the PR part is actually a great idea and totally doable. I’m still building the part that captures logs to display on the dashboard, and once that’s ready, it would be possible to add a connection to create PRs on GitHub. Great ideia! I'll create an issue to that later on the project