[web]: Red Screen Of Death when running in Release Mode (example app included)

[vishna]

Assuming you're on master channel and enabled web support:

git clone git@github.com:vishna/voyager.git
cd voyager/example

My example app just works in debug mode:

flutter run -d chrome --debug

But using the same command in release mode:

flutter run -d chrome --release

results in the red screen of death:

interestingly some things still work in the release mode, e.g. you can navigate to the /fab widget
by typing in the address bar http://localhost:port/#/fab

Flutter doctor:

[✓] Flutter (Channel master, v1.10.2-pre.73, on Mac OS X 10.14.6 18G87, locale en-DE)
    • Flutter version 1.10.2-pre.73 at /Users/vishna/flutter
    • Framework revision a7cfdbd3f3 (9 hours ago), 2019-09-12 19:13:42 -0700
    • Engine revision 7ea9884ab0
    • Dart version 2.5.0 (build 2.5.0-dev.4.0 be66176534)

[✓] Android toolchain - develop for Android devices (Android SDK version 28.0.3)
    • Android SDK at /Users/vishna/Library/Android/sdk
    • Android NDK location not configured (optional; useful for native profiling support)
    • Platform android-28, build-tools 28.0.3
    • ANDROID_HOME = /Users/vishna/Library/Android/sdk
    • Java binary at: /Applications/Android Studio.app/Contents/jre/jdk/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 10.3)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 10.3, Build version 10G8
    • CocoaPods version 1.6.0

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

[✓] Android Studio (version 3.2)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin version 31.3.1
    • Dart plugin version 181.5656
    • Java version OpenJDK Runtime Environment (build 1.8.0_152-release-1136-b06)

[✓] IntelliJ IDEA Community Edition (version 2019.1.3)
    • IntelliJ at /Applications/IntelliJ IDEA CE.app
    • Flutter plugin version 37.1.3
    • Dart plugin version 191.7830

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

[✓] Connected device (2 available)
    • Chrome • chrome • web-javascript • Google Chrome 77.0.3865.75
    • Server • web    • web-javascript • Flutter Tools

[jonahwilliams]

@janmoppel can you try running a profile build --profile, this includes fewer optimizations to the JavaScript and might have a better error, though you should check the console of whatever browser you are using and include that too.

[vishna]

works fine in profile mode 🤷‍♂

in the release mode I get this:

...and I have no idea what that means

[yjbanov]

@jonahwilliams Do we have sourcemaps working in release builds?

[jonahwilliams]

You don't get source maps in release builds. At any rate, by default release builds are built with O4 which might be too much optimization if the application has type errors - but I would also expect to see that in profile mode (which is O2)

[yjbanov]

Why don't we output source maps in release builds? I imagine this will be very important for debugging production issues.

[harryterkelsen]

Sorry for the delay in getting to this. It looks like in your package you are using relative imports to refer to types in Provider. That is, I see in your code Provider<Router> where Router is imported via:

import 'router.dart';

Due to the way that dart2js canonicalizes types, in order to use a type in a Provider you must import it via a package import, that is:

import 'package:voyager/src/router.dart';

This problem should go away if you change all of your imports to package: imports.

[vishna]

Thanks for taking your time to investigate this! Gonna give it a try once I have some time and will let you know if it helps.

[vishna]

@hterkelsen ...so I've changed all the imports to be package imports and tried latest beta channel ...and the screen is now grey instead of red in the release mode. Also there is no error shown in chrome console.

== Flutter version ==

Flutter 1.12.13+hotfix.6 • channel beta • https://github.com/flutter/flutter.git
Framework • revision 18cd7a3601 (5 days ago) • 2019-12-11 06:35:39 -0800
Engine • revision 2994f7e1e6
Tools • Dart 2.7.0

...and it works just fine in the profile mode.

[harryterkelsen]

Sorry for the delay in responding, I was on vacation. I can confirm that I see the problem in release mode and not profile mode, which suggests to me that the problem is due to dart2js canonicalizing types. I will investigate a bit more and see if we need to file a bug with dart2js.

[vishna]

This is not really fixed, is it? cc @hterkelsen

[vishna]

Did a bit more investigation on my own and I think I found what the issue is.

I enabled "error reporting" with the following:

FlutterError.onError = (FlutterErrorDetails details) {
    print(details.exceptionAsString());
    print(details.stack);
};

and figured the problem with the error is coming from this bit I use in my library:

Type _typeOf<T>() => T;
// this line produces unreadable garbage in the release mode rather than `HomeWidget`
_typeOf<HomeWidget>().toString()

Now that I'm aware of this I can mitigate this somehow. Unsure if this is working as intended.

It would be helpful if you could somehow omit canonicalizing specific types.

[github-actions]

This thread has been automatically locked since there has not been any recent activity after it was closed. If you are still experiencing a similar issue, please open a new bug, including the output of flutter doctor -v and a minimal reproduction of the issue.