Flutter Web truncates logs written with dart:developer

[tomasweigenast]

Its simple, Flutter Web truncates log messages written to the console using dart:developer. Something that should not happen.

This is what gets printed:
[LOG] [26/03/2021 19:35:19] [DEBUG] Sending POST request…ccount/login with parameters null. Body: true

Can you notice the ... in the middle of the text?

If I log the same line in a mobile app, that does not happen

Flutter doctor:

Doctor summary (to see all details, run flutter doctor -v):
[√] Flutter (Channel beta, 2.1.0-12.2.pre, on Microsoft Windows [Versión 10.0.18363.1440], locale es-AR)
[!] Android toolchain - develop for Android devices (Android SDK version 30.0.0)
    X Android license status unknown.
      Run `flutter doctor --android-licenses` to accept the SDK licenses.
      See https://flutter.dev/docs/get-started/install/windows#android-setup for more details.
[√] Chrome - develop for the web
[√] Android Studio (version 4.0)
[√] VS Code (version 1.54.3)
[√] Connected device (3 available)

! Doctor found issues in 1 category.

[darshankawar]

@TomasWeg
Can you provide a minimal complete reproducible code sample that shows this issue ?
Thanks.

[tomasweigenast]

@darshankawar it is as simple as developer.log("the long message", name: 'LOG')

[darshankawar]

code sample

import 'dart:developer' as developer;

void main() {
  developer.log('flutter: SliverConstraints(AxisDirection.down, GrowthDirection.forward, ScrollDirection.reverse, scrollOffset: 0.0, remainingPaintExtent: 0.0, crossAxisExtent: 428.0, ', name: 'my.app.category');

  developer.log('log me 1', name: 'my.other.category');
  developer.log('log me 2', name: 'my.other.category');
}

flutter doctor -v

[✓] Flutter (Channel master, 2.1.0-13.0.pre.319, on Mac OS X 10.15.4 19E2269
    darwin-x64, locale en-GB)
    • Flutter version 2.1.0-13.0.pre.319 at
      /Users/dhs/documents/Fluttersdk/flutter
    • Framework revision 430626d0f3 (48 minutes ago), 2021-03-29 21:44:03 -0700
    • Engine revision 4c6abc1e06
    • Dart version 2.13.0 (build 2.13.0-172.0.dev)

[!] Xcode - develop for iOS and macOS
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Xcode 12.3, Build version 12C33
    ! CocoaPods 1.9.3 out of date (1.10.0 is recommended).
        CocoaPods is used to retrieve the iOS and macOS platform side's plugin
        code that responds to your plugin usage on the Dart side.
        Without CocoaPods, plugins will not work on iOS or macOS.
        For more info, see https://flutter.dev/platform-plugins
      To upgrade see
      https://guides.cocoapods.org/using/getting-started.html#installation for
      instructions.

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

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

[✓] Connected device (3 available)
    • iPhone 12 Pro Max (mobile) • A5473606-0213-4FD8-BA16-553433949729 • ios
      • com.apple.CoreSimulator.SimRuntime.iOS-14-3 (simulator)
    • macOS (desktop)            • macos                                •
      darwin-x64     • Mac OS X 10.15.4 19E2269 darwin-x64
    • Chrome (web)               • chrome                               •
      web-javascript • Google Chrome 89.0.4389.90

! Doctor found issues in 1 category.

[yjbanov]

/cc @sigmundch

[sigmundch]

/cc @nshahan

We are implementing the API using console.debug and passing it a message object - the default browser implementation is adding that truncation, but the underlying logged object properly displays the entire message.

@yjbanov - I'm not as familiar, are these log messages later piped through the different dev tools and displayed in the host machine console? If so, maybe the issue lies in how the data is plumbed through?

[nshahan]

Based on what I have learned from investigating this issue report flutter/flutter#75225, dart:developer is using the console.debug log to pass PostEvent messages to DevTools.

@grouma If objects are being truncated in the log by the browser this sounds like another reason we should investigate using a different communications channel. WDYT?

[grouma]

I don't think we have a solid alternative. I proposed one in flutter/flutter#75225 but there may be downsides with that approach. We could explore chunking the message.

[kmartins]

Any updates?

[nshahan]

We changed two top level methods from the dart:developer (postEvent() and registerExtension()) to use a different messaging channel so those messages are no longer being printed to the console using console.debug(). This means nothing will appear in the browser console for these APIs. Instead they appear in Flutter/Dart the DevTools console.

We haven't changed any other dart:developer APIs yet but we could. In the case of the log() method all of the message data is currently there AFAIK. The browser is just truncating the display shown in the console. I can see the entire contents in the tooltip if I expand the logged object and hover the mouse cursor over the message. One could argue that this is a good UI but I recognize that is a little awkward to work with. I mention it to highlight that the data is there if you really dig for it.

We could move more dart:developer APIs to communicate directly with DevTools where we have more direct control over the appearance of the logged object.

@jacob314 How does DevTools currently display log() events from dart:developer, coming from non-web apps, when the message is very long? Is it ever truncated and is it easily accessible or are there the same UI limitations that we see in chrome currently?

[nehal076]

Any update on this? I'm facing the same issue. Logs are clipped. I don't know why.

[jacob314]

@annagrin you were looking at batching events for dart:developer dispatchEvent. Can we use the same batching to resolve this truncation case?

[nshahan]

@nehal076 What application is being shown in your screenshot? From the perspective of the dart:developer library we are not truncating any text being logged. From what I have seen the truncation is performed by the UI of some applications and is only changing what is being displayed, not the actual contents of the log message. I have observed that I can see the entire message by hovering or clicking and expanding.

[nshahan]

@jacob314 @annagrin If we are copying the output from the chrome console and showing it in devtools it is possible we need to find a way to get the full log message, not just the text the UI of the console is printing. The text displayed in the chrome console can be truncated.

[nehal076]

@nehal076 What application is being shown in your screenshot? From the perspective of the dart:developer library we are not truncating any text being logged. From what I have seen the truncation is performed by the UI of some applications and is only changing what is being displayed, not the actual contents of the log message. I have observed that I can see the entire message by hovering or clicking and expanding.

Hello..
This is VSCode, debug console. It works fine when I run the app for mobile. Only clips the logs for web.