혜르미온느

센트리를 구축하고 나면 생각보다 많은 에러들이 수집된다. 오류를 조금 보고 싶다 혹은 할당량 제한으로 인하여 적게 받아야만 한다 등 오류를 줄이고 싶은 경우가 많은데, 사실 제일 베스트는 모든 오류를 처리하는 방법이다-! 만, 쉽지 않다. 그럴때 말 이 기능을 사용하면 말 그대로 오류를 적게 수집할 수 있다. https://docs.sentry.io/platforms/javascript/configuration/options/#sample-rate Basic Options for JavaScript Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the in..

sentry에는 다양한 기능들이 많은데, 오늘 포스팅 해 볼 주제는 inbound filter에 대한 이야기이다. 사실 이 기능의 일부는 유료버전에서 사용이 가능하지만 무료로 사용할 수 있는 범위도 강력하거니와 나는 급할 때, 트라이얼 버전으로 해당 기능의 도움을 받은 경험이 있어 함께 소개해보고자 한다. https://docs.sentry.io/product/data-management-settings/filtering/ Inbound Filters Learn about the different methods for filtering data in your project. docs.sentry.io 그간 직접 코딩을 하면서 여러 조건의 에러를 필터링 하는 방법들을 소개했는데, 이번에 소개할 방법은 프로..

denyUrls는 말 그대로 sentry 프로젝트로 수집하지 않을 경로에서 생성된 오류를 막을 때 사용하는 옵션이다. https://docs.sentry.io/platforms/react-native/configuration/options/#deny-urls Basic Options for React Native Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the init function as an object. docs.sentry.io 간혹 검색하다보면 ignoreUrls이라는 옵션이 검색되기도 하는데, 이는 옛 버전으로 더이상 동작하지 않으니 반드시..

센트리를 세팅하고 이슈를 받아보면 당황스러울 때가 있다. 이렇게 많은 에러가 숨어있었다고!? 라는 마음 때문이다. 수집된 에러들을 천천히 살펴보면 사실 (이유가 어찌 되었건) 불필요한 에러들도 꽤 많이 자리를 차지하고 있다. 딱히 체크하지 않아도 되는 에러 일 수도 있고, 센트리가 init 된 이후의 모든 에러를 수집하기 때문에 의도되지 않은 페이지에서의 에러일 수도 있다. 아무튼 그럴 때, 이 전에 포스팅 한 beforeSend 함수를 이용하여 오류를 필터링 하는 방법도 좋지만 더 간단한 방법이 있어 소개해 보려고 한다. https://hyermione.tistory.com/20 센트리(sentry) BeforeSend 함수 활용 - 용량 조절, 슬랙 전송 등 참새가 방앗간을 들리듯이 센트리가 에러를 ..

참새가 방앗간을 들리듯이 센트리가 에러를 프로젝트로 보내기 전에 반드시 방문하게 되는 HOOK이 있다. https://docs.sentry.io/platforms/javascript/guides/electron/configuration/options/#before-send Basic Options for Electron Learn more about how to configure the SDK. These options are set when the SDK is first initialized, passed to the init function as an object. docs.sentry.io 바로 BeforeSend 라는 함수인데, 말 그대로 이슈를 보내기 전에 무조건 실행되는 함수이다. 가령 이슈를..

먼저 나는 CRA(create-react-app)를 통하여 react 기반의 프로젝트를 세팅해두었다. 하단의 코드를 이용하여 스토리 북을 설치해준다. npx sb init 잘 설치되었는지 확인하려면 package.json에 storybook이 들어왔나 확인하거나 폴더 구조에서 storybook 폴더의 생성을 확인하는 것도 간단한 방법이다. .storybook 폴더 하위에는 main.js와 preview.js라는 두 파일이 생성되어있는데, main.js는 스토리북 config 설정들을 하는 스트립트 파일이며, preview.js는 모든 스토리들에 공통적으로 적용할 포맷 등을 세팅하는 곳이라고 생각하면 된다. 이는 조금 더 공부한 후에 따로 포스팅을 할 예정이다. 각설하고, 스토리북 설치 확인의 가장 좋은 ..

센트리를 프로젝트에 연결하기 위해서는 각각의 프로젝트에 부여되는 DSN을 연결시켜야 한다. DSN은 오류 이벤트를 보낼 위치를 SDK에 알려주는 역할을 하는데, 프로젝트 생성 직후에 한 번 알려주고 이후에는 꽁꽁 숨어있어서 찾기가 힘들다. (dsn 사용 예시) import * as Sentry from "@sentry/browser"; import { BrowserTracing } from "@sentry/tracing"; Sentry.init({ dsn: "https://examplePublicKey@o0.ingest.sentry.io/0", // Alternatively, use `process.env.npm_package_version` for a dynamic release version // i..

만약 우리가 IT계열이 아닌 그 어떤 다른 직업을 가지고 있다고 가정할 때, storyBook이라는 말을 처음 듣는다면 어떤 생각이 떠올랐을까? 나는 단연 이야기, 혹은 동화책 등에 관한 내용일거라 생각한다. 이야기를 뜻하는 story라는 단어의 뜻이 가장 크게 와닿기 때문이다. 만약에 우리가 고려해야하는 사용자 시나리오 혹은 기획자 의도 혹은 비즈니스 로직 혹은 테스트 케이스 등등이 하나의 이야기라고 생각하면 본 포스팅에서 소개해 볼 storyBook이 조금 더 쉽게 이해될까? 마크업도 백엔드도 중요하지만 그 사이 다리를 이어주는 프론트는 적당히 백엔드를 커버하면서도 적당히 마크업을 커버하면서도 사용자에게 최고의 경험을 제공하기 위하여 그 이상의 코드를 구현하면서 날이 갈수록 방대해지고 복잡해지는 경험..

먼저 XMLHttpRequest()를 설명하기 위해서 ajax를 설명하지 않을 수 없다. ajax란? Asynchronous Javascript And XML의 약자로 그 뜻을 해석하자면 비동기 자바스크립트 그리고 XML을 의미한다. 풀어서 이해해보자면 JS를 통하여 XML형식의 데이터를 비동기적으로 주고 받는 것이라고 할 수 있다. 여담으로 학부시절 XML 수업을 듣고, AJAX로 졸업작품을 하였는데, 현 기술을 보니 새삼 옛날 기술이라는 생각이 든다... 왜 XMLHttpRequest()의 설명에 앞서 ajax를 설명했냐면 XMLHttpRequest()는 Ajax 프로그래밍에 주로 사용되는 기술이었기 때문이다. XMLHttpRequest()란? 브라우저와 서버가 통신하기 위하여 사용되는 API로 객체..

옛날에 함께 일했던 사수는 신기술에 대한 관심이 엄청났는데, 어느정도냐면 사수를 통해 들은 기술 관련 이야기를 구글 등에 검색해보면 한국 블로그는 찾아 볼 수도 없을 뿐더러 외국에서도 이제 막 관심이 커지면서 커뮤니티가 생성되고 있을 정도로 빠른 정보력을 가지고 있었다. 덕분에 N년 전 Tailwind CSS에 대해서 들었었는데, 현재도 여전하지만 당시에도 부트스트랩만 있으면 스타일은 아무것도 두렵지 않아! 하던 시절이라 흘려 듣고 말았다. (물론 사수와 함께 진행한 프로젝트는 부트스트랩 말고, 더 최신에 나온 스타일을 사용했다.) 시간이 흐른 지금 강의를 듣다가 Tailwind CSS가 언급되는 걸 보고 처음 들었을 때 진작 알아보고 공부해볼걸 이라는 아쉬움이 들어 더 늦지 않게 간단하게 정리해보려고 ..