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.