Skip to content

Improves further on Blazor reconnection experience. #13152

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

Merged
merged 1 commit into from
Aug 15, 2019
Merged

Improves further on Blazor reconnection experience. #13152

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
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
6 changes: 3 additions & 3 deletions src/Components/Web.JS/dist/Release/blazor.server.js
View file
Open in desktop

Large diffs are not rendered by default.

2 changes: 1 addition & 1 deletion src/Components/Web.JS/dist/Release/blazor.webassembly.js
View file
Open in desktop

Large diffs are not rendered by default.

7 changes: 1 addition & 6 deletions src/Components/Web.JS/src/Boot.Server.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,13 +37,8 @@ async function boot(userOptions?: Partial<BlazorOptions>): Promise<void> {
}

const reconnection = existingConnection || await initializeConnection(options, logger);
if (reconnection.state !== signalR.HubConnectionState.Connected) {
Copy link
Author

Choose a reason for hiding this comment

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

#13015 (comment)

Copy link
Member

Choose a reason for hiding this comment

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

So do we need to do something here to throw? Who's actually doing the throwing in this case?

Copy link
Author

Choose a reason for hiding this comment

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

SignalR's throwing, I considered throwing a custom exception but I felt the need to back this out after the throwing from SignalR seemed to absolutely be intentional.

Copy link
Author

@NTaylorMullen NTaylorMullen Aug 15, 2019 •
edited
Loading

Choose a reason for hiding this comment

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

You sound extra surprised though. Would you rather me throw a custom exception?

logger.log(LogLevel.Information, 'Reconnection attempt failed. Unable to connect to the server.');
return false;
}

if (!(await circuit.reconnect(reconnection))) {
logger.log(LogLevel.Information, 'Reconnection attempt to the circuit failed.');
logger.log(LogLevel.Information, 'Reconnection attempt to the circuit was rejected by the server. This may indicate that the associated state is no longer available on the server.');
return false;
}

Expand Down
24 changes: 21 additions & 3 deletions src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectDisplay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { ReconnectDisplay } from './ReconnectDisplay';
import { Logger, LogLevel } from '../Logging/Logger';

export class DefaultReconnectDisplay implements ReconnectDisplay {
modal: HTMLDivElement;
Expand All @@ -11,7 +12,7 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {

reloadParagraph: HTMLParagraphElement;

constructor(dialogId: string, private document: Document) {
constructor(dialogId: string, private readonly document: Document, private readonly logger: Logger) {
this.modal = this.document.createElement('div');
this.modal.id = dialogId;

Expand All @@ -38,8 +39,19 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {

this.button.addEventListener('click', async () => {
this.show();
const successful = await window['Blazor'].reconnect();
if (!successful) {

try {
// reconnect will asynchronously return:
// - true to mean success
// - false to mean we reached the server, but it rejected the connection (e.g., unknown circuit ID)
// - exception to mean we didn't reach the server (this can be sync or async)
const successful = await window['Blazor'].reconnect();
if (!successful) {
this.rejected();
}
} catch (err) {
// We got an exception, server is currently unavailable
this.logger.log(LogLevel.Error, err);
this.failed();
}
});
Expand All @@ -66,4 +78,10 @@ export class DefaultReconnectDisplay implements ReconnectDisplay {
this.reloadParagraph.style.display = 'none';
this.message.innerHTML = 'Reconnection failed. Try <a href>reloading</a> the page if you\'re unable to reconnect.';
}

rejected(): void {
this.button.style.display = 'none';
this.reloadParagraph.style.display = 'none';
this.message.innerHTML = 'Could not reconnect to the server. <a href>Reload</a> the page to restore functionality.';
}
}
5 changes: 3 additions & 2 deletions src/Components/Web.JS/src/Platform/Circuits/DefaultReconnectionHandler.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ export class DefaultReconnectionHandler implements ReconnectionHandler {
const modal = document.getElementById(options.dialogId);
this._reconnectionDisplay = modal
? new UserSpecifiedDisplay(modal)
: new DefaultReconnectDisplay(options.dialogId, document);
: new DefaultReconnectDisplay(options.dialogId, document, this._logger);
}

if (!this._currentReconnectionProcess) {
Expand Down Expand Up @@ -67,7 +67,8 @@ class ReconnectionProcess {
const result = await this.reconnectCallback();
if (!result) {
// If the server responded and refused to reconnect, stop auto-retrying.
break;
this.reconnectDisplay.rejected();
return;
}
return;
} catch (err) {
Expand Down
1 change: 1 addition & 0 deletions src/Components/Web.JS/src/Platform/Circuits/ReconnectDisplay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,4 +2,5 @@ export interface ReconnectDisplay {
show(): void;
hide(): void;
failed(): void;
rejected(): void;
}
9 changes: 8 additions & 1 deletion src/Components/Web.JS/src/Platform/Circuits/UserSpecifiedDisplay.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,8 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {

static readonly FailedClassName = 'components-reconnect-failed';

static readonly RefusedClassName = 'components-reconnect-refused';

constructor(private dialog: HTMLElement) {
}

Expand All @@ -23,8 +25,13 @@ export class UserSpecifiedDisplay implements ReconnectDisplay {
this.removeClasses();
this.dialog.classList.add(UserSpecifiedDisplay.FailedClassName);
}

rejected(): void {
this.removeClasses();
this.dialog.classList.add(UserSpecifiedDisplay.RefusedClassName);
}

private removeClasses() {
this.dialog.classList.remove(UserSpecifiedDisplay.ShowClassName, UserSpecifiedDisplay.HideClassName, UserSpecifiedDisplay.FailedClassName);
this.dialog.classList.remove(UserSpecifiedDisplay.ShowClassName, UserSpecifiedDisplay.HideClassName, UserSpecifiedDisplay.FailedClassName, UserSpecifiedDisplay.RefusedClassName);
}
}
21 changes: 17 additions & 4 deletions src/Components/Web.JS/tests/DefaultReconnectDisplay.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,11 +1,12 @@
import { DefaultReconnectDisplay } from "../src/Platform/Circuits/DefaultReconnectDisplay";
import {JSDOM} from 'jsdom';
import { NullLogger} from '../src/Platform/Logging/Loggers';

describe('DefaultReconnectDisplay', () => {

it ('adds element to the body on show', () => {
const testDocument = new JSDOM().window.document;
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument);
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument, NullLogger.instance);

display.show();

Expand All @@ -20,7 +21,7 @@ describe('DefaultReconnectDisplay', () => {

it ('does not add element to the body multiple times', () => {
const testDocument = new JSDOM().window.document;
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument);
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument, NullLogger.instance);

display.show();
display.show();
Expand All @@ -30,7 +31,7 @@ describe('DefaultReconnectDisplay', () => {

it ('hides element', () => {
const testDocument = new JSDOM().window.document;
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument);
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument, NullLogger.instance);

display.hide();

Expand All @@ -39,7 +40,7 @@ describe('DefaultReconnectDisplay', () => {

it ('updates message on fail', () => {
const testDocument = new JSDOM().window.document;
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument);
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument, NullLogger.instance);

display.show();
display.failed();
Expand All @@ -49,4 +50,16 @@ describe('DefaultReconnectDisplay', () => {
expect(display.button.style.display).toBe('block');
});

it ('updates message on refused', () => {
const testDocument = new JSDOM().window.document;
const display = new DefaultReconnectDisplay('test-dialog-id', testDocument, NullLogger.instance);

display.show();
display.rejected();

expect(display.modal.style.display).toBe('block');
expect(display.message.innerHTML).toBe('Could not reconnect to the server. <a href=\"\">Reload</a> the page to restore functionality.');
expect(display.button.style.display).toBe('none');
});

});
3 changes: 2 additions & 1 deletion src/Components/Web.JS/tests/DefaultReconnectionHandler.test.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -93,6 +93,7 @@ function createTestDisplay(): ReconnectDisplay {
return {
show: jest.fn(),
hide: jest.fn(),
failed: jest.fn()
failed: jest.fn(),
rejected: jest.fn()
};
}