From bugs to beers: how bug tracking software helped Michael save his Friday night

Ivan PronchenkovOctober 08, 2024

Share:

Mobile app developers often find themselves entangled in the intricate web of debugging.

As applications become more sophisticated, the challenges in identifying and resolving issues multiply. Traditional bug testing tools and bug tracking software sometimes fall short when tackling complex problems that are difficult to reproduce.

This is where AppSpector emerges as the latest trend in debugging, offering a new horizon for developers seeking efficient solutions.

On a Friday evening, as Michael was preparing to meet friends at his favorite bar, he received an urgent message from customer support: users couldn't access their personalized health insights. Recognizing the severity of the issue, Michael knew he had to act quickly, even if it meant delaying his plans.

Michael's unexpected challenge

Michael was the lead developer of HealthSync, a mobile application designed to seamlessly integrate users' health and fitness data across multiple platforms.

Built using Flutter, the app operated on the WellnessHub platform, essentially functioning as a white-label solution. The app's architecture was complex, involving a transition from native iOS or Android code into a Flutter Engine upon launch.

Architecture details:

  • Backend systems:

HealthSync Backend: Managed core user authentication and primary services.

WellnessHub Backend: Handled additional features like personalized insights and community interactions.

  • User account linking:

When users registered with HealthSync, their accounts were linked to WellnessHub accounts via their phone numbers.

  • Authentication flow:

Login to HealthSync:

  • Users logged into the HealthSync backend.
  • Received a sessionToken, stored locally in the app.

Login to WellnessHub:

  • The sessionToken was passed to the WellnessHub backend.
  • Received another token for accessing additional features, also stored locally.

Token usage:

Throughout app usage, requests were made to both backends.

Appropriate tokens were attached to each request to correctly identify the user.

The perplexing problem

Michael dived into the issue, starting with server logs and standard bug testing tools. However, nothing seemed amiss from the server's perspective; all tokens were valid, and no errors were being logged. The problem was more elusive than he anticipated.

Technical hurdles:

  1. Token persistence issue:

The HealthSync sessionToken wasn't being cleared during a new login—only during logout.

If a user logged into HealthSync but didn't complete the WellnessHub login (perhaps closing the app prematurely), the old token persisted.

Logging into a different account would still use the previous user's token.

Consequence: Unauthorized access and data discrepancies.

  1. Incorrect account linking:

During new user registration, if the app was closed before linking to a WellnessHub account, subsequent logins could cause incorrect account associations.

Logging into a different HealthSync account could inadvertently link to the wrong WellnessHub account.

Consequence: Confusion and potential data breaches.


  1. Dual Flutter Engines running:

Misconfiguration led to two Flutter Engines operating simultaneously.

The UI was powered by one engine, but network requests were sent using tokens from the other.

Consequence: Inconsistent user sessions and difficult-to-trace bugs.

Michael was stuck. Traditional bug tracking software wasn't providing the insights needed to pinpoint the issue. Time was slipping away, and his evening plans were fading.

Turning to AppSpector

Amid his frustration, Michael remembered that AppSpector offered a free trial.

Hoping it could provide the deeper visibility he needed, he decided to give it a try. In just five minutes, he installed the SDK and integrated it into HealthSync.

What AppSpector unveiled:

  • Real-time network monitoring:

Visualized all network requests to both backends.

Observed the exact tokens being transmitted and received.

  • Unified timeline:

Provided a shared timeline of events across both backends.

Allowed Michael to see the sequence of actions leading up to the issue.

  • Detection of anomalies:

Highlighted token mismatches and incorrect associations.

Revealed the presence of dual Flutter Engines causing inconsistent behavior.

The swift resolution

With AppSpector's insights, Michael could finally see the root causes of the problems.

sessionToken from WellnessHub

sessionToken from HealthSync

Error message from HealthSync


Fixing the token persistence issue:

Updated the authentication logic to ensure the sessionToken was cleared during both login and logout.

Implemented checks to prevent old tokens from being used inadvertently.


Correcting account linking:

Modified the registration flow to handle unexpected closures.

Added verification steps to ensure accounts were linked correctly upon the next app launch.


Resolving the dual Flutter Engines:

Reviewed and corrected the app's initialization configuration.

Ensured only a single Flutter Engine operated at any given time.



After thorough testing, Michael deployed the updates. Users regained access to their personalized health insights, and the app's integrity was restored. Best of all, Michael still had time to join his friends at the bar.

Understanding AppSpector's advantages

AppSpector provided Michael with capabilities that standard bug reporting software couldn't match:

  • Deep visibility: Real-time insights into app behavior on live devices.
  • Comprehensive monitoring: Tracking of network requests, token usage, and backend interactions.
  • Ease of integration: Quick setup allowed for immediate benefits without lengthy configuration.

AppSpector stands out among bug testing tools by providing developers with real-time insights into their mobile applications. Unlike traditional bug tracking software, AppSpector allows for live monitoring of apps running on actual user devices, offering a depth of context that static logs and reports can't match. Its main monitors include:

  • Network monitor: Tracks all network requests and responses, displaying detailed information about headers, payloads, and statuses. This feature is crucial for identifying issues with API calls and data transmission.
  • Database monitor: Observes database operations in real time, helping developers understand how data is stored, retrieved, and manipulated within the app.
  • UI monitor: Provides a visual representation of the app's user interface as users interact with it, which is invaluable for debugging UI-related bugs that might not be evident through logs alone.
  • Logs monitor: Aggregates logs from the app, allowing developers to filter and search through them efficiently, much like advanced bug reporting software but in a live context.

By integrating AppSpector into his toolkit, Michael complemented his existing software for bug tracking, such as Charles Proxy and Sentry. AppSpector's ability to offer a unified timeline of events across different components of the app provided him with the additional context needed to solve non-trivial issues swiftly.

Conclusion

Isn't it better to drink beer at the bar than to chase bugs on a Friday evening?

AppSpector saved Michael hours of debugging, turning a potential disaster into a quick fix.

For developers grappling with complex mobile applications, incorporating advanced bug tracking software like AppSpector can make all the difference. It not only enhances the efficiency of bug testing tools but also brings peace of mind, knowing that elusive bugs can be caught before they disrupt users.

Share:

Watch live demo