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.

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

Flutter web app sometimes only shows a blank/white page #3465

Closed
JonasKuschel opened this issue Jul 7, 2021 · 13 comments
Closed

Flutter web app sometimes only shows a blank/white page #3465

JonasKuschel opened this issue Jul 7, 2021 · 13 comments
Labels
in debugger Relates to the debug adapter or process of launching a debug session in flutter Relates to running Flutter apps is bug
Milestone

Comments

@JonasKuschel
Copy link

Hi,
Since a few days my vscode debugging (ui click on green arrow) doesn't work anymore. When I start flutter with chrome the application shows up for milliseconds and then disappears. There are no errors displayed in the logs. When I reload the page in chrome (F5) the application shows up again.
When using Android Studio the debugging works as it should.
When add --release to the launch.json it works as expected.

Things I have tried and didn't fix it:

  • reverted my code to a month ago to see if it was a code mistake
  • reverted flutter vscode extension version to months ago
  • deleted vscode cache /Library/Application Support/Code/Cache & /Library/Application Support/Code/CachedData
  • reverted flutter to stable 2.2.2
  • Created a new flutter application with flutter create but vscode debugs normal
  • Switch to flutter master channel

How i fixed it

After downgrading vscode dart extension from 3.24.2 to 3.23.1 it worked again. I guess there must be a problem in the new dart extension version.

Note:

I always had an issue with hot reload since upgrading to null safety months ago. Whenever I try to hot reload(Android studio & vscode), the application disappears and the ios & android simulator goes blank/white screen. Might be connected to this issue might not. I didn't file an issue for that yet. I have searched a long time for a solution to this but couldn't find any

flutter analyze

No Issues found

flutter doctor -v

[✓] Flutter (Channel stable, 2.2.3, on macOS 11.4 20F71 darwin-x64, locale de-DE)
    • Flutter version 2.2.3 at /Users/jonaskuschel/Developer/flutter
    • Framework revision f4abaa0735 (vor 6 Tagen), 2021-07-01 12:46:11 -0700
    • Engine revision 241c87ad80
    • Dart version 2.13.4

[✓] Android toolchain - develop for Android devices (Android SDK version 30.0.1)
    • Android SDK at /Users/jonaskuschel/Library/Android/sdk
    • Platform android-30, build-tools 30.0.1
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.5.1, Build version 12E507
    • CocoaPods version 1.10.1

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

[✓] Android Studio (version 4.2)
    • 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
    • Java version OpenJDK Runtime Environment (build 11.0.8+10-b944.6916264)

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

[✓] Connected device (1 available)
    • Chrome (web) • chrome • web-javascript • Google Chrome 91.0.4472.114

If you need any more info or logs feel free to ask.

Thank you for your support!

Jonas

@DanTup
Copy link
Member

DanTup commented Jul 7, 2021

After downgrading vscode dart extension from 3.24.2 to 3.23.1 it worked again. I guess there must be a problem in the new dart extension version.

I don't seem to be able to reproduce this. Can you reliably reproduce this behaviour between those versions? If so, could you capture a log for each by:

  • Running Dart: capture Debugging Logs
  • Started the debug session and waiting for the app to load (and in the case of the new version, disappear)
  • Click Cancel on the logging notification to stop logging and open the log

You can send the logs to me at logs@dartcode.org or attach/paste into gists.

There have been some other strange issues with Chrome (like #3206) but I don't recall any that would be different based on the Dart extension version. If something has changed that caused this, I'd definitely like to understand what.

Thanks!

@DanTup DanTup added the awaiting info Requires more information from the customer to progress label Jul 7, 2021
@JonasKuschel
Copy link
Author

I have sent you the logs per email.

Thank you!

@DanTup
Copy link
Member

DanTup commented Jul 7, 2021

@JonasKuschel thanks! I think I initially misunderstood the problem - are you saying the app appears then just turns white (like a rendering issue in Chrome), and not that Chrome disappears (which is what I initially thought it was)?

Is there anything in the Chrome developer tools console?

I can't see any obvious reason why this would behave differently in the newer version, although there were some slight differences in the commands used to launch Flutter:

Old:

Spawning /Users/usernameanonymized/Developer/flutter/bin/flutter with args ["run","--machine","--target","lib/main.dart","-d","chrome","--dart-define=flutter.inspector.structuredErrors=true","--start-paused","--web-server-debug-protocol","ws","--web-allow-expose-url","--devtools-server-address","http://127.0.0.1:9103/","--web-port","5000","--web-renderer=auto","-v"]

New:

Spawning /Users/usernameanonymized/Developer/flutter/bin/flutter with args ["run","--machine","--start-paused","-d","chrome","--dart-define=flutter.inspector.structuredErrors=true","--web-allow-expose-url","--devtools-server-address","http://127.0.0.1:9103/","-v","--target","lib/main.dart","--web-port","5000"]

Some of the --web-server flags are no longer passed when not using the --web-server device. The other one that's interesting though is --web-renderer. My understanding is that auto was the default now anyway, so removing that should not make any difference, although it is rendering-related.

Does resizing the Chrome window while it's white make any difference? I have a recollection of @grouma having some issue with white rendering recently, but I can't find an issue that seems to be it now.

@JonasKuschel
Copy link
Author

Hi Danny,
chrome does not disappear but the app inside the window does:
image
Resizing the window does not make a change at all.

The developer console is empty:
image

Is it possible for me to add the parameters back to the launch file or something to try if thats the problem?

Like this e.g.:

{
            "flutterMode": "debug",
            "request": "launch",
            "program": "lib/main.dart",
            "type": "dart",
            "args": [
                            "--web-port",
                            "5000",
                            "--web-renderer=auto",
                        ],
}

@DanTup
Copy link
Member

DanTup commented Jul 8, 2021

Yep, adding them to args like that should do the same thing. If you capture logs and search for "spawning" you should find the full command line that was used, so you could compare it to the above.

Is the issue completely reliable when switching versions (eg. happens 100% of the time with the new extension version and 0% of the time with the old)? I've had a scan through a diff of those versions, but nothing stands out that might affect debugging functionality that I've found so far.

v3.23.1...v3.24.2

@Hrishi1999
Copy link

Facing the same issue since almost a week. Downgrading the Dart extension as suggested by @JonasKuschel worked. flutter run -d chrome works too.

@DanTup DanTup added this to the v3.25.0 milestone Jul 12, 2021
@DanTup DanTup added in debugger Relates to the debug adapter or process of launching a debug session in flutter Relates to running Flutter apps labels Jul 12, 2021
@DanTup
Copy link
Member

DanTup commented Jul 12, 2021

Does this reproduce on a simple flutter create project for you both?

@DanTup
Copy link
Member

DanTup commented Jul 12, 2021

I'm wondering if this might be related to sending the VM Service extension values back at startup. This is something that was "fixed" by #3426 but caused some other issues (like #3454). I've changed how this works and wonder if that fixes things for you. Could you try the latest nightly build to see if it's still an issue?

If this solves the issue, then I guess it's already fixed and you can just use that version until the next release. If not, we'll need to find a way that I can reproduce it, or we'll have to build something between v3.23 and v3.24 for you to test to see if we can narrow down which change has affected it.

Thanks!

@Hrishi1999
Copy link

Tried the nightly build, it works fine now.

@JonasKuschel
Copy link
Author

Awesome it works thank you!!!

@DanTup
Copy link
Member

DanTup commented Jul 14, 2021

Great! Thanks for confirming!

@DanTup DanTup removed the awaiting info Requires more information from the customer to progress label Jul 14, 2021
@DanTup DanTup changed the title vscode debugging flutter web app disappears after milliseconds => blank/white screen Flutter web app sometimes only shows a blank/white page Jul 14, 2021
@producttuzmo
Copy link

Hi @DanTup @JonasKuschel please let us know how you fixed this blank screen issue sometimes when you refresh pages we get blank screen after refreshing it works fine.

@DanTup
Copy link
Member

DanTup commented Sep 20, 2023

@producttuzmo the issue reported here was fixed - I suspect what you're seeing is a different issue that just happens to have the same symptoms.

Could you please file a new issue with a detailed description of your issue (including SDK/extension versions, what platform/target you're running on etc.), and confirm whether you can reproduce this in a brand new project, or only a specific project.

Thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
in debugger Relates to the debug adapter or process of launching a debug session in flutter Relates to running Flutter apps is bug
Projects
None yet
Development

No branches or pull requests

4 participants