# Document Editor: How to Customize the Reconnecting Alert Message

> Under rare conditions, the constant WebSocket connection may be interrupted, for example, if the Internet connection is lost for a very short period of time. This example shows how to customize the alert message that informs the user that TX Text Control is attempting to reconnect.

- **Author:** Bjoern Meyer
- **Published:** 2023-12-18
- **Modified:** 2025-11-16
- **Description:** Under rare conditions, the constant WebSocket connection may be interrupted, for example, if the Internet connection is lost for a very short period of time. This example shows how to customize the alert message that informs the user that TX Text Control is attempting to reconnect.
- **2 min read** (322 words)
- **Tags:**
  - ASP.NET
  - JavaScript
- **Web URL:** https://www.textcontrol.com/blog/2023/12/18/document-editor-how-to-customize-the-reconnecting-alert-message/
- **LLMs URL:** https://www.textcontrol.com/blog/2023/12/18/document-editor-how-to-customize-the-reconnecting-alert-message/llms.txt
- **LLMs-Full URL:** https://www.textcontrol.com/blog/2023/12/18/document-editor-how-to-customize-the-reconnecting-alert-message/llms-full.txt

---

A constantly open WebSocket connection to the WebSocketHandler is required for the Document Editor. This connection is necessary for document rendering synchronization and true WYSIWYG rendering. If the connection is closed for any reason, TX Text Control will attempt to reconnect to the same instance using a unique connection identifier. Reasons for a lost connection can include a brief interruption, network problems, or routing issues.

When you create an instance of the Document Editor, you can specify the number of seconds that TX Text Control will attempt to reconnect.

```
@Html.TXTextControl().TextControl(settings => {
    settings.ReconnectTimeout = 20;
}).Render()
```

Unsaved changes are not lost and the full document state is available when the connection is successfully restored. In case the connection is lost, the *webSocketClosed* event will fire with information about the reason.

```
TXTextControl.addEventListener("webSocketClosed", function(e) { console.log(e) });
```

TX Text Control will display a default alert message that informs the user that the connection is lost and that TX Text Control is attempting to reconnect.

![WebSocket Connection](https://s1-www.textcontrol.com/assets/dist/blog/2023/12/18/b/assets/disconnect.webp "WebSocket Connection")

We have seen reports of users not waiting to reconnect and hitting F5 to refresh the page. This will result in a full reload and the document will be lost after a full recycle. This will result in a full reload and the document will be lost after a full recycle.

```
let mutationObserver;

 TXTextControl.addEventListener("textControlLoaded", function () {
     TXTextControl.addEventListener("webSocketClosed", (e) => {
         observeDisconnect("#txErrMsgDiv");
     });
 });

 function observeDisconnect(selector) {
     const el = document.querySelector(selector);

     mutationObserver = new MutationObserver((mutationRecords, observer) => {
         Array.from(document.querySelectorAll(selector)).forEach((element) => {
             if (element.innerText.includes("Reconnecting")) {
                 element.innerHTML =
                     "<strong>Please wait!</strong> We are working on it!<br /><br /><div style='vertical-align: middle;' class='spinner-border' role='status'><span class='sr-only'></span></div>";
             }

             observer.disconnect();
         });
     }).observe(document.documentElement, {
         childList: true,
         subtree: true,
         characterData: false,
     });
 }
```

The following screenshot shows the custom message with a wait icon to visualize that something is happening.

![WebSocket Connection](https://s1-www.textcontrol.com/assets/dist/blog/2023/12/18/b/assets/disconnect2.webp "WebSocket Connection")

---

## About Bjoern Meyer

As CEO, Bjoern is the visionary behind our strategic direction and business development, bridging the gap between our customers and engineering teams. His deep passion for coding and web technologies drives the creation of innovative products. If you're at a tech conference, be sure to stop by our booth - you'll most likely meet Bjoern in person. With an advanced graduate degree (Dipl. Inf.) in Computer Science, specializing in AI, from the University of Bremen, Bjoern brings significant expertise to his role. In his spare time, Bjoern enjoys running, paragliding, mountain biking, and playing the piano.

- [LinkedIn](https://www.linkedin.com/in/bjoernmeyer/)
- [X](https://x.com/txbjoern)
- [GitHub](https://github.com/bjoerntx)

---

## Related Posts

- [Build a Custom Backstage View in ASP.NET Core with TX Text Control](https://www.textcontrol.com/blog/2026/02/17/build-a-custom-backstage-view-in-aspnet-core-with-tx-text-control/llms.txt)
- [5 Document Workflows You Can Automate With JavaScript Rich Text Editor](https://www.textcontrol.com/blog/2026/01/14/five-document-workflows-you-can-automate-with-javascript-rich-text-editor/llms.txt)
- [Add JavaScript to PDFs with TX Text Control in C# .NET: Time-Based Alerts Made Easy](https://www.textcontrol.com/blog/2025/06/13/add-javascript-to-pdfs-with-tx-text-control-in-c-dot-net-time-based-alerts-made-easy/llms.txt)
- [Using the Document Editor in SPA Applications using the removeFromDom Method](https://www.textcontrol.com/blog/2024/09/02/using-the-document-editor-in-spa-applications-using-the-removefromdom-method/llms.txt)
- [Observe When the Reporting Preview Tab is Active Using MutationObserver](https://www.textcontrol.com/blog/2024/07/23/observe-when-the-reporting-preview-tab-is-active-using-mutationobserver/llms.txt)
- [Removing Empty Pages in TX Text Control with JavaScript](https://www.textcontrol.com/blog/2024/06/19/removing-empty-pages-in-tx-textcontrol-with-javascript/llms.txt)
- [Document Editor: Useful JavaScript Functions for Tables](https://www.textcontrol.com/blog/2024/06/19/document-editor-useful-javascript-functions-for-tables/llms.txt)
- [Extract Data from PDF Documents with C#](https://www.textcontrol.com/blog/2024/06/10/extract-data-from-pdf-documents-with-csharp/llms.txt)
- [Inject JavaScript to PDF Documents in C#](https://www.textcontrol.com/blog/2024/06/07/inject-javascript-to-pdf-documents-in-csharp/llms.txt)
- [Loading Documents from Azure Blob Storage into the TX Text Control Document Editor using pure JavaScript](https://www.textcontrol.com/blog/2024/04/08/loading-documents-from-azure-blob-storage-into-tx-text-control-document-editor-using-pure-javascript/llms.txt)
- [Building an ASP.NET Core Backend Application to Host the Document Editor and Document Viewer](https://www.textcontrol.com/blog/2024/03/14/building-an-asp-net-core-backend-application-to-host-the-document-editor-and-document-viewer/llms.txt)
- [Reuse Document Editor Instances by Dynamically Moving them in the DOM](https://www.textcontrol.com/blog/2023/10/02/reuse-document-editor-instances-by-dynamically-moving-them-in-the-dom/llms.txt)
- [Reuse Angular Document Editor Instances in Bootstrap Tabs](https://www.textcontrol.com/blog/2023/05/22/reuse-angular-document-editor-instances-in-bootstrap-tabs/llms.txt)
- [Updating SubTextParts using JavaScript Promises](https://www.textcontrol.com/blog/2022/12/23/updating-subtextparts-using-javascript-promises/llms.txt)
- [MailMerge: Working with Image Placeholders](https://www.textcontrol.com/blog/2022/12/22/mailmerge-working-with-image-placeholders/llms.txt)
- [Sneak Peek 31.0: Customizing the Context Menu of the ASP.NET Document Editor](https://www.textcontrol.com/blog/2022/08/25/sneak-peek-310-customizing-the-context-menu-of-the-aspnet-document-editor/llms.txt)
- [Text Control Error Navigator Launched](https://www.textcontrol.com/blog/2022/08/15/text-control-error-navigator-launched/llms.txt)
- [Restoring the Merge Field Default Behavior](https://www.textcontrol.com/blog/2022/08/15/restoring-the-merge-field-default-behavior/llms.txt)
- [JavaScript: Avoid Flickering and Visual Updates by Grouping Undo Steps](https://www.textcontrol.com/blog/2022/07/25/javascript-avoid-flickering-and-visual-updates-by-grouping-undo-steps/llms.txt)
- [DS Server or TX Text Control? Different Deployment Scenarios](https://www.textcontrol.com/blog/2022/05/03/ds-server-or-tx-text-control-different-deployment-scenarios/llms.txt)
- [Document Editor: JavaScript Object Availability and Order of Events](https://www.textcontrol.com/blog/2022/05/03/documenteditor-javascript-object-availability-and-order-of-events/llms.txt)
- [Generating Interactive PDF Forms by Injecting JavaScript](https://www.textcontrol.com/blog/2022/03/31/generating-interactive-pdf-forms-by-injecting-javascript/llms.txt)
- [Deploying Documents with Annotations](https://www.textcontrol.com/blog/2022/01/07/deploying-documents-with-annotations/llms.txt)
- [Using TX Text Control .NET Server in Blazor Server Apps](https://www.textcontrol.com/blog/2022/01/06/using-tx-text-control-net-server-for-aspnet-in-blazor-server-apps/llms.txt)
- [Detect Toggle Button Changes Using a MutationObserver](https://www.textcontrol.com/blog/2021/11/11/detect-toggle-button-changes-using-a-mutationobserver/llms.txt)
