흰 화면 부트 진단 추가
This commit is contained in:
Yun Chan
parent
8585f54643
commit
b67fd5d471
4 changed files with 130 additions and 2 deletions
|
|
@ -63,6 +63,131 @@
|
|||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/gh/orioncactus/pretendard/dist/web/variable/pretendardvariable.min.css"
|
||||
/>
|
||||
<script>
|
||||
(function () {
|
||||
var errors = [];
|
||||
var loadedAt = Date.now();
|
||||
function short(value) {
|
||||
return String(value || "").slice(0, 900);
|
||||
}
|
||||
function assetLabel() {
|
||||
var scripts = Array.prototype.slice.call(document.scripts || []);
|
||||
var match = scripts
|
||||
.map(function (script) {
|
||||
return script.src || "";
|
||||
})
|
||||
.filter(function (src) {
|
||||
return src.indexOf("/assets/index-") !== -1 && /\.js($|\?)/.test(src);
|
||||
})
|
||||
.pop();
|
||||
return match ? match.split("/").pop() : "module-not-discovered";
|
||||
}
|
||||
function remember(kind, detail) {
|
||||
errors.push({
|
||||
kind: kind,
|
||||
detail: short(detail),
|
||||
at: new Date().toISOString(),
|
||||
});
|
||||
if (errors.length > 5) errors.shift();
|
||||
render("runtime-error");
|
||||
}
|
||||
function visibleCount() {
|
||||
var nodes = Array.prototype.slice.call(
|
||||
document.querySelectorAll(
|
||||
"main,header,h1,h2,p,a,button,input,select,article,section,.vg-shell,.ad-head,.ad-diagnostic,.lg-root",
|
||||
),
|
||||
);
|
||||
return nodes.filter(function (node) {
|
||||
var rect = node.getBoundingClientRect();
|
||||
var style = window.getComputedStyle(node);
|
||||
return (
|
||||
rect.width > 1 &&
|
||||
rect.height > 1 &&
|
||||
style.display !== "none" &&
|
||||
style.visibility !== "hidden" &&
|
||||
style.opacity !== "0"
|
||||
);
|
||||
}).length;
|
||||
}
|
||||
function render(reason) {
|
||||
var path = window.location.pathname;
|
||||
var isAdmin = path === "/admin" || path.indexOf("/admin/") === 0;
|
||||
var text = (document.body && document.body.innerText ? document.body.innerText : "").trim();
|
||||
var visible = visibleCount();
|
||||
var hasAdminContent =
|
||||
!isAdmin ||
|
||||
Boolean(document.querySelector(".ad-head,.ad-diagnostic,.ad-status,.ad-section,.ad-panel"));
|
||||
if (reason === "watchdog" && text.length > 24 && visible > 0 && hasAdminContent) {
|
||||
var old = document.getElementById("vignette-boot-diagnostic");
|
||||
if (old) old.remove();
|
||||
return;
|
||||
}
|
||||
|
||||
var panel = document.getElementById("vignette-boot-diagnostic");
|
||||
if (!panel) {
|
||||
panel = document.createElement("section");
|
||||
panel.id = "vignette-boot-diagnostic";
|
||||
panel.setAttribute("role", "alert");
|
||||
panel.style.cssText =
|
||||
"position:fixed;z-index:2147483647;inset:24px auto auto 24px;max-width:min(760px,calc(100vw - 48px));padding:18px;border:1px solid #d59b47;border-radius:8px;background:#fffaf0;color:#21312e;box-shadow:0 18px 48px rgba(10,20,18,.18);font:13px/1.5 system-ui,-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;white-space:normal;";
|
||||
document.body.appendChild(panel);
|
||||
}
|
||||
var lines = [
|
||||
"<b style=\"display:block;font-size:18px;margin-bottom:6px\">Vignette 화면 진단</b>",
|
||||
"<div>React 화면이 정상 콘텐츠를 표시하지 못해서 HTML 부트스트랩 진단을 띄웠습니다.</div>",
|
||||
"<dl style=\"display:grid;grid-template-columns:132px minmax(0,1fr);gap:0;margin:12px 0 0;border:1px solid rgba(0,0,0,.12);border-radius:8px;overflow:hidden\">",
|
||||
"<dt style=\"padding:7px 9px;background:rgba(0,0,0,.04);font-weight:700\">reason</dt><dd style=\"margin:0;padding:7px 9px;overflow-wrap:anywhere\">" +
|
||||
reason +
|
||||
"</dd>",
|
||||
"<dt style=\"padding:7px 9px;background:rgba(0,0,0,.04);font-weight:700\">path</dt><dd style=\"margin:0;padding:7px 9px;overflow-wrap:anywhere\">" +
|
||||
path +
|
||||
"</dd>",
|
||||
"<dt style=\"padding:7px 9px;background:rgba(0,0,0,.04);font-weight:700\">asset</dt><dd style=\"margin:0;padding:7px 9px;overflow-wrap:anywhere\">" +
|
||||
assetLabel() +
|
||||
"</dd>",
|
||||
"<dt style=\"padding:7px 9px;background:rgba(0,0,0,.04);font-weight:700\">bodyText</dt><dd style=\"margin:0;padding:7px 9px;overflow-wrap:anywhere\">" +
|
||||
text.length +
|
||||
"</dd>",
|
||||
"<dt style=\"padding:7px 9px;background:rgba(0,0,0,.04);font-weight:700\">visibleNodes</dt><dd style=\"margin:0;padding:7px 9px;overflow-wrap:anywhere\">" +
|
||||
visible +
|
||||
"</dd>",
|
||||
"<dt style=\"padding:7px 9px;background:rgba(0,0,0,.04);font-weight:700\">elapsed</dt><dd style=\"margin:0;padding:7px 9px;overflow-wrap:anywhere\">" +
|
||||
(Date.now() - loadedAt) +
|
||||
"ms</dd>",
|
||||
];
|
||||
if (errors.length) {
|
||||
lines.push(
|
||||
"<dt style=\"padding:7px 9px;background:rgba(0,0,0,.04);font-weight:700\">errors</dt><dd style=\"margin:0;padding:7px 9px;overflow-wrap:anywhere;white-space:pre-wrap\">" +
|
||||
errors
|
||||
.map(function (item) {
|
||||
return item.at + " " + item.kind + ": " + item.detail;
|
||||
})
|
||||
.join("\n") +
|
||||
"</dd>",
|
||||
);
|
||||
}
|
||||
lines.push("</dl>");
|
||||
panel.innerHTML = lines.join("");
|
||||
}
|
||||
window.addEventListener("error", function (event) {
|
||||
remember("error", event.message || event.error || "unknown error");
|
||||
});
|
||||
window.addEventListener("unhandledrejection", function (event) {
|
||||
remember("unhandledrejection", event.reason && (event.reason.stack || event.reason.message || event.reason));
|
||||
});
|
||||
window.__VIGNETTE_BOOT_DIAG__ = {
|
||||
check: function () {
|
||||
render("manual");
|
||||
},
|
||||
};
|
||||
window.setTimeout(function () {
|
||||
render("watchdog");
|
||||
}, 3500);
|
||||
window.setTimeout(function () {
|
||||
render("watchdog");
|
||||
}, 8000);
|
||||
})();
|
||||
</script>
|
||||
</head>
|
||||
<body>
|
||||
<div id="root"></div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue