2024-04-18 12:50:24 +00:00
|
|
|
class ErrorHandler {
|
2024-03-13 13:08:37 +00:00
|
|
|
constructor(options) {
|
2024-04-18 12:50:24 +00:00
|
|
|
if (!options) throw new Error("Options not provided");
|
|
|
|
if (!options.url) throw new Error("URL is required");
|
|
|
|
if (!options.apikey) throw new Error("API key is required");
|
2024-03-13 13:08:37 +00:00
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
this.url = options.url;
|
|
|
|
this.apikey = options.apikey;
|
2024-03-13 13:08:37 +00:00
|
|
|
this.catchError();
|
|
|
|
}
|
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
getSourceCode(lineNumber) {
|
|
|
|
return this.getInlineSourceCode(lineNumber) || this.getFullSourceWithHighlight(lineNumber);
|
|
|
|
}
|
2024-03-13 13:58:53 +00:00
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
getInlineSourceCode(lineNumber) {
|
|
|
|
const scripts = document.querySelectorAll('script');
|
|
|
|
for (let script of scripts) {
|
|
|
|
if (!script.src) {
|
|
|
|
const scriptLines = script.textContent.split("\n");
|
|
|
|
const scriptPosition = this.getErrorPosition(script);
|
|
|
|
if (lineNumber >= scriptPosition.startLine && lineNumber <= scriptPosition.endLine) {
|
|
|
|
return this.highlightSource(scriptLines, lineNumber - scriptPosition.startLine);
|
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
return null;
|
|
|
|
}
|
2024-03-13 13:08:37 +00:00
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
getFullSourceWithHighlight(lineNumber) {
|
|
|
|
const lines = document.documentElement.outerHTML.split("\n");
|
|
|
|
return this.highlightSource(lines, lineNumber - 1);
|
2024-03-13 13:08:37 +00:00
|
|
|
}
|
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
highlightSource(lines, lineNumber) {
|
|
|
|
const start = Math.max(lineNumber - 2, 0);
|
|
|
|
const end = Math.min(lineNumber + 2, lines.length - 1);
|
|
|
|
lines[lineNumber] = '>> ' + lines[lineNumber] + ' <<';
|
|
|
|
return lines.slice(start, end + 1).join("\n");
|
2024-03-13 13:08:37 +00:00
|
|
|
}
|
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
getErrorPosition(script) {
|
|
|
|
let totalLines = 0;
|
|
|
|
let element = script.previousElementSibling;
|
|
|
|
while (element) {
|
|
|
|
totalLines += (element.outerHTML || element.textContent).split("\n").length;
|
|
|
|
element = element.previousElementSibling;
|
|
|
|
}
|
|
|
|
return {
|
|
|
|
startLine: totalLines + 1,
|
|
|
|
endLine: totalLines + script.textContent.split("\n").length
|
|
|
|
};
|
2024-03-13 13:08:37 +00:00
|
|
|
}
|
2024-03-13 13:58:53 +00:00
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
catchError() {
|
|
|
|
window.onerror = (message, url, lineNumber, column, error) => {
|
|
|
|
this.reportError(message, url, lineNumber, column, error.stack, 'JavaScript Error');
|
|
|
|
return false;
|
|
|
|
};
|
|
|
|
|
|
|
|
window.addEventListener('unhandledrejection', event => {
|
|
|
|
this.reportError(event.reason.toString(), document.location.href, 0, 0, event.reason.stack, 'Promise Rejection');
|
|
|
|
});
|
2024-03-13 13:58:53 +00:00
|
|
|
}
|
|
|
|
|
2024-04-18 12:50:24 +00:00
|
|
|
reportError(message, url, lineNumber, column, stack, type = 'JavaScript Error') {
|
|
|
|
fetch(this.url ? `${location.protocol}//${this.url}/${this.apikey}` : window.location.href, {
|
|
|
|
method: "post",
|
|
|
|
headers: {
|
|
|
|
'Accept': "application/json",
|
|
|
|
'Content-Type': "application/json"
|
|
|
|
},
|
|
|
|
body: JSON.stringify({
|
|
|
|
type,
|
|
|
|
message,
|
|
|
|
url,
|
|
|
|
lineNumber,
|
|
|
|
column,
|
|
|
|
stack,
|
|
|
|
location: window.location.href,
|
|
|
|
source: this.getSourceCode(lineNumber)
|
|
|
|
})
|
|
|
|
}).then(response => response.json()).then(console.info);
|
2024-03-13 13:58:53 +00:00
|
|
|
}
|
2024-03-13 13:08:37 +00:00
|
|
|
}
|