GithubHelp home page GithubHelp logo

project11-a-web-fe-performance-monitoring-sdk's Introduction



Santry

에러 및 로그 모니터링 플랫폼

Thanks for BoostCamp2020




배포 주소

Repository

Highlights

프로젝트 개요

Back

  • 기존에 프로젝트를 운영하면서 에러와 기록을 로그파일로 저장합니다.
  • 로그 자체를 CLI로 관리할 경우 가독성이 떨어지며 에러레벨을 구분하기 힘듭니다.
사용 전 사용 후
  • Santry 는 오류를 수집하는 SDK를 NPM을 통해서 배포하여, 발생하는 오류들을 모아서 서버에 저장하고, 그에 대한 상황과 통계를 알려주는 Admin 페이지를 제공합니다.
  • 여러분에 Application에서 발생하는 오류들을 찾는 데 도움을 드려 더욱 행복한 개발환경에서 개발하셨으면 좋겠습니다.

Members

Back

J005 강석민 J049 김원호 J050 김은빈 J071 문혜라

Install

Back

$ npm install @santry/browser
$ npm install @santry/node

Get Started

Back

Usage

  • Node.js
const { init, captureMessage, captureError } = require('@santry/node');
const dsn = [token]@[URL]; // Set Your Project Token
    
init(dsn); // Required!
    
// if you want to get Message
~~Your Code~~
captureMessage("hello I'm SAntry");

// if you want to get Error
try {
  throw new Error('testing Error');
} catch (error) {
  captureError(error);
}
    
  • Express
const express = require('express');
const { init, errorHandler, captureMessage } = require('@santry/node');

const app = express();
const dsn = [token]@[URL]; // Set Your Project Token
    
init(dsn); // Required!

// if you want to get Message
app.get('/', function rootHandler(req, res) {
  captureMessage("hello I'm SAntry");
  res.end('Hello world!');
});

// if you want to get Error
app.get('/debug-sentry', function mainHandler(req, res) {
  console.log(req);
  throw new Error('My second Sentry error get!');
});

app.use(errorHandler());

app.use(function onError(err, req, res, next) {
  res.statusCode = 500;
  res.end('good santry!');
});

app.listen(3000);
    

init([dsn] [, options])

If you want to use functions, use it first.

options

  • traceSampleRate Set the percentage to collect errors or messages. This can be a number between 0 and 1.
  • release Set the release version of your code.
  • environment Set the environment of your code.
  • unhandleRejectionLevel Set the level when an unhandleRejection error occurs. This is the setting for the whole unhandleRejection error.
  • uncaughtExceptionLevel Set the level when an uncaughtException error occurs. This is the setting for the whole uncaughtException error.

Set Level

If you want to set level in message or error. set level as parameter!

captureMessage("hello I'm Hera", "fatal");
captureError(error,"critical");

Set Context

To leave some messages, Using 'setContext' Function

const { setContext, captureMessage } = require('@santry/node');


const testError = () => {
  try {
    throw new Error('Fatal Level Error!');
  } catch (error) {
    setContext('ExpressDevServer', {
      version: '1.1',
      date: new Date(),
    });
    captureError(error);
  }
};

개발환경

Back

  • 공통
    • Typescript
    • GitHub Repository 모니터링 및 자동 배포
  • SDK
    • Lerna를 통한 Mono Repo 개발
    • NPM Package 배포
  • Server
    • Mongoose & MongoDB 사용
    • Jest와 RESTClient를 통한 테스트 안정화
  • Client
    • React & Redux
    • Babel, Tsc, Webpack 직접 설정
    • Recharts를 통한 차트 구성

project11-a-web-fe-performance-monitoring-sdk's People

Contributors

eunbin-kim avatar gitdog01 avatar maong0927 avatar minbert avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

project11-a-web-fe-performance-monitoring-sdk's Issues

[Feature] : captureError

Summary

에러가 발생했을 경우 해당 에러를 서버쪽으로 전송한다.

  • 바닐라

  • express

  • react

Additional Context

try {
  aFunctionThatMightFail();
} catch (err) {
  Sentry.captureException(err);
}

// sentry-clone.js

let token; // <--

export default {
	...
	captureMessage: (error, level = 5) => {
		axios.post(
			'error 메세지 받는 URL', 
			{ error, level }, 
			{ header: `Bearer ${token}`}
		);
	}
}
  • 위 함수는 예시로 작성 된 것이며, 추가적 수정이 필요하다.
  • 에러메세지 내용을 서버로 전송한다.
  • (Optional) 에러가 난곳의 코드를 'fs' 모듈을 통해 직접 읽어 보낸다.

[Feature] : init

Summary

SDK 초기설정을 위한 함수

Additional Context

ProjectID, Public Key 등을 argument로 받으며, 기본 백엔드 주소 설정

[Feature] : captureMessage

Summary

로그를 따로 기록하는 함수

Additional Context

// ~ YourCode ex) 로그인 기능코드 ~ //
Sentry.captureMessage(`${user.nickname}님이 로그인 하였습니다.`);
// ~ YourCode ~ //

export default {
	...
	captureMessage: (message, type = 'default') => {
		if(!typeList.includes(type)){
			throw new Error("지정되지 않은 타입입니다.")
		}
		axios.post(
			'로그 메세지 받는 URL', 
			{ message, level }, 
			{ header: `Bearer ${token}`}
		);
	}
}
  • 위 형식과 같이 기록하고 싶은 로그 중간에 삽입하는 형태의 함수이다.

[Feature] : (Optional) Error level 설정

Summary

특정 에러의 위험도를 설정한다. 세팅에서 규정한 위험도보다 높을 때 메일이나 슬랙으로 알림을 보낸다.

Additional Context

  • 에러 레벨 설정
  • captureMessage: (error, level = 'default') 와 같은 Argument 형식을 고려한다.

[Feature] : 로그인 유저 정보 보내기

Summary

웹 페이지를 사용하는 유저에 대한 정보를 전송한다.

Additional Context

- [ ] 접속한 유저의 os와 버전 ( 쳐내기 )

  • 접속한 유저의 ip address와 email

Backlog Test

Summary

One paragraph description of the feature.

  • 할일

  • 할일2

[Feature] : unhandled rejection handling

Summary

unhandled rejection handling 기능 추가

Additional Context

catch 하지 않은 promise error 리포트 해줄 수 있도록 unhandled rejection handling 추가

[Bug] : 프로젝트 만들기가 동작하지 않습니다

안녕하세요. 재밌는 프로젝트 하셨네요~

다만 배포된 url에서 해보려고했는데 잘 안되네요. 한번 확인해주세요 :)

To Reproduce

프로젝트 만들기 - 입력 후 - 프로젝트 만들기 클릭

Expected behavior

프로젝트가 생성되야할 것 같은데, 현재 반응 없음

Screenshots

500 에러 발생
스크린샷 2020-12-20 오후 9 53 06

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.