Flusk Error Catcher

How to use the Flusk Error Catcher on your Bubble app?

Updated over a week ago

Flusk Error Catcher is a feature that gives you more visibility on your app's errors and bugs.

Flusk catches runtime errors from your app from different locations:

  • Back-end errors

  • Front-end errors

  • Plugin errors

Collected from 2 different sources:

  • Your Bubble app logs

  • The Flusk plugin

From these informations is Flusk able to summarize and group your app's errors so that you can have a clear and understandable view of your app's health status.

Global error monitoring

This is the default view when you enter the "Errors & Bugs" view on Flusk:

On this page, you'll see:

  • The number of errors thrown in the last 7 days

  • The status of the different error collectors

  • The global view of your app's errors

Recent Errors

This chart will tell you exactly how many errors happened on your app during last week in an eyesight.

The higher the bar, the more errors your app encountered that day.

For more details, you can hover a specific bar to know how many errors exactly happened that day on your app.

Status of error collectors

Flusk uses 2 different sources to collect your errors from:

  • Your Bubble app logs

  • The Flusk plugin, which is also used to enrich them

For maximum accuracy, it's highly recommended to always make sure these 2 sources are correctly set up and working.

Global view of your app's errors

Each row within this table represents a unique error encountered by your application. At first glance, the table might seem complex, but let's walk through each column to demystify the information presented.

  • Message: This column displays the specific error message that was generated.

  • Available Icons: Three distinct icons provide insights at a glance. Here's what each one signifies:

    • Screenshot Icon: Activation of this icon indicates that the Flusk plugin successfully captured a screenshot at the moment the error occurred, offering valuable context for debugging.

    • Eye Icon: This signifies that Flusk has traced the sequence of logs leading up to the error, termed as "Associated Logs." Utilize the Flusk Visual Log Viewer to explore the events preceding the error.

    • User Icon: An enabled icon here means a registered user encountered the error, whom you can identify. A disabled icon denotes an unregistered visitor faced the error.

  • Last Seen: This provides timestamps for when the error was:

    • First detected (1st occurrence)

    • Most recently observed (Last occurrence)

  • Versions: Flusk operates across all your app's versions, enabling quick identification of the version(s) on which the error occurred. If the same error is recorded across multiple versions (e.g., test and live), this column consolidates and displays those versions.

  • Side: A quick reference indicating the error's origin, whether on the front-end or back-end of your application.

  • Tags (Beta): While still under development, this feature aims to automatically categorize errors based on criteria like the error message and location.

  • Users: Reflects the total number of unique users impacted by this specific error.

  • Count: The total number of times this error has been recorded.

  • Locations: This feature is in progress and not yet available.

  • Rec. (Recording): A disabled icon here signifies that Flusk has temporarily ceased recording new instances of this error to enhance performance. This usually occurs when an error, already known and unfixed, recurs frequently. While automatic recording is paused, manual re-activation is possible.

Details of an error

When clicking on a specific errors in the table, a modal window will open containing much more informations regarding this error instance.

Informations

Exact error message

In Flusk, whenever there's a problem, we catch the exact error message and show it to you right here.

Sometimes, you might see more than one error message for the same issue, just like in the picture we've shared.

Here's what happens when your app runs into a new error: we check it against all the errors we've already found in your app.

If the new error is more than 90% similar to one we've seen before, we treat it as the same error.

This way, we group them together as one.

We do this because often, two errors might look a bit different but are actually caused by the same thing.

Take a look at these two error messages:

"Element [Window] Log Data Explorer A - Temporary error connecting to πŸ…΅ Xano Monitor - Get Log Data (raw message: {"message":"Unable to locate var: data.data"})\n"
"Element [Window] Log Data Explorer - Temporary error connecting to πŸ…΅ Xano Monitor - Get Log Data (raw message: {"message":"Unable to locate var: data.data"})\n" 

They're almost identical except for one tiny detail. But really, they're pointing out the same problem. So, we keep things simple by treating them as one error, not two.

Details

This section contains the following informations:

  • Last occurence: the last time this error has been recorded.

  • First occurence: the first time this error has been recorded.

  • Versions: the different versions this error was recorded on.

  • Origin: where does this error comes from - whether it's from the front-end or from the back-end.

  • Collected from: this indicates the collection source of this error - whether it's from the Flusk plugin or from your Bubble logs

  • Enriched data: this indicates if the error has been enriched with a screenshot. This is only available for errors collected from the Flusk plugin.

Occurrences

This view will display every single occurrence of an error, summarizing when it happened, on which version, to which user, on which page, whether it's enriched with a screenshot or not and if some logs are available to retrace the entire workflow path of this error.

Details

By clicking on a specific occurrence, you can get some extra details about the error.

The "Explore user" button will give you more details about the user that faced this error. You'll see when they were the last active on your app (their last activity), their email, and a button to log in as this user to your app.

Again, Flusk displays you the exact error message this user faced.

When the error is enriched, you'll see a screenshot of the user screen at the exact moment the error occurred for this user.

If available, the "Explore associated logs" button will integrate the Flusk Visual Log Viewer directly in the error monitoring, allowing you to retrace the entire path of the workflow that led to that error.

This is very useful if you want to reverse-engineer your app and know what the data and the previous workflow were.

Impacted users

Flusk allows you to see the list of unique users that have been impacted by this error, aggregated with the number of occurrences they've faced each.

On this screenshot, we can see that the user "[email protected]" faced this error for the last time a day ago, was last online 10 hours ago, faced it 1 time on version live.

Resolving errors

The entire purpose of the Flusk Error Catcher is to help you fixing errors on your Bubble app.

Given a specific error, you'll have to set up the fixes in your app to try making this error not happening again to your users.

Here's how the process should work:

  • You deploy a fix for a specific error

  • You mark it as "Resolved" in your Flusk dashboard

  • Then, the following happens

    • If the error never happens again, it indeed fixed it

    • If Flusk captures the error again, we will manually set its status back to "Unresolved" and you can try pushing a new working fix again.

To mark an error as resolved, do the following:

  • Go to the details screen of the errors you'd like to mark as "Resolved"

  • On the right, you'll see the current status of the error (should be "Unresolved", in red)

  • Click it, and select "Resolved"

Ignoring errors

Sometimes, Flusk will report and record some errors that:

  • You are aware of and can't do anything about

  • Are not proper errors

And for whatever reason, you might not want them to appear on your Flusk dashboard.

We know sometimes Flusk is not 100% accurate, and we give you the ability to correct it and manually ignore error instances.

Here's how to ignore an error on Flusk:

  • Go to the details screen of the errors you'd like to mark as "Ignored"

  • On the right, you'll see the current status of the error (should be "Unresolved", in red)

  • Click it, and select "Ignored permanently"

Did this answer your question?