前端错误监控 - SKILL.NULL

React 18 自定义 Hook 获取 useState 最新值

原理：通过同步更新 useRef 来获取最新值

// util.ts

export const useRefState = (init: any = null) => {

const [state, setState] = useState(init);

const stateRef = useRef(init);

const setProxy = (newVal: any) => {

stateRef.current = newVal;

setState(newVal);

};

const getState = () => stateRef.current;

return [state, setProxy, getState];

};

使用：

import { useRefState } from "util"

const [state, setState, getState] = useRefState(0)

state // state 值，变动后更新DOM

setState // setState，变动 state

getState() // 获取最新值

2024-07-03by SKILLNULL React, 前端阅读(949)评论(0)

处理报错 ResizeObserver loop completed with undelivered notifications.

// 处理报错 ResizeObserver loop completed with undelivered notifications.

export const handlerResizeObserverError = () => {

const debounce = (callback: (...args: any[]) => void, delay: number) => {

let tid: any;

return function (...args: any[]) {

const ctx = self;

tid && clearTimeout(tid);

tid = setTimeout(() => {

callback.apply(ctx, args)

}, delay)

}

const _ = (window as any).ResizeObserver;

(window as any).ResizeObserver = class ResizeObserver extends _ {

constructor(callback: (...args: any[]) => void) {

callback = debounce(callback, 20)

super(callback)

}

2024-04-26by SKILLNULL JavaScript, 前端阅读(1211)评论(0)

前端错误监控上报公共方法，可在父页面及iframe子页面同时使用

先创建公共文件error-reported.js 内容如下：

/**

* 获取前端错误信息进行上报

* @param iframe

export function catchError (iframe) {

let _this = this || window

let source = '来自外层框架错误信息：'

if (iframe) {

_this = iframe.contentWindow

source = '来自iframe内部错误信息：'

}

_this?.addEventListener('error', function (event) {

let errorMessage = event && event.message

let errrorType = event && event.type

let errorStack = event && event.error && event.error.stack

let errorLineno = event && event.lineno

let errorColno = event && event.colno

let errorHref = event && event.target && event.target.location && event.target.location.href

let errorPathname = event && event.target && event.target.location && event.target.location.pathname

let errorParams = event && event.target && event.target.location && event.target.location.search

let errorOrigin = event && event.target && event.target.location && event.target.location.origin

let errorSrcElement = event && event.srcElement && event.srcElement.src

// 可忽略错误，不会在控制台打印，不会中断程序

if (errorMessage === 'ResizeObserver loop limit exceeded') return

let errorInfo = {

source: source, // 报错来源，来自iframe内还是外层

errorMessage: errorMessage || '', // 报错信息，对应message

errrorType: errrorType || '', // 报错类型，对应type

errorStack: errorStack || '', // 报错定位信息，对应error->stack

errorLineno: errorLineno || '', // 报错行号，对应lineno

errorColno: errorColno || '', // 报错列号，对应colno

errorHref: errorHref || '', // 报错完整页面url，对应target->location->href

errorPathname: errorPathname || '', // 报错路径，对应target->location->pathname

errorParams: errorParams || '', // 报错路径参数，对应target->location->search

errorOrigin: errorOrigin || '', // 报错域，对应target->location->origin

errorSrcElement: errorSrcElement || '', // 资源加载错误，对应target->srcElement->src

}

const info = window.JSON.stringify(errorInfo);

(new Image()).src = `/api/error/report?data=${info}`;

}, true)

}

然后在入口文件最前面引入error-reported.js

本文项目背景：使用art-template模板引擎建立了公共框架，使用iframe进行页面套用。所以整[……]

2022-03-28by SKILLNULL JavaScript 阅读(4109)评论(0)

一	二	三	四	五	六	日
« 8月
				1	2	3
4	5	6	7	8	9	10
11	12	13	14	15	16	17
18	19	20	21	22	23	24
25	26	27	28	29	30