I have a nextjs 13 component and in this component i am adding a static tx.js file and creating an iframe. in this iframe i am calling a text Editor service from an ASP.net server.
but the problem is if the server is inaccessible due to any reason (network error or the server is shutdown) iframe does not notify about the status/inaccessibility of service from server.
and in one more scenario when the initially the server was available and everything is working fine but when the server gets disconnected then it does not notify about the connection failed.
here is my component code
import React, {
useState,
useEffect,
useRef,
forwardRef,
} from "react";
import { Box } from "@mui/material";
const TX_CONTROL_API = "https://localhost:44349";
const DocumentEditorContent = forwardRef((props, ref) => {
const id = "txtcontroller";
const [snackBarState, setSnackBarState] = useState(null);
const txInstanceRef = useRef(null);
const scriptAppendedRef = useRef(false);
const A4Size = {
width: 210,
height: 297,
};
const script = document.createElement("script");
script.src = "/tx.js";
script.async = true;
useEffect(() => {
const initializeTextEditor = async () => {
if (!txInstanceRef.current) {
script.onload = () => {
try {
const userText = "sss"; // Replace with appropriate user input
txInstanceRef.current = window.TXTextControlWeb(
id,
`${TX_CONTROL_API}`
);
setShowLoader(false);
} catch (error) {
console.error("Failed to initialize TXTextControlWeb:", error);
setSnackBarState({
snackBarMessage: "Editor not available.",
severity: "error",
});
}
};
if (!scriptAppendedRef.current) {
document.body.appendChild(script);
scriptAppendedRef.current = true;
}
}
};
initializeTextEditor();
return () => {
if (scriptAppendedRef.current) {
const scripts = document.querySelectorAll('script[src="/tx.js"]');
scripts.forEach((script) => {
script.parentNode.removeChild(script);
});
scriptAppendedRef.current = false;
}
};
}, []);
return (
<>
<Box sx={{ height: "1200px" }} id={id}></Box>
)}
</>
);
});
DocumentEditorContent.displayName = "DocumentEditorContent";
export default DocumentEditorContent;
and here is the code for tx.js
var TXTextControlWeb = (function () {
function TXTextControlWeb(element, tx_server_api) {
// change the source here
var m_destinationUrl = tx_server_api;
var iframe = document.createElement("iframe");
iframe.src = m_destinationUrl;
iframe.setAttribute('allowFullScreen', 'true');
iframe.id = element + '_txframe';
iframe.style.border = 'none';
iframe.style.width = '100%';
iframe.style.height = '100%';
document.getElementById(element).appendChild(iframe);
var tx = {};
var event;
createNewEvent('textControlWebLoaded');
// createNewEvent('textControlLoaded');
function createNewEvent(eventName) {
if (typeof (Event) === 'function') {
event = new Event(eventName);
} else {
event = document.createEvent('Event');
event.initEvent(eventName, true, true);
}
}
function receiveMessage(e) {
var message = JSON.parse(e.data);
if (message.receiver == null || message.receiver != "txtextcontrol-client")
return;
if (message.callbackGuid == "-1") {
window.dispatchEvent(event);
return;
}
if (typeof m_messageQueue[message.callbackGuid] === "function") {
var callbackData = message.data;
if (message.object != null) {
switch (message.object) {
case "TextField": {
var fields = [];
for (index = 0; index < message.data.length; ++index) {
var newField = new tx.TextField(
message.data[index].text,
message.data[index].name,
message.data[index].parameters,
message.data[index].typeName,
message.data[index].start,
message.data[index].length,
message.data[index].id,
message.data[index].type,
message.data[index].bounds,
message.data[index].containsInputPosition,
message.data[index].deleteable,
message.data[index].doubledInputPosition,
message.data[index].editable,
message.data[index].showActivated,
message.data[index].isSpellCheckingEnabled,
message.data[index].storedId
);
fields.push(newField);
}
callbackData = fields;
break;
}
case "SubTextPart": {
var subTextParts = [];
for (index = 0; index < message.data.length; ++index) {
var newSubTextPart = new tx.SubTextPart(
message.data[index].name,
message.data[index].id,
message.data[index].highlightColor,
message.data[index].highlightMode,
message.data[index].text,
message.data[index].number,
message.data[index].start,
message.data[index].length,
message.data[index].nestedLevel,
message.data[index].storedId
);
subTextParts.push(newSubTextPart);
}
callbackData = subTextParts;
break;
}
case "TextPart": {
var textParts = [];
for (index = 0; index < message.data.length; ++index) {
var newTextPart = new tx.TextPart(
message.data[index].type,
message.data[index].index,
message.data[index].selection,
message.data[index].storedId
);
textParts.push(newTextPart);
}
callbackData = textParts;
break;
}
}
}
m_messageQueue[message.callbackGuid](callbackData);
}
if (message.removeCallback == true)
delete m_messageQueue[message.callbackGuid];
}
window.addEventListener('message', receiveMessage);
// *** M E M B E R F I E L D S ***
var m_messageQueue = {};
tx.addEventListener = function (eventName, callback) {
var message = new Object();
message.receiver = "txtextcontrol";
message.method = "addEventListener";
message.callbackGuid = uuidv4();
message.parameters = [eventName];
m_messageQueue[message.callbackGuid] = callback;
SendMessage(message);
};
tx.removeEventListener = function (eventName, callback) {
delete m_messageQueue[findKey(m_messageQueue, callback)];
};
// *** H E L P E R F U N C T I O N S ***
function uuidv4() {
return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function (c) {
var r = Math.random() * 16 | 0, v = c == 'x' ? r : (r & 0x3 | 0x8);
return v.toString(16);
});
}
function findKey(obj, value) {
for (var key in obj) {
if (obj[key] == value)
return key;
}
}
function SendMessage(message) {
var receiver = iframe.contentWindow;
var message = JSON.stringify(message);
receiver.postMessage(message, m_destinationUrl);
}
return tx;
}
return TXTextControlWeb;
}());
I am trying to notify the end user that the server is not working or server is inaccessible.
i have also tried TXTextControl.Web: New Reconnect Feature but this only works only after once service in iframe was loaded successfully but im trying to get the error message if the service could not connect when iframe was loaded.
TXTextControl.Web: New Reconnect Feature only provides TXTextControl.addEventListener(“webSocketClosed”, function(e) { console.log(e) }); but for error handling alot more needed
i hope somebody can help me here specially when the iframe is loaded and the service is not loaded in iframe.