OpenAI & Bubble Tips - Beautiful error handling
In this Bubble tutorial we demonstrate how you can replace the ugly browser alerts when OpenAI responses with an error. We explain how you can replace this error with an beautiful in app notification and send an email to your tech team with the error details.
Unlock beautiful error handling: Learn how to transform ugly browser alerts into sleek, customized notifications in your OpenAI-powered Bubble app.
Master Bubble's error workflows: Discover how to capture errors, display attractive alerts, and even send email notifications for specific API issues.
Elevate your app's user experience: Implement professional error handling techniques to handle token limits and other API challenges seamlessly.
Improving Error Handling in Bubble.io Apps with OpenAI
Are you building a no-code Bubble app with OpenAI and have you ever encountered an error like this? This is because I try to submit a too large or too big conversation, a list of messages, and I've exceeded the token limit for the model that I'm using. I'm going to show you in this Bubble tutorial video how we can improve the user UI so that they don't get an ugly browser error like this.
Using Bubble.io Workflows for Error Handling
Something that a lot of people don't know about is if I go into the Workflows for the page. Here's my ChatGPT client. You can give Bubble instructions for how to handle errors and that can be generally but also very down to very specific errors. So we're going to be using in this tutorial the unhandled error occurs workflow action.
Exploring Bubble.io Tutorial Resources
But before I launch into that, did you know that we have got hundreds of Bubble tutorial videos? Some you can find on our YouTube channel, but others you can't find anywhere else but planetnocode.com. They're exclusive to our members. So if you're learning Bubble you should head there right now and check out our vast library of Bubble tutorial videos.
Implementing Toast Notifications for Error Handling
Let's look at an unhandled error occurs. So I'm going to add in a toasty Notification instead and so there are toasty or toast, there are any number of libraries for this. Copies of this library express as from plugins available in Bubble and I'm just going to use open toast. There's still that and then on my workflow, I'm going to show a toast notification and set its background to red because it's a bad thing that's happening. I'll say error. And what I can do is I can say current workflow's error message.
Testing the Improved Error Handling
Let's already have a look at how that improves things. So this workflow action will capture the error, stop the browser from showing the browser alert, the ugly alert box, and it's going to show a better one instead. So I'll say "Write five poems about OpenAI" and... Okay, I've really just tried to have a massive conversation here. So I exceed the token limit. Set sand okay, and there you go, we get a slightly more attractive error alert.
Customizing the Error Message
But what we can do instead is customize the size of it, top right, click close. I could put my own message in here so I can say "Internal issue. Support team have been alerted." Let's see how well that looks. I just copy that this time.
Narrowing Down Error Handling
Okay, so now we're getting a more attractive error. One final thing with the error handling is that at the moment this same alert will handle for any browser alerts that Bubble tries to send. So if I was using other APIs, if other issues or bugs were causing problems with my Bubble app, it might cause this same error to occur. But I can limit it down by saying current error's workflow message contains and I think if I say "tokens" then I'm narrowing it down to just the OpenAI one, or at least the OpenAI one specific about token limits. So let's try that again.
Adding Email Notifications for Errors
So there you go. That is how you can improve error handling. Oh, one last thing, one last thing. You may want to add in a send email action here to email you this error and so again, you can fill out these fields here and you can add in the error message and send it to you now.
Important Considerations for Email Notifications
Just be aware a couple of things with the send email command. If you put an email address in here, this is run in the front end for the users. So that email address is accessible to your users if they really did some digging. Also, make sure that you've got your SendGrid API set up so that the email sends and it sends based on your domain's authority and authenticated with that so it doesn't end up in spam and it's just a bit more reliable to send.
Conclusion
Right, that's it. That's better error handling for OpenAI and Bubble.
Can't find what you're looking for?
Search our 300+ Bubble tutorial videos. Start learning no code today!
Flexible Pricing Plans to Fit Your No-Code Journey
Choose the plan that aligns with your goals and start building your startup today.
Have questions?
We have answers!
Find answers to common questions about our membership plans, programs, and more.
Both plans offer full access to our learning resources, community, and support. The Annual plan provides a significant discount (over 15%) compared to paying monthly, and it allows you to lock in your rate for a full year.
Absolutely! You can easily upgrade or downgrade your membership plan at any time by logging into your account and selecting the desired plan. Any unused portion of your current plan will be prorated and applied to your new plan.
As a Planet No Code member, you'll receive a discount on our Bubble coaching sessions. Monthly members receive a 10% discount, while Annual members receive a 17.5% discount. To redeem your discount, simply log into your account and book a coaching session through our platform.
Our 8-week intensive mentorship program is designed to provide personalized guidance and support to help you accelerate your startup journey. You'll be matched with a startup expert who will work with you one-on-one to set goals, overcome challenges, and make rapid progress.
To apply for the Mastery Program, simply click the "Request Invitation" button on our pricing page and fill out the application form. Our team will review your application and schedule a call with you to discuss your goals and determine if the program is a good fit for your needs.
We accept all major credit cards, including Visa, Mastercard, American Express, and Discover.
While we don't offer a free trial, we do provide a 14-day money-back guarantee. If you're not completely satisfied with your membership within the first 14 days, simply contact our support team, and we'll issue a full refund.
If you decide that Planet No Code isn't the right fit for you, you can cancel your membership at any time by logging into your account and navigating to the subscription management page. Click the "Cancel Membership" button, and your membership will be terminated at the end of your current billing cycle.