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 4 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
4 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
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
161 changes: 137 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 @@ -9,6 +9,7 @@ import 'package:devtools_app_shared/ui.dart';
import 'package:devtools_app_shared/utils.dart';
import 'package:flutter/material.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 Down Expand Up @@ -37,6 +38,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 +68,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 +86,8 @@ class DisconnectObserverState extends State<DisconnectObserver>
@override
void dispose() {
hideDisconnectedOverlay();
_isReconnecting.dispose();
_reconnectErrorText.dispose();
super.dispose();
}

Expand Down Expand Up @@ -120,34 +137,130 @@ class DisconnectObserverState extends State<DisconnectObserver>
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>(
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 if (!isEmbedded())
Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
ElevatedButton(
Copy link
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.

Please refactor this component so we don't need to duplicate the invocation of the reconnect button in two places.

The only difference between the embedded and not embedded view is that in embedded view we want to show the instruction "run a new debug session to connect to it" and in non-embedded we want to show the "connect to new app" button. The best structure for this code would make that difference easily apparent when looking at it.

onPressed: _attemptReconnect,
child: const Text('Reconnect'),
),
const SizedBox(width: defaultSpacing),
ConnectToNewAppButton(
routerDelegate: widget.routerDelegate,
onPressed: hideDisconnectedOverlay,
gaScreen: gac.devToolsMain,
),
],
)
else
Column(
mainAxisSize: MainAxisSize.min,
children: [
ElevatedButton(
onPressed: _attemptReconnect,
child: const Text('Reconnect'),
),
const SizedBox(height: defaultSpacing),
Text(
'Or run a new debug session to connect to it.',
style: theme.textTheme.bodyMedium,
),
],
),
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
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.

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

var reconnectionSuccess = false;

try {
await dtdManager.reconnect();

final uri = _lastVmServiceUri;
if (uri != null &&
!serviceConnection.serviceManager.connectedState.value.connected) {
// 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';
},
);
} else {
reconnectionSuccess =
serviceConnection.serviceManager.connectedState.value.connected;
}
} catch (e) {
_reconnectErrorText.value = e.toString();
} finally {
_isReconnecting.value = false;

if (reconnectionSuccess ||
serviceConnection.serviceManager.connectedState.value.connected) {
// Success — also update the router so the URI is reflected in the URL.
unawaited(
widget.routerDelegate.updateArgsIfChanged({
DevToolsQueryParams.vmServiceUriKey: _lastVmServiceUri,
}),
);
_reconnectErrorText.value = null;
hideDisconnectedOverlay();
} else {
// Failed (stale URI, VM dead, etc.) — restore the overlay with buttons.
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
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