bug: empty screen when URI is malformed

[legendar]

Prerequisites

• [X] I have read the Contributing Guidelines.
• [X] I agree to follow the Code of Conduct.
• [X] I have searched for existing issues that already report this problem, without success.

Ionic Framework Version

v7.x, v8.x

Current Behavior

When the URI is malformed, Ionic throws the "URI malformed" error, resulting in an empty screen being rendered. We want to handle this error using a React error boundary and render our standard error message instead. The issue arises when Ionic attempts to get configuration from the URL: https://github.com/ionic-team/ionic-framework/blob/main/core/src/global/ionic-global.ts#L43.

Additionaly, the second issue is: How can we disable this behavior, as we don't want to allow reconfiguration of our app from the URL in production?"

Expected Behavior

When the URI is malformed, Ionic should not drop an error. Instead, it should provide a way to catch this error or ignore it.

Steps to Reproduce

1. Open any Ionic app in web browser
2. Add the query param ?test=%. E.g. https://www.pandaexpress.com/location?test=%
3. If your web server doesn't handle malformed URIs, you'll encounter a white screen in production mode.

Note that in development mode, you're more likely to see the standard error message from Vite.

Code Reproduction URL

https://www.pandaexpress.com/location?test=%

Ionic Info

Ionic:

Ionic CLI : 7.2.0 Ionic Framework : @ionic/react 7.5.8

Capacitor:

Capacitor CLI : 5.6.0 @capacitor/android : not installed @capacitor/core : 5.6.0 @capacitor/ios : not installed

Utility:

cordova-res : not installed globally native-run (update available: 2.0.1) : 2.0.0

System:

NodeJS : v18.15.0 npm : 9.5.0 OS : Linux 5.15

Additional Information

No response

[sean-perkins]

Hello @legendar thanks for opening up this issue.

I can confirm the issue with the malformed URI. Ionic Framework should not be causing an uncaught exception when decoding the URI. We can handle this exception and fallback the config object in these scenarios.

We want to handle this error using a React error boundary and render our standard error message instead.

This should be a concern of your application layer. When the location changes, attempt to decode the query parameters and catch any invalid cases that occur to handle in your React error boundaries.

How can we disable this behavior, as we don't want to allow reconfiguration of our app from the URL in production?

There is currently no way to opt-out of this behavior.

[legendar]

There is currently no way to opt-out of this behavior.

I see this in the code. However, what I mean is that we want to have a way to disable this behavior. Should I create a separate ticket for it?

[sean-perkins]

@legendar yes, I would create a feature request around that specific API request to customize (opt-out) of that behavior. New APIs will be in a minor, but the malformed URI we can address in a patch.

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.