Skip to content

Add Reconnect button to embedded disconnect overlay and restore VM service connection after sleep/wake #9693

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

Open
rishika0212 wants to merge 5 commits into
base: master
Choose a base branch
from
Open

Add Reconnect button to embedded disconnect overlay and restore VM service connection after sleep/wake #9693

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
5 commits
Select commit Hold shift + click to select a range
19ac712
Add reconnect option for Inspector when VM service disconnects
rishika0212 Mar 10, 2026
4e2c4c3
Add reconnect button to DisconnectObserver for VM service reconnection
rishika0212 Mar 10, 2026
ea66c0f
edited in release notes
rishika0212 Mar 10, 2026
8260a7c
Addressed PR review comments
rishika0212 Mar 19, 2026
51c7db0
Refactor disconnected overlay reconnect UI and simplify reconnect flow
rishika0212 Mar 21, 2026
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
163 changes: 139 additions & 24 deletions packages/devtools_app/lib/src/framework/observer/disconnect_observer.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,9 @@ import 'package:devtools_app_shared/service.dart';
import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
import 'package:flutter/material.dart';
import 'package:logging/logging.dart';

import '../../framework/framework_core.dart';
import '../../service/connected_app/connection_info.dart';
import '../../shared/analytics/analytics.dart' as ga;
import '../../shared/analytics/constants.dart' as gac;
Expand All @@ -17,6 +19,8 @@ import '../../shared/framework/routing.dart';
import '../../shared/globals.dart';
import '../../shared/primitives/query_parameters.dart';

final _log = Logger('disconnect_observer');

class DisconnectObserver extends StatefulWidget {
const DisconnectObserver({
super.key,
Expand All @@ -37,6 +41,14 @@ class DisconnectObserverState extends State<DisconnectObserver>

late ConnectedState currentConnectionState;

/// Stores the last known VM service URI so we can attempt to reconnect
/// after the connection is lost (e.g. when the machine sleeps).
String? _lastVmServiceUri;

final _isReconnecting = ValueNotifier<bool>(false);

final _reconnectErrorText = ValueNotifier<String?>(null);

@override
void initState() {
super.initState();
Expand All @@ -59,8 +71,14 @@ class DisconnectObserverState extends State<DisconnectObserver>
!currentConnectionState.connected &&
!currentConnectionState.userInitiatedConnectionState) {
// We became disconnected by means other than a manual disconnect
// action, so show the overlay and ensure the 'uri' query paraemter
// action, so show the overlay and ensure the 'uri' query parameter
// has been cleared.
//
// Store the VM service URI before clearing so we can attempt
// reconnection later (e.g. after machine sleep/wake).
_lastVmServiceUri =
widget.routerDelegate.currentConfiguration?.params.vmServiceUri ??
serviceConnection.serviceManager.serviceUri;
unawaited(widget.routerDelegate.clearUriParameter());
showDisconnectedOverlay();
}
Expand All @@ -71,6 +89,8 @@ class DisconnectObserverState extends State<DisconnectObserver>
@override
void dispose() {
hideDisconnectedOverlay();
_isReconnecting.dispose();
_reconnectErrorText.dispose();
super.dispose();
}

Expand Down Expand Up @@ -114,40 +134,135 @@ class DisconnectObserverState extends State<DisconnectObserver>
widget.routerDelegate.navigate(snapshotScreenId, args);
}

Widget _buildReconnectActions(ThemeData theme) {
Copy link
Copy Markdown
Member

@elliette elliette Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please pull this method into a stateless widget

final reconnectButton = ElevatedButton(
onPressed: _attemptReconnect,
child: const Text('Reconnect'),
);

if (!isEmbedded()) {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
reconnectButton,
const SizedBox(width: defaultSpacing),
ConnectToNewAppButton(
routerDelegate: widget.routerDelegate,
onPressed: hideDisconnectedOverlay,
gaScreen: gac.devToolsMain,
),
],
);
}

return Column(
mainAxisSize: MainAxisSize.min,
children: [
reconnectButton,
const SizedBox(height: defaultSpacing),
Text(
'Or run a new debug session to connect to it.',
style: theme.textTheme.bodyMedium,
),
],
);
}

OverlayEntry _createDisconnectedOverlay() {
final theme = Theme.of(context);
currentDisconnectedOverlay = OverlayEntry(
builder: (context) => Material(
child: Container(
color: theme.colorScheme.surface,
child: Center(
child: Column(
children: [
const Spacer(),
Text('Disconnected', style: theme.textTheme.headlineMedium),
const SizedBox(height: defaultSpacing),
if (!isEmbedded())
ConnectToNewAppButton(
routerDelegate: widget.routerDelegate,
onPressed: hideDisconnectedOverlay,
gaScreen: gac.devToolsMain,
)
else
const Text('Run a new debug session to reconnect.'),
const Spacer(),
if (offlineDataController.offlineDataJson.isNotEmpty) ...[
ElevatedButton(
onPressed: _reviewHistory,
child: const Text('Review recent data (offline)'),
child: ValueListenableBuilder<bool>(
Copy link
Copy Markdown
Member

@elliette elliette Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use MultiValueListenableBuilder to avoid nesting the two ValueListenableBuilders

valueListenable: _isReconnecting,
builder: (context, isReconnecting, _) =>
ValueListenableBuilder<String?>(
valueListenable: _reconnectErrorText,
builder: (context, reconnectErrorText, _) => Center(
child: Column(
children: [
const Spacer(),
Text(
'Disconnected',
style: theme.textTheme.headlineMedium,
),
const SizedBox(height: defaultSpacing),
if (isReconnecting)
const CircularProgressIndicator()
else
_buildReconnectActions(theme),
if (reconnectErrorText case final error?) ...[
const SizedBox(height: denseSpacing),
Text(
error,
style: theme.regularTextStyle.copyWith(
color: theme.colorScheme.error,
),
textAlign: TextAlign.center,
),
],
const Spacer(),
if (offlineDataController
.offlineDataJson
.isNotEmpty) ...[
ElevatedButton(
onPressed: _reviewHistory,
child: const Text('Review recent data (offline)'),
),
const Spacer(),
],
],
),
),
const Spacer(),
],
],
),
),
),
),
),
);
return currentDisconnectedOverlay!;
}

Future<void> _attemptReconnect() async {
Copy link
Copy Markdown
Member

@elliette elliette Mar 20, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I think this method could be simplified quite a bit. I think we want to:

  1. try to reconnect dtd, and log a warning if it fails (this is the only try/catch we need)
  2. call initVmService to try to reconnect if uri is not null
  3. hide overlay if it succeeds, otherwise reset overlay

I think this will avoid the multiple serviceConnection.serviceManager.connectedState.value.connected calls and nesting of if/else in try/catch blocks and make this code easier to understand.

Copy link
Copy Markdown
Contributor Author

@rishika0212 rishika0212 Mar 21, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Implemented. I simplified attemptReconnect to match the flow described.

_isReconnecting.value = true;
_reconnectErrorText.value = null;

try {
await dtdManager.reconnect();
} catch (error, stackTrace) {
_log.warning('Failed to reconnect DTD.', error, stackTrace);
}

var reconnectionSuccess =
serviceConnection.serviceManager.connectedState.value.connected;

final uri = _lastVmServiceUri;
if (!reconnectionSuccess && uri != null) {
// Call initVmService directly — do NOT use routerDelegate.navigate()
// because that goes through _replaceStack which calls manuallyDisconnect
// when clearing the URI, causing the disconnect observer to suppress
// the overlay (userInitiatedConnectionState = true).
reconnectionSuccess = await FrameworkCore.initVmService(
serviceUriAsString: uri,
logException: false,
errorReporter: (title, error) {
_reconnectErrorText.value = '$title, $error';
},
);
}

_isReconnecting.value = false;

if (reconnectionSuccess) {
unawaited(
Copy link
Copy Markdown
Member

@elliette elliette Mar 31, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Use safeUnawaited here to catch any errors

widget.routerDelegate.updateArgsIfChanged({
DevToolsQueryParams.vmServiceUriKey: _lastVmServiceUri,
}),
);
_reconnectErrorText.value = null;
hideDisconnectedOverlay();
} else {
showDisconnectedOverlay();
}
}
}
2 changes: 1 addition & 1 deletion packages/devtools_app/lib/src/standalone_ui/ide_shared/not_connected_overlay.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -52,7 +52,7 @@ class _NotConnectedOverlayState extends State<NotConnectedOverlay> {
if (showReconnectButton)
ElevatedButton(
onPressed: () => dtdManager.reconnect(),
child: const Text('Retry'),
child: const Text('Reconnect'),
),
],
),
Expand Down
4 changes: 3 additions & 1 deletion packages/devtools_app/release_notes/NEXT_RELEASE_NOTES.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,9 @@ TODO: Remove this section if there are not any updates.

## Inspector updates

TODO: Remove this section if there are not any updates.
- Added a "Reconnect" button to the disconnected overlay in embedded/IDE mode,
and fixed reconnection to restore the VM service connection after machine
sleep/wake (#9683).

## Performance updates

Expand Down
51 changes: 50 additions & 1 deletion packages/devtools_app/test/framework/observer/disconnect_observer_test.dart
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,31 @@

import 'package:devtools_app/devtools_app.dart';
import 'package:devtools_app/src/framework/observer/disconnect_observer.dart';
import 'package:devtools_app/src/shared/primitives/query_parameters.dart';
import 'package:devtools_app/src/shared/framework/framework_controller.dart';
import 'package:devtools_app_shared/service.dart';
import 'package:devtools_app_shared/shared.dart';
import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
import 'package:devtools_test/devtools_test.dart';
import 'package:devtools_test/helpers.dart';
import 'package:flutter/material.dart';
import 'package:flutter_test/flutter_test.dart';
import 'package:mockito/mockito.dart';

import '../../test_infra/matchers/matchers.dart';

void main() {
group('DisconnectObserver', () {
late FakeServiceConnectionManager fakeServiceConnectionManager;
late MockDTDManager mockDtdManager;

setUp(() {
fakeServiceConnectionManager = FakeServiceConnectionManager();
mockDtdManager = MockDTDManager();
when(mockDtdManager.reconnect()).thenAnswer((_) async {});
setGlobal(ServiceConnectionManager, fakeServiceConnectionManager);
setGlobal(DTDManager, mockDtdManager);
setGlobal(FrameworkController, FrameworkController());
setGlobal(OfflineDataController, OfflineDataController());
setGlobal(IdeTheme, IdeTheme());
Expand All @@ -30,6 +37,7 @@ void main() {
Future<void> pumpDisconnectObserver(
WidgetTester tester, {
Widget child = const Placeholder(),
DevToolsQueryParams? queryParams,
}) async {
await tester.pumpWidget(
wrap(
Expand All @@ -41,6 +49,7 @@ void main() {
);
},
),
queryParams: queryParams,
),
);
await tester.pumpAndSettle();
Expand All @@ -67,8 +76,14 @@ void main() {
find.byType(ConnectToNewAppButton),
showingOverlay && !isEmbedded() ? findsOneWidget : findsNothing,
);
// The Reconnect button should be present in both embedded and
// non-embedded modes when the overlay is showing.
expect(
find.text('Run a new debug session to reconnect.'),
find.text('Reconnect'),
Copy link
Copy Markdown
Member

@elliette elliette Mar 19, 2026

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please add a test that using the reconnect button restores the old VM service connection

showingOverlay ? findsOneWidget : findsNothing,
);
expect(
find.text('Or run a new debug session to connect to it.'),
showingOverlay && isEmbedded() ? findsOneWidget : findsNothing,
);
expect(
Expand Down Expand Up @@ -134,6 +149,40 @@ void main() {
await showOverlayAndVerifyContents(tester);
});

testWidgets(
'reconnect button restores previous VM service URI on success',
(WidgetTester tester) async {
const previousVmServiceUri = 'http://127.0.0.1:8181/';
when(mockDtdManager.reconnect()).thenAnswer((_) async {
fakeServiceConnectionManager.serviceManager.setConnectedState(true);
});

await pumpDisconnectObserver(
tester,
queryParams: DevToolsQueryParams({
DevToolsQueryParams.vmServiceUriKey: previousVmServiceUri,
}),
);
verifyObserverState(tester, connected: true, showingOverlay: false);

fakeServiceConnectionManager.serviceManager.setConnectedState(false);
await tester.pumpAndSettle();
verifyObserverState(tester, connected: false, showingOverlay: true);

await tester.tap(find.text('Reconnect'));
await tester.pumpAndSettle();

verify(mockDtdManager.reconnect()).called(1);
verifyObserverState(tester, connected: true, showingOverlay: false);
final context = tester.element(find.byType(DisconnectObserver));
final routerDelegate = DevToolsRouterDelegate.of(context);
expect(
routerDelegate.currentConfiguration!.params.vmServiceUri,
previousVmServiceUri,
);
},
);

// Regression test for https://github.com/flutter/devtools/issues/8050.
testWidgets('hides widgets at lower z-index', (
WidgetTester tester,
Expand Down