Monitor and track resources ionic failed to load from the local www folder

AFAIK, Ionic works as a WebView loading html+js from a local www folder in runtime. Sometimes I have a missing font and locally (in browser) can see that font file is available and is loaded but in some cases, it’s not loaded and the font is missing.

Is it possible to track when some resources were failed to load?

Sort of. There isn’t actually “a www folder” at runtime, in the sense that any external program (like a file explorer) could see. The WebView internally reroutes requests for things in there and grabs them out of the app bundle, where they’re all bundled up.

Best way I can think of is to use Safari (for iOS) or Chrome (for Android) and attach to the running process with developer tools - there is a Network tab that shows all network operations, including internal ones. It should show what is being requested, and the consequent results.

@rapropos thanks for the quick reply! Loading in runtime from the bundled resources, right, that’s was my understanding, thanks for confirming.

The issue is that all my resources are loaded normally, but from time to time (rare) it cannot be loaded, so my goal is to know if that happening for other users and how many times / how often. I feel like iOS, when backgrounded somehow interrupts all the active resources and when users are back to the app, it fails to render some fonts. I can do a few guesses but my primary goal is to add telemetry to track this assumption (resources are failed to load from the bundle).

Only other thing I can think to suggest is if you can post your @font-face declaration using a publicly-accessible CDN or webserver, as then other people can try loading it on various iOS devices. I can’t think of an easy way to add troubleshooting code from JavaScript here - I would expect the activity is going on at a lower level.

1 Like