Capturing async tasks in DevTools performance timeline.

[hrajwade96]

I am doing some parallel operations during app launch, I tried adding trace points with Timeline class.
And I compared it by adding timestamp logs.
The time doesn't match as I read timeline uses stack (LIFO).
Let's say I have 20 operations which will start somewhat in parallel.
Since they are not sequential any of them could end in any order and I need to add a stop trace for it.
My requirement is to capture their start and end time in timeline graph.
I didn't find any mechanism to call finish with task id, hence it is removing the last added task.
I tried to check 'TimelineTask' but didn't find any good examples and not sure if it will serve my purpose.
I am blocked as I need to generate a flame chart for app launch processes.

[hrajwade96]

@kenzieschmoll can you help here

[kenzieschmoll]

It sounds like each operation would need its own TimelineTask since they do not have a parent child relationship.

[hrajwade96]

Can you explain with example
I tried both Timeline as well as TimelineTask,
With Timeline the sequence in which it ended was incorrect, hence timings were going wrong,
With TimelineTaskit created my custom processes,
But it showed never ended, even though I called finish.

[hrajwade96]

@DanTup

[hrajwade96]

Can someone help me

[kenzieschmoll]

void main() async {
  await sendA();
}

Future<void> sendA() async {
  final a = TimelineTask()..start('A');
  final b = TimelineTask();
  final c = TimelineTask();
  await Future.delayed(Duration(milliseconds: 50), () async {
    await sendB(b);
  });
  await Future.delayed(Duration(milliseconds: 50), () async {
    await sendC(c);
  });
  await Future.delayed(Duration(milliseconds: 1000), () {
    a.finish();
  });
}

Future<void> sendB(TimelineTask b) async {
  b.start('B');
  await Future.delayed(Duration(milliseconds: 20), () {
    b.start('B1');
  });
  await Future.delayed(Duration(milliseconds: 30), () {
    b.start('B2');
  });
  await Future.delayed(Duration(milliseconds: 50), () {
    b.finish();
  });
  await Future.delayed(Duration(milliseconds: 50), () {
    b.finish();
  });
  await Future.delayed(Duration(milliseconds: 100), () {
    b.finish();
  });
}

Future<void> sendC(TimelineTask c) async {
  c.start('C');
  await Future.delayed(Duration(milliseconds: 50), () {
    c.start('C1');
  });
  await Future.delayed(Duration(milliseconds: 50), () {
    c.start('C2');
  });
  await Future.delayed(Duration(milliseconds: 50), () {
    c.finish();
  });
  await Future.delayed(Duration(milliseconds: 100), () {
    c.finish();
  });
  await Future.delayed(Duration(milliseconds: 50), () {
    c.finish();
  });
}

[hrajwade96]

Thanks for sharing this @kenzieschmoll
However i have one doubt on this, the task which is added at the last is always the first one to finish.
For example B2 started late but finished first, B1 had started earlier than B2 and ends next to B1.

Same case with C2 and C1.
Is this happening because it is working in a stack in and finish is happening in LIFO manner?
Is there any way to specify which one to finish?

Or do I have to create a separate instance of TimelineTask for this for each async task.
Just like you have created a, b and c?

[kenzieschmoll]

Within a single instance of TimelineTask, you are correct that events are finished in a LIFO manner. However, within separate TimelineTasks, there is no rule on the order of finish calls. For your case, it sounds like you need separate TimelineTasks for each async task you want to track on the timeline.

[hrajwade96]

Ok thanks for clarifying. I tried it and it worked for me.
Thanks a lot!