Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

[bug]: Navigate to a View with Arguments crashes WEB app when browser page is reloaded #1111

Closed
MirzaCickusic opened this issue Jun 22, 2024 · 10 comments
Closed

[bug]: Navigate to a View with Arguments crashes WEB app when browser page is reloaded #1111

MirzaCickusic opened this issue Jun 22, 2024 · 10 comments
Labels
p1 Highest priority issue

Comments

@MirzaCickusic
Copy link

Describe the bug

I followed instructions from https://stacked.filledstacks.com/docs/getting-started/navigation-basics#navigate-to-a-view-with-arguments to implement the navigation with arguments to the stacked default starter code.

Here is what I changed:
image

image

Then run the app.

What operating system do you use?

macOS

Information about the installed tooling

fvm flutter doctor -v
[✓] Flutter (Channel stable, 3.22.2, on macOS 14.5 23F79 darwin-arm64, locale en-BA)
• Flutter version 3.22.2 on channel stable at /Users/mirzacickusic/fvm/versions/3.22.2
• Upstream repository https://github.com/flutter/flutter.git
• Framework revision 761747bfc5 (2 weeks ago), 2024-06-05 22:15:13 +0200
• Engine revision edd8546116
• Dart version 3.4.3
• DevTools version 2.34.3

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
• Android SDK at /Users/mirzacickusic/Library/Android/sdk
• Platform android-34, build-tools 34.0.0
• ANDROID_HOME = /Users/mirzacickusic/Library/Android/sdk/platform-tools
• Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)
• All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.2)
• Xcode at /Applications/Xcode.app/Contents/Developer
• Build 15C500b
• CocoaPods version 1.14.3

[✓] Chrome - develop for the web
• Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2022.3)
• Android Studio at /Applications/Android Studio.app/Contents
• Flutter plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/9212-flutter
• Dart plugin can be installed from:
🔨 https://plugins.jetbrains.com/plugin/6351-dart
• android-studio-dir = /Applications/Android Studio.app/
• Java version OpenJDK Runtime Environment (build 17.0.6+0-17.0.6b829.9-10027231)

[✓] VS Code (version 1.90.2)
• VS Code at /Applications/Visual Studio Code.app/Contents
• Flutter extension version 3.90.0

[✓] Connected device (3 available)
• macOS (desktop) • macos • darwin-arm64 • macOS 14.5 23F79
darwin-arm64
• Mac Designed for iPad (desktop) • mac-designed-for-ipad • darwin • macOS 14.5 23F79
darwin-arm64
• Chrome (web) • chrome • web-javascript • Google Chrome
126.0.6478.63

[✓] Network resources
• All expected network resources are available.

• No issues found!

Steps to reproduce the issue

  1. Introduce the changes I mentioned above
  2. run flutter web
  3. after /home-view is shown, try reloading browser window
  4. this is what happens:
    image

image

A Dart VM Service on Chrome is available at: http://127.0.0.1:49985/VBBFZdBz72o=
The Flutter DevTools debugger and profiler on Chrome is available at: http://127.0.0.1:9101?uri=http://127.0.0.1:49985/VBBFZdBz72o=
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/stacked/src/router/route/route_data.dart 35:9                       argsAs
packages/test_web_app/app/app.router.dart 34:29                              <fn>
packages/stacked/src/router/controller/root_stack_router.dart 102:19         [_pageBuilder]
packages/stacked/src/router/controller/routing_controller.dart 1151:29       [_addEntry]
packages/stacked/src/router/controller/routing_controller.dart 1134:29       _pushAllGuarded
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>
Error
dart-sdk/lib/_internal/js_dev_runtime/private/ddc_runtime/errors.dart 296:3  throw_
packages/stacked/src/router/route/route_data.dart 35:9                       argsAs
packages/test_web_app/app/app.router.dart 34:29                              <fn>
packages/stacked/src/router/controller/root_stack_router.dart 102:19         [_pageBuilder]
packages/stacked/src/router/controller/routing_controller.dart 1151:29       [_addEntry]
packages/stacked/src/router/controller/routing_controller.dart 1134:29       _pushAllGuarded
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 45:50           <fn>
dart-sdk/lib/async/zone.dart 1661:54                                         runUnary
dart-sdk/lib/async/future_impl.dart 163:18                                   handleValue
dart-sdk/lib/async/future_impl.dart 847:44                                   handleValueCallback
dart-sdk/lib/async/future_impl.dart 876:13                                   _propagateToListeners
dart-sdk/lib/async/future_impl.dart 652:5                                    [_completeWithValue]
dart-sdk/lib/async/future_impl.dart 722:7                                    callback
dart-sdk/lib/async/schedule_microtask.dart 40:11                             _microtaskLoop
dart-sdk/lib/async/schedule_microtask.dart 49:5                              _startMicrotaskLoop
dart-sdk/lib/_internal/js_dev_runtime/patch/async_patch.dart 181:7           <fn>

Expected behavior

App should reload to the /home-view without errors

Screenshots

No response

Additional Context

No response
@MirzaCickusic
Copy link
Author

MirzaCickusic commented Jun 22, 2024 •
edited
Loading

And in general, reloading is causing all kinds of routing issues for me on the web

For example; while my app is deployed on github pages. If I use "usePathUrlStrategy()" in my main.dart file, on browser refresh, github would show "404 Error The site configured at this address does not contain the requested file".

But when using "#" routing, everything works as expected on refresh.

@FilledStacks
Copy link
Contributor

Interesting.

Could you please upload that example that you're referring to and link it here. IT'll be easier to test out.

Also, are you using the Stacked web template?

@MirzaCickusic
Copy link
Author

Here it is: https://github.com/MirzaCickusic/test_stacked_web_app

But I'm not sure what you mean by web template. I was using this command to create this project:

stacked create app test_stacked_web_app --platforms web

@FilledStacks
Copy link
Contributor

That's not using the web template, it's using a mobile first navigator.

To use the web template you can do

stacked create app my_web_app -t web

If you have an existing app and want to have better navigation on the web you can use the navigator2 implemention along with the new [RouterService](https://stacked.filledstacks.com/docs/stacked-router/routing-basics) instead of navigation service.

@basil4240
Copy link

I am having same issue when I refresh a web page with arguments. The argument passed from previous page becomes null from on refresh. A workaround I did was to save each argument into local storage, and access if from the other view. This can quickly become unmanageable as the app gets bigger with lots of pages and arguments. Hoping to get a fix soon. Thanks...

@MirzaCickusic
Copy link
Author

Unfortunately creating the web app with stacked create app my_web_app -t web and adding the same things I mentioned above, regarding the startingIndex, didn't fix the issue for me. Web still breaks on reload

@FilledStacks can you confirm that you are able to perform web reload successfully?

@FilledStacks
Copy link
Contributor

@MirzaCickusic I can confirm web reload works for us as expected. We have logic to refetch all the data from the backend on refresh.

@FilledStacks
Copy link
Contributor

I might have reproduced this on our side.

I will be working on this issue on Friday to see if I can resolve it.

Please let me know if it's still a problem for you.

@FilledStacks FilledStacks added the p1 Highest priority issue label Oct 2, 2024
@MirzaCickusic
Copy link
Author

I believe I just migrated away from using indexed navigation when on WEB

@FilledStacks
Copy link
Contributor

Awesome @MirzaCickusic thanks for letting me know.

In terms of the bug, I believe it was a Flutter issue and is now fixed in the latest version.

Here is an example app with a nested navigation setup that also requires pathParams and as you can see, when you navigate to http://localhost:56887/register/rfid/4 it properly finds the correct children and displays the UI without crashing.

And on refresh it also works.

I'm closing this issue until I can get an example repo that reproduces the explained behaviour.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Assignees
No one assigned
Labels
p1 Highest priority issue
Projects
None yet
Milestone
No milestone
Development

No branches or pull requests
3 participants
@FilledStacks @basil4240 @MirzaCickusic