☰

Show Server Errors with Time / by leizingyiu with gpt

Display a floating layer for server errors with time and animations, and fix unnecessary alerts.

当前为 2024-11-25 提交的版本，查看 最新版本。

  1. // ==UserScript==
  2. // @name         Show Server Errors with Time / by leizingyiu with gpt
  3. // @namespace    http://leizingyiu.net/
  4. // @version      1.1
  5. // @description  Display a floating layer for server errors with time and animations, and fix unnecessary alerts.
  6. // @author       leizingyiu & GPT
  7. // @license      MIT
  8. // @match        *://*/*
  9. // @grant        none
  10. // ==/UserScript==
  11.  
  12. (function () {
  13.     'use strict';
  14.  
  15.     // 创建浮层容器
  16.     const errorContainer = document.createElement('div');
  17.     errorContainer.style.position = 'fixed';
  18.     errorContainer.style.bottom = '0';
  19.     errorContainer.style.left = '0';
  20.     errorContainer.style.width = '100%';
  21.     errorContainer.style.maxHeight = '30vh'; // 限制显示高度
  22.     errorContainer.style.overflowY = 'auto';
  23.     errorContainer.style.pointerEvents = 'none'; // 默认不干扰页面操作
  24.     errorContainer.style.zIndex = '9999';
  25.     errorContainer.style.display = 'flex';
  26.     errorContainer.style.flexDirection = 'column';
  27.     errorContainer.style.alignItems = 'center';
  28.     errorContainer.style.gap = '5px';
  29.     document.body.appendChild(errorContainer);
  30.  
  31.     // 记录当前错误数
  32.     const MAX_ERRORS = 10;
  33.     let errorCount = 0;
  34.  
  35.     // 创建错误显示元素
  36.     function createErrorElement(message, time) {
  37.         const errorElement = document.createElement('div');
  38.         errorElement.innerHTML = `<strong>${time}</strong>: ${message}`;
  39.         errorElement.style.background = 'rgba(255, 69, 58, 0.9)'; // 错误背景色
  40.         errorElement.style.color = 'white';
  41.         errorElement.style.padding = '10px 20px';
  42.         errorElement.style.borderRadius = '5px';
  43.         errorElement.style.boxShadow = '0 2px 5px rgba(0, 0, 0, 0.3)';
  44.         errorElement.style.opacity = '0';
  45.         errorElement.style.transform = 'translateY(100%)';
  46.         errorElement.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
  47.         errorElement.style.pointerEvents = 'auto'; // 鼠标可交互
  48.         errorElement.style.cursor = 'default';
  49.  
  50.         // 鼠标悬停暂停倒计时
  51.         let hideTimeout;
  52.         errorElement.addEventListener('mouseover', () => {
  53.             clearTimeout(hideTimeout);
  54.         });
  55.         errorElement.addEventListener('mouseout', () => {
  56.             hideTimeout = setTimeout(() => {
  57.                 hideErrorElement(errorElement);
  58.             }, 3000);
  59.         });
  60.  
  61.         // 动画显示
  62.         setTimeout(() => {
  63.             errorElement.style.opacity = '1';
  64.             errorElement.style.transform = 'translateY(0)';
  65.         }, 10);
  66.  
  67.         // 自动消失
  68.         hideTimeout = setTimeout(() => {
  69.             hideErrorElement(errorElement);
  70.         }, 3000);
  71.  
  72.         return errorElement;
  73.     }
  74.  
  75.     // 隐藏错误元素
  76.     function hideErrorElement(errorElement) {
  77.         errorElement.style.opacity = '0';
  78.         errorElement.style.transform = 'translateY(100%)';
  79.         setTimeout(() => {
  80.             errorElement.remove();
  81.             errorCount--;
  82.         }, 500);
  83.     }
  84.  
  85.     // 显示错误
  86.     function showError(message) {
  87.         const currentTime = new Date().toLocaleTimeString(); // 错误时间
  88.         if (errorCount >= MAX_ERRORS) {
  89.             // 移除最旧的错误
  90.             errorContainer.firstChild?.remove();
  91.             errorCount--;
  92.         }
  93.         const errorElement = createErrorElement(message, currentTime);
  94.         errorContainer.appendChild(errorElement);
  95.         errorCount++;
  96.     }
  97.  
  98.     // 拦截 fetch
  99.     const originalFetch = window.fetch;
  100.     window.fetch = async function (...args) {
  101.         try {
  102.             const response = await originalFetch(...args);
  103.             if (!response.ok && response.status === 413) {
  104.                 showError(`Error ${response.status}: ${response.statusText}`);
  105.             }
  106.             return response;
  107.         } catch (error) {
  108.             showError(`Network Error: ${error.message}`);
  109.             throw error;
  110.         }
  111.     };
  112.  
  113.     // 拦截 XMLHttpRequest
  114.     const originalXhrOpen = XMLHttpRequest.prototype.open;
  115.     XMLHttpRequest.prototype.open = function (...args) {
  116.         this.addEventListener('load', function () {
  117.             if (this.status === 413) {
  118.                 showError(`Error ${this.status}: ${this.statusText}`);
  119.             }
  120.         });
  121.         originalXhrOpen.apply(this, args);
  122.     };
  123. })();