MapBox Plugin: Memory issue causes the app to reload

[siticum]

Hi

We are building www.roamio.online and the wrapped native app www.roamio.online/app.

The core of the app is a map and we are currently using the mapbox plugin (as you can see from other forum threads). The plugin is really well build, and we have been requesting features and improvements to be able to build a super smooth app. Appreciated!

However, the mapbox plugin causes bubble app to reload sporadically (typically after 30 sec to 2 minutes). Not loading the mapbox plugin, makes the app run perfectly with reloads. We are therefor sure that its mapbox cause the issue.

We have been testing out the Google Maps Extender, but you are writing that you wont do further improvements to the plugin as MapBox already have the features.

The reload has also happened a few times in browsers, Edge and Safari on our iOS (iPhone 12) devices.

We would really really like the MapBox plugin to work and not cause the app to reload.

We are not specialist or have experience with the technicalities of the plugin, bubble apps, or the wrapper. But let use try to explain the issue.

Setup:
Bubble App, wrapped to Apple App Store with Natively wrapper (WebKit engine) - the Zerocode wrapper cant surfice as it doesn’t have the features we require yet.

Tested on iPhone X, 12 and 13 where the crash happens.

Suspected issue:
The plugin overloads the memory or the cache overloads.

We suspect that the overload is caused by either a long list of cache control settings errors:

Please help us out as this is crucial to our app. Either by debugging the plugin cache and memory usage, or somehow limiting memory usage by adding a “low performance” mode for the plugin, disabling cached areas of the map.

Note: We have a close dialogue with the Natively Wrapper team. The issue is not with the wrapper. They are saying:

1. WebKit have limited memory
2. It is most probably a cache / memory issue with the plugin or setup of mapbox itself.
3. They suggest improving and debugging the plugin performance.

Let us know what other information you need to get this fixed.

[Vasile]

Hello @siticum,
I’m reaching out to you regarding your recent request.

To help us better understand the issue you’re experiencing, we would appreciate if you could provide us with some additional information regarding how the error occurs across different environments.

Could you please confirm if you encounter the same error when using the app via a web browser or only when you are using it as a wrapped app with Natively wrapper?

If yes, it would be extremely helpful if you could share the following details with us:

1. Browser Name: The specific web browser you are using (e.g., Chrome, Firefox, Safari, Edge).
2. Operating System: The operating system of your device (e.g., Windows, macOS, Linux, iOS, Android).
3. Browser Version: The version of the web browser. This can typically be found in the browser’s “About” menu.

These details will greatly assist us in replicating the environment you’re experiencing the issue, enabling us to conduct a more focused investigation.

We are committed to resolving your issue as soon as it’s possible. Please let us know if you need assistance with anything else.
Best regards.

[siticum]

Hi @Vasile

We appreciate you helping us out.

First off, the reload would happen in the Edge and Safari browsers on iOS (iPhone) as well.

We experienced the reload about 20 times and with a bit of trial-and-error found that it was connected to adding more than 100 markers to the MapBox map. eg 150.

We have since then limited the number of markers to 50. We prefer not to limit it at all, but rather have about 300 to 500 pr user session for the best experience. 50 is to few.

After the limit only wrapper WebKit engines are refreshing after 30 seconds to 2 minutes. We tested it with the BDK wrapper, and it happened there as well. We don’t remember the browser versions, but always test our app on the absolutely newest browser and iOS versions. Manually updating once they are released.

Again, we suspect that it has something to do with WebKits memory and the setup of caching in the plugin. We don’t see reloads on PC browsers and have tested with Chrome and Edge on the newest versions of Windows 11 Pro.

[Vasile]

Hello @siticum,
Thank you for reaching out and sharing with us additional details.

This new information was passed to our dev team, and it will help them a lot in their investigation. Rest assured that once they have any updates I will make sure to let you know of the results.

Your patience and understanding are highly appreciated while we work through this.
Have a nice day!

[Vasile]

Hello @siticum ,
I hope this message reaches you in good spirits.

We have tested the Mapbox plugin on our side and as a part of your app, when testing the plugin itself we didn’t encounter any overloading issues.

However when testing using your app https://roamio.online/version-test/app we have noticed the following:

When running it on Macbook 13 Pro 2017 in Safari browser we noticed the overloading of cache issue on Chrome no issues were encountered.

Then we did testing on iPhone 11 pro IOS 16 in Safari browser again we noticed the issue.
In Chrome we didn’t encounter the overloading cache issue.

We recommend checking the bubble logs in your app and looking over if there are more clues to this problem.

Sharing these details will help us get a deeper understanding of your issue and the overall investigation process.

Thank you for your patience and understanding while we work through this.
Have a nice day!

[siticum]

Hi Vasile

I send a private message sharing editor access. I believe that’s the easies way.

[Vasile]

Hello @siticum ,
I hope you are doing well.

Thank you for your trust and for sending us access to your app this is very helpful for our development team.

At the moment they are conducting investigations and testing to find out more about the overloading cache issue you’ve mentioned, as soon as I hear back from them I will be sure to get back to you.

Thank you for your understanding and cooperation.
Have a nice day!

[Vasile]

Hello @siticum ,
Hope this message reaches you in good spirits.

I wanted to provide you with an update regarding the issue you were experiencing with your application. We’ve conducted checks across various browsers and wanted to let you know that the application you sent StoryPilot | Bubble Editor is no longer restarting unexpectedly.

However, since we were provided access only to a page describing your application, rather than the application itself, our troubleshooting capabilities were somewhat limited.

Could you please confirm if the problem still persists on your end? We’re eager to ensure that everything is functioning smoothly for you.

Thank you for your patience and understanding throughout this process. We’re here to assist further if needed.
Have a nice weekend.

[siticum]

Hi Vasile

We recently changed the name to StoryPilot.io, you can find the app at https://storypilot.io/app

Yes, it still reloads. We are working on a new UI as well (/app2) which is why the App Store app is showing a white page atm.

I will work on getting the app from the app store back online with the MapBox map for further testing. We still need it

Will let you know

[siticum]

Hi @Vasile

The page with the mapbox pligin is now at www.storypilot.io/app.

To further test the reload with webkit, use the TestFlight app at Join the Roamio: Audio Stories Anywhere beta - TestFlight - Apple

Cheers

[Vasile]

Hello @siticum ,
Thank you for providing more details regarding your use case.

I have passed this information on to the development team, as soon as I hear back from them I will be sure to get back to you.

Thank you for your understanding and cooperation.
Have a nice day!

[siticum]

Hi @Vasile

We are still experiencing the reload / crash on the Webkit engine. How are the dev team progressing?

The app is still available for testing. See links above. The reload happens even without markers on the map. Eg. when loading the element and panning / zooming to current location.

Looking forward

[Vasile]

Hello @siticum
Thank you for reaching out, and sorry for the delayed reply over the weekend.

We wanted to let you know that our development team is still investigating the issue you reported.

We are working diligently to identify and resolve the problem. We’ll keep you updated with any progress or findings.

If you have any further questions or additional information in the meantime, please don’t hesitate to reach out.
Thank you for your patience and understanding during this process.

[Vasile]

Hello @siticum ,
I hope you are doing well.

We are still experiencing the reload / crash on the Webkit engine. How are the dev team progressing?

Our development team has thoroughly tested your application on iOS and Safari, and we have not observed any app crashes during our tests. Additionally, we’ve conducted a review using Chrome’s “Lighthouse” tool, and it did not reveal any critical issues related to Mapbox.

Regarding the HTTP Cache-Control errors you mentioned
We suspect that the overload is caused by either a long list of cache control settings errors:

The HTTP Cache-Control errors cannot affect your application reloading. The caching mechanisms employed are actually beneficial, optimizing load times and data usage. Our checks indicate that Mapbox caches only about 5-10 megabytes of data, which is too minimal to cause any disruptions.

However, upon close inspection of the screenshot, you provided:

We’ve noticed that your app configures over 500+ markers with high-resolution PNG images and employs numerous animations and blur effects. Kindly note that when you add large images to the Bubble database and set the size value, it does not mean that they are optimized (scaling occurs after the image is loaded on the page) this is the way Bubble operates and it’s important to keep that in mind when adding such large amounts of images in your app.

Tested on iPhone X, 12 and 13 where the crash happens.
We don’t see reloads on PC browsers and have tested with Chrome and Edge on the newest versions of Windows 11 Pro.

Kindly note that PCs generally have more resources in terms of RAM and processing power, allowing them to handle more intensive tasks and larger caches with greater ease. This means they can run heavier applications without significant performance drops.

IOS devices, such as iPhones and iPads, have less RAM and are optimized for efficiency over raw power. As a result, they might struggle with the same tasks, especially if the application is resource-intensive or if there’s heavy use of caching, as is the case with your app.

The main issue stems from the “weight” of the application rather than any specific problem with Mapbox. To enhance the performance and stability of your app, our development team conducted an analysis and recommends the following steps:

1. Optimize Images: Before uploading images for markers to the database, ensure they are optimized for web use. This reduces their size and load times.
2. Reduce Marker Load: Instead of loading all markers simultaneously, consider displaying only those visible on the current map view. This can drastically reduce the load on your application.
3. Overall Optimization: Review your application’s design and functionality to identify other areas for performance improvements, such as minimizing the use of heavy animations and optimizing CSS effects.

Looking forward to your reply and let us know if our suggestions were helpful. We are really invested and hope that such a helpful and ambitious project as yours will eventually be deployed successfully.
Have a nice weekend.

[Vasile]

Hello @siticum ,
I hope you are doing well.

I’d like to know if you received my previous message.

Did you have time to check the suggestions we made, or did you fix the reported issue by yourself?

We would appreciate your feedback upon this. In case you need further assistance, don’t hesitate to reach out.

Feel free to reach out if you have any other questions, we would be happy to assist you.
Have a nice day!