Are you building a no-code Bubble app with OpenAI? And have you ever encountered an error like this? This is because I tried to submit a too large or too big conversation 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. So 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 a instructions for how to handle errors. And that can be generally, but also down to very specific errors. And so we're going to be using, in this tutorial, the Unhandled Error Occurs workflow action.

How to learn Bubble development

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.

An unhandled error occurs workflow action

But 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 to different plug-ins available in Bubble. And I'm just going to use OpenToast and install that. And then on my workflow, I'm going to show a Toast notification and said 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 workflows error message. 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 no code. Okay, I've really just tried to have a massive conversation here, so I exceed the token limit. So that's it. Okay, and there you go. We get a slightly more attractive error alert. But what we can do instead, can we adjust the size of it? It's not right, click to close. I could put my own message in here, so I can say, internal issue, our support team have been alerted.

Let's see how well that looks. I'll just copy that this time. 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. 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 errors 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. Okay, so there you go. That is how you can improve error handling.

Error email notifications

Oh, one last thing. One last thing. You may want to add in a send email action here to email you this error. Again, you can fill out these fields here, and you can add in the error message and send it to you. Now 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 user, 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. Right, that's it. That's better error handling for OpenAI and Bubble.