lajax
v1.1.6
log + ajax, 프런트엔드 로깅 솔루션.
Lajax는 이러한 문제를 해결하려고 시도합니다.
프런트 엔드에 로그가 없거나, 로그는 있지만 지속성이 없어 온라인 문제를 추적하고 분석하기 어렵습니다.
프런트 엔드 로그 라이브러리를 사용하더라도 일반적으로 개발자가 수동으로 로그를 기록하므로 신뢰할 수 없습니다.
프로덕션 환경에서 포착되지 않은 예외는 종종 무시됩니다.
모바일 브라우저는 console 에 의해 인쇄된 로그를 볼 수 없습니다. 과거에는 문제를 찾기 위해 주로 alert 나 vConsole을 사용했지만, 이 목적을 위해 특별히 소스 코드를 수정해야 한다는 단점이 있습니다.
서버에서 동적으로 생성된 웹 페이지의 경우 시스템의 원본 서버 로그는 프런트 엔드 로그와 연관될 수 없습니다.
특징
온라인 예시
빠른 시작
API
로그 형식
요청 ID
서버 예시
시험
특허
3가지 로그 수준( info , warn , error 을 지원하는 로그를 수동으로 기록합니다.
로그는 최적화된 형식으로 브라우저 콘솔에 인쇄됩니다.
포착되지 않은 스크립트 오류를 자동으로 기록합니다.
포착되지 않은 Promise 예외를 자동으로 기록합니다.
Ajax 요청의 시작과 완료를 자동으로 기록합니다.
로그 위치 및 상관 관계를 용이하게 하기 위해 요청 ID를 자동으로 생성합니다.
로그는 구성된 로그 서버에 정기적으로 일괄 전송됩니다.
호환성이 좋고 예외 처리 메커니즘이 좋습니다.
http://eshengsky.github.io/lajax/
> npm install lajaxscript 태그를 사용하여 소개할 수 있습니다. < script src =" ./dist/build.min.js " > </ script > import Lajax from './src/lajax-module' ; // 传入接口服务器地址进行实例化
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;
// 记录一条信息日志
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ;
// 记录一条警告日志
logger . warn ( '这是一条警告日志！' ) ;
try {
JSON . parse ( undefined ) ;
} catch ( err ) {
// 记录一条错误日志
logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}자세한 문서는 API를 참조하세요.
Lajax는 ES2015 구문을 사용하며 webpack + babel을 사용하여 패키징해야 합니다.
> npm install > webpack 패키지된 파일 디렉터리는 ./dist 입니다. 여기서 build.js 는 압축되지 않은 버전이고 build.min.js 압축된 버전입니다.
플러그인을 초기화하고 플러그인 인스턴스를 반환합니다.
Options : 문자열 또는 개체. 문자열이 전달되면 로그 서버 주소로 간주됩니다.
const logger = new Lajax ( 'https://path/to/your/log/server' ) ;일부 구성을 맞춤설정하려면 객체를 전달하세요.
const logger = new Lajax ( {
url : 'https://path/to/your/log/server' ,
interval : 5000
} ) ;객체가 지원하는 모든 속성은 다음과 같습니다.
| 속성 이름 | 설명하다 | 값 유형 | 기본값 |
|---|---|---|---|
| URL | 로그 서버 URL | 끈 | null |
| 자동로그오류 | 발견되지 않은 오류를 자동으로 기록할지 여부 | 불리언 | 진실 |
| 자동로그거부 | Promise 오류를 자동으로 기록할지 여부 | 불리언 | 진실 |
| autoLogAjax | Ajax 요청을 자동으로 기록할지 여부 | 불리언 | 진실 |
| logAjaxFilter | Ajax는 조건부 필터링 기능을 자동으로 기록합니다. 함수가 전달하는 매개변수는 요청의 URL과 메소드입니다. true가 반환되면 로그를 기록한다는 의미이고, false는 로그를 기록하지 않는다는 의미입니다. | 기능 | /**
* @param {string} ajaxUrl - 请求url
* @param {string} ajaxMethod - 请求方式
*/
function ( ajaxUrl , ajaxMethod ) {
return true ;
} |
| 양식화하다 | 콘솔에서 인쇄된 콘텐츠의 형식을 지정할지 여부 | 불리언 | 진실 |
| 쇼설명 | 설명 정보 표시 여부(초기화 완료 시 콘솔에 출력됨) | 불리언 | 진실 |
| 맞춤 설명 | 전달되는 매개변수는 마지막 페이지가 언로드되기 전에 전송되지 않은 로그 수, 현재 요청 ID, 요청 ID가 서버에서 오는지 여부 및 문자열이 반환됩니다. | 기능 | /**
* @param {number} lastUnsend - 上次页面卸载前未发送的日志数
* @param {string} reqId - 请求id
* @param {boolean} idFromServer - 请求id是否来自服务器
*/
function ( lastUnsend , reqId , idFromServer ) {
return ` lajax 前端日志模块加载完成。
自动记录页面错误： ${ this . autoLogError ? '✔' : '✘' }
自动记录Promise异常： ${ this . autoLogRejection ? '✔' : '✘' }
自动记录Ajax请求： ${ this . autoLogAjax ? '✔' : '✘' }
当前页面请求id： ${ reqId } ${ idFromServer
? ' (来自服务端)'
: ' (自动生成)' } ` ;
} |
| 간격 | 서버에 로그를 보내는 간격(밀리초) | 숫자 | 10000 |
| 최대오류요구 | 로그 요청을 보낼 때 연속되는 최대 오류 수입니다. 이 수를 초과하면 요청이 더 이상 전송되지 않습니다(그러나 요청은 여전히 대기열에 기록됩니다). | 숫자 | 5 |
인스턴스 메소드는 정보 로그를 기록하고 모든 유형 및 개수의 매개변수를 전달할 수 있습니다.
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . info ( '这是一条info日志' , '会产生一个随机数：' , num ) ; info 와 동일한 인스턴스 메소드.
const num = parseInt ( Math . random ( ) * 100 ) ;
logger . log ( '这是一条log日志' , '会产生一个随机数：' , num ) ;경고 로그를 기록하는 인스턴스 메소드는 모든 유형 및 개수의 매개변수를 전달할 수 있습니다.
logger . warn ( '这是一条警告日志！' ) ;인스턴스 메소드는 오류 로그를 기록하고 모든 유형 및 개수의 매개변수를 전달할 수 있습니다.
try {
JSON . parse ( undefined ) ;
} catch ( err ) {
// 记录一条错误日志
logger . error ( '这是一条error日志' , '捕获到一个错误：' , err ) ;
}배열 유형 속성으로, 현재 전송할 로그 큐입니다.
logger . queue문자열 유형 속성, 현재 페이지의 요청 ID입니다.
logger . reqId부울 유형 속성, 요청 ID가 서버에 의해 생성되는지 여부.
logger . idFromServer정적 객체, 로그 색상 열거 로그 색상을 사용자 정의하려면 인스턴스 메소드를 호출하기 전에 객체의 속성을 수정할 수 있습니다. 기본 개체:
Lajax . colorEnum = {
/**
* 信息日志颜色，默认宝蓝色
*/
info : 'DodgerBlue' ,
/**
* 警告日志颜色，默认橘黄色
*/
warn : 'orange' ,
/**
* 错误日志颜色，默认红色
*/
error : 'red' ,
/**
* ajax分组颜色，默认紫色
*/
ajaxGroup : '#800080' ,
/**
* 日志发送成功颜色，默认绿色
*/
sendSuccess : 'green' ,
/**
* 描述文字颜色，默认粉红色
*/
desc : '#d30775' ,
} ajax를 통해 서버로 전송되는 로그는 비어 있지 않은 배열이어야 합니다. 여기에는 2개의 로그가 동시에 기록됩니다.
logger . info ( '这是一条info日志' , 'Hello' , 'lajax' ) ;
logger . warn ( '这是一条warn日志' ) ;전송되는 실제 로그 데이터는 다음과 같습니다.
[{
"time" : " 2017-08-23 16:35:01.989 " ,
"level" : " info " ,
"messages" : [ " {44b53aba-1970-4bd1-b741-ed1ae5a5051e} " , "这是一条info日志" , " Hello " , " lajax " ],
"url" : " http://127.0.0.1:5500/demo/index.html " ,
"agent" : " Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 "
}, {
"time" : " 2017-08-23 16:35:02.369 " ,
"level" : " warn " ,
"messages" : [ " {44b53aba-1970-4bd1-b741-ed1ae5a5051e} " , "这是一条warn日志" ],
"url" : " http://127.0.0.1:5500/demo/index.html " ,
"agent" : " Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/60.0.3112.90 Safari/537.36 "
}]각 필드에 대한 설명:
time : 문자열, 이 로그 기록의 시간
level : 문자열, 로그의 수준. info , warn 및 error 의 세 가지 유형으로 나뉩니다.
messages : 배열 배열의 첫 번째 요소는 중괄호로 묶인 고유 요청 ID입니다. 모든 후속 요소는 logger[level]
url : 문자열, 로그가 있는 페이지의 URL
agent : 문자열, 로그가 위치한 페이지의 사용자 에이전트
서버로 전송된 각 로그에는 요청 ID가 포함되어 있습니다. 동일한 요청에서는 모든 로그의 요청 ID가 동일해야 하며, 다른 요청에서는 기록된 로그의 요청 ID가 달라야 합니다.
예: 사용자 A가 index.html에 액세스했을 때 lajax는 10개의 로그를 기록하고 전송했으며 이 10개 로그의 요청 ID는 사용자 B도 페이지를 방문하여 10개의 로그를 생성했으며 이 로그의 요청 ID는 동일했습니다. 사용자 A의 요청 ID와 동일해야 하지만 달라야 합니다.
요청 ID의 주요 목적: 서버 측에서 특정 요청이 진행되는 동안 관련된 모든 로그를 정확하게 찾을 수 있습니다.
요청 ID 생성 및 전송:
페이지가 서버 측에서 동적으로 생성되고 서버 측 로그를 프런트 엔드 로그와 연결하려는 경우 서버 측에서 요청 ID를 생성하여 프런트 엔드로 보낼 수 있습니다. Lajax는 페이지 또는 window._reqId 의 <meta name="_reqId" content="xxxx-xxx"> 콘텐츠에서 요청 ID를 찾으려고 연속적으로 시도합니다.
위 검색이 실패하면 페이지는 순수 프런트엔드 페이지로 간주됩니다. Lajax는 초기화 중에 요청 ID로 시간 기반 고유 ID를 생성합니다.
모니터링되는 Ajax 요청의 경우 위의 요청 ID가 X-Request-Id 요청 헤더에 추가됩니다. 상관 관계를 위해 서버 로그에 요청 ID를 기록할 수 있습니다.
./demo 디렉터리에는 node.js를 기반으로 하는 간단한 로그 서버 예제 server.js가 포함되어 있습니다.
로그 서버를 시작합니다.
> node server.js로그 인터페이스는 http://127.0.0.1:2017/log에서 실행됩니다. 로컬로 테스트하는 경우 Lajax 초기화 매개변수를 다음 주소로 설정하세요.
const logger = new Lajax ( 'http://127.0.0.1:2017/log' ) ;이 샘플 서버는 Ajax 도메인 간 요청을 지원합니다. :)
테스트를 실행하려면 로컬로 ./test/index.html 페이지에 액세스하세요.
MIT 라이센스(MIT)
저작권 (c) 2017 Sun Zhenghua
본 소프트웨어 및 관련 문서 파일("소프트웨어")의 사본을 취득한 모든 사람에게 사용, 복사, 수정, 병합에 대한 권리를 포함하되 이에 국한되지 않고 제한 없이 소프트웨어를 취급할 수 있는 권한이 무료로 부여됩니다. , 소프트웨어 사본을 게시, 배포, 재라이센스 부여 및/또는 판매하고, 소프트웨어를 제공받은 사람에게 다음 조건에 따라 그렇게 하도록 허용합니다.
위의 저작권 고지와 본 허가 고지는 소프트웨어의 모든 사본 또는 상당 부분에 포함됩니다.
소프트웨어는 상품성, 특정 목적에의 적합성 및 비침해에 대한 보증을 포함하되 이에 국한되지 않고 명시적이든 묵시적이든 어떠한 종류의 보증 없이 "있는 그대로" 제공됩니다. 청구, 손해 또는 기타 소프트웨어나 소프트웨어의 사용 또는 기타 거래로 인해 발생하거나 이와 관련하여 발생하는 계약, 불법 행위 또는 기타 행위에 대한 책임.
