捕捉浏览器资源加载404异常,自动重新加载页面。

发布于:2024-03-26 ⋅ 阅读:(73) ⋅ 点赞:(0)
/***
 * 监控资源404情况,自动刷新获取最新资源
 */

(function () {
    // 监控404开关
    const openScriptError404: boolean = true;
    if (!openScriptError404) return;

    const _autoReloadContKey: string = 'auto-reload-cont';
    const _reloadMaxCont: number = 5

    // 资源404时自动强刷页面
    window.addEventListener('error', (event) => {
        console.info("error", event, event.target)

        const tag: any = event.target;
        const cont: number = Number(sessionStorage.getItem(_autoReloadContKey) || 0);
        if (cont >= _reloadMaxCont) return;

        // 标记reload次数小于5次
        if (tag.tagName === 'LINK' || (tag.tagName === 'SCRIPT' && !(event instanceof ErrorEvent)) || event?.message?.includes('Failed to load resource')) {
            sessionStorage.setItem(_autoReloadContKey, String(cont + 1))
            location.reload()
        }
    }, true)

    // 动态模块导入错误重载
    window.addEventListener('unhandledrejection', (e) => {
        console.info("error", e, e.reason)

        const message = e?.reason?.message;
        const cont: number = Number(sessionStorage.getItem(_autoReloadContKey) || 0);
        if (cont >= _reloadMaxCont) return;

        if (/(Failed to fetch dynamically imported module:|Failed to load resource)/.test(message)) {
            sessionStorage.setItem(_autoReloadContKey, String(cont + 1))
            location.reload()
        }
    }, true)

    // 3秒后,没有触发,则移除标记
    setTimeout(() => {
        sessionStorage.removeItem(_autoReloadContKey)
    }, 3000)
})()

捕捉到浏览器资源加载404异常,比如js、css资源,自动重新加载页面,每出现一次错误连续至多自动加载5次。


网站公告

今日签到

点亮在社区的每一天
去签到