Logrocket을 사용한 Redux 로깅

<: :> Logrocket : 웹 응용 프로그램 DVR, Redux 애플리케이션 디버깅 Logrocket은 웹 애플리케이션의 DVR과 같은 혁신적인 개발자 도구로 웹 사이트에서 발생하는 모든 이벤트를 녹음합니다. Redux 동작 및 상태, 콘솔 로그, JavaScript 오류, 스택 추적, 네트워크 요청/응답, 브라우저 메타 데이터 및 사용자 정의 로그를 기록하고 가장 복잡한 단일 페이지 응용 프로그램의 픽셀 레벨 정확한 비디오를 재현합니다.

웹 응용 프로그램의 문제를 이해하기가 어렵습니다. 신비한 JavaScript 오류에서 사용자가보고 한 버그에서 QA에서 발견 된 문제에 이르기까지 개발자는 사용자에게 영향을 미치는 문제를 해결하기 위해 열심히 노력하고 있습니다. 그리고 이것들은 단지 명백한 문제입니다 - 나쁜 경험을하는 사용자는 단지 그것을 떠나거나 견딜 수 있기 때문에 대부분의 버그는 실제로보고되지 않습니다.

이 문제를 해결하기 위해 Redux와 같은 현대적인 주 관리 라이브러리가 풍부한 감사 트레일을 떠나기 때문에이 문제를 해결하기 위해 개발자는 점점 더 프론트 엔드 로깅 도구를 채택하고 있습니다. 생산 환경에서 작업 및 상태 기록을 통해 버그 및 사용자보고 문제를 쉽게 이해할 수 있습니다.

이 기사에서는 Logrocket을 사용하여 Redux 로깅을 설정하는 방법을 보여준 다음 Redux 애플리케이션을 더 쉽게 디버그 할 수 있도록 기술을 논의합니다.

이 기사는 원래 logrocket.com에 게시되었으며 저자의 허가로 여기에서 재생산되었습니다.

<: :> logrocket : 웹 응용 프로그램 용 DVR

Logrocket은 새로운 유형의 개발자 도구입니다. 웹 응용 프로그램을위한 DVR과 같습니다. 실제로 웹 사이트에서 발생하는 모든 것을 녹음합니다. 어떤 프레임 워크를 사용하든 모든 응용 프로그램과 완벽하게 작동하며 React, Redux, Vue.js 및 Angular의 추가 컨텍스트를 기록 할 수있는 플러그인이 있습니다. Logrocket을 사용하면 버그 또는 사용자 문제가 포함 된 세션을 재생하여 문제가 발생하는 이유를 추측하지 않고 근본 원인을 빠르게 이해할 수 있습니다.

설정 Logrocket Logrocket 설정은 간단합니다. 앱에 몇 줄의 코드를 추가하면됩니다.

npm을 사용하여 설치 : .

https://app.logrocket.com에서 무료 계정을 만들고 응용 프로그램 ID에 유의하십시오.

앱에서 logrocket을 초기화하십시오 :

redux 미들웨어 추가 :

이것은 기본 설정입니다 - 여기 Logrocket을 사용해야하는 모든 것이 있습니다!

Logrocket은 NGRX 및 VUEX와 같은 다른 플럭스 구현을위한 플러그인도 제공하며 여기에서 읽을 수 있습니다.

리플레이 사용자 세션

Logrocket에서 세션을 재생하는 것은 자신의 브라우저에서 일어나는 것을 보는 것과 같습니다. 전체 작업 페이로드 및 이전 및 다음 상태를 포함한 Redux 조치를 확인할 수 있습니다.

Logrocket은 네트워크 요청 및 응답을 캡처하고 특정 요청을 파고 헤더 및 신체를 볼 수 있습니다. 폭포 차트에는 타이밍이 표시되어 어떤 요청이 느리거나, 잠재적 인 레이스 조건이 발생했는지 쉽게 알 수 있습니다.

때때로, Redux 로그만으로는 특히 사용자보고 된 문제를 다룰 때 버그를 이해하기에 충분하지 않습니다. Logrocket의 비디오 재생은 사용자가 앱에서 보는 내용을 정확히 볼 수있게하여 도움이됩니다.

이 비디오는 실제로 실제 비디오가 아닌 DOM의 재 구축이므로 시각적 버그에 대한 HTML/CSS를 확인하거나 2 배 속도로 재생하여 지원을 처리 할 때 사용자가 앱에서 수행하는 방법을 빠르게 이해할 수 있습니다. 무슨 일이 있었는지 문제. 워크 플로에 Redux 로그를 통합 사용자 세션을 재생하고 Redux 로그를 볼 수있는 능력은 개발 워크 플로우 전반에 걸쳐 매우 유용합니다.

수정 버그

지원 사용자는 종종 문제를보고하지만 무슨 일이 일어나고 있는지 정확히 이해하기에 충분한 맥락을 제공하지는 않습니다.

Intercom과 같은 채팅 지원 도구를 사용하는 경우 Logrocket을 직접 통합하여 사용자가 채팅을 시작할 때 녹음 된 URL에 주석을 추가 할 수 있습니다.

보다 일반적인 분석 도구와 통합하는 경우 다음과 같이 추적 API를 사용하여 녹음 URL을 추가 할 수 있습니다.

프로덕션 환경에서 Redux 로깅을 최대한 활용하십시오

프로덕션 환경 로깅은 모든 Redux 응용 프로그램에서 즉시 유용하지만 로그를 염두에두고 응용 프로그램을 작성하면 문제를 디버깅 할 때 로깅이 가장 유용한 지 확인할 수 있습니다.

대부분의 상태를 Redux 로 저장하십시오 나는 여기에서 지역 상태와 Redux 상태 사이의 주장을 논의하고 싶지 않지만, 주어진 상태 부분이 Redux에 있어야하는지 여부를 결정할 때 질문을 디버깅 할 때 해당 상태를 확인하는 데 도움이되는지 스스로에게 물어보십시오. 대답이 예라면 충돌 보고서 및 사용자 문제와 함께 기록되도록 해당 상태를 Redux에 넣는 것을 고려하십시오. redux

를 사용하여 데이터 수집 라이브러리를 사용하십시오 Apollo-Client (for GraphQL) 및 Redux-Query (REST)와 같은 라이브러리는 모두 Redux를 통해 네트워크에서 데이터를 가져 오는 것을 용이하게합니다. 그들은 Redux를 지속성 계층으로 사용하므로 문제를 디버깅 할 때 Redux 로그를 확인하여 고객이 어떤 데이터를 가져온지 확인할 수 있습니다.

더 간단한 접근 방식을 선호하는 경우 네트워크에서 데이터를 쿼리하고 수신 할 때 명시 적 작업을 예약하여 단순히 "프레임 워크"를 얻기 위해 자체 데이터를 작성할 수 있습니다.

불확실성 소스를 처리하기 위해 redux를 사용하여 websockets, 로컬 스토리지, indexeddb 및 date ()와 같은 API의 데이터에 액세스 할 때 결과가 포함 된 레드 유행 조치 일정을 고려하여 향후이 데이터를 쉽게 디버깅 할 수 있습니다. 예를 들어, WebSocket을들을 때 각 메시지에서 Redux 작업을 예약하여 Redux 로그에서 데이터를 볼 수 있습니다.

다른 콘솔 API를 사용하십시오 Console.time (), Console.count () 및 Console.group ()과 같은 콘솔 메소드를 사용하면 React 구성 요소 렌더링 카운트, 트랜잭션 타이밍 및 구성 요소 수명주기 로그와 같은 로그에 풍부한 데이터를 로그에 추가 할 수 있습니다.

Logrocket 에 소스 맵을 빌드 및 업로드합니다 Logrocket은 소스 매핑을 지원하며 CLI를 통해 업로드 할 수 있습니다. 이렇게하면 JavaScript 오류, Redux 동작, 콘솔 로그 및 네트워크 요청에 대한 상징 스택 추적을 볼 수 있으며,이를 통해 코드에서 특정 작업이 트리거되는 위치를 확인할 수 있습니다.

결론 React 및 Redux는 종종 관리 가능

응용 프로그램을 구축하기위한 도구로 환영합니다. Redux 상태, 네트워크 요청 및 DOM을 확인하여 버그 및 기타 사용자보고 된 문제를 쉽게 디버깅 할 수 있기 때문에 프로덕션 환경에서 Redux 데이터를 녹화하면 이러한 통찰력을 제공 할 수 있습니다.

Logrocket을 사용한 Redux 로깅은 버그 수정 및 지원 사용자 작업을 크게 단순화 할 수 있습니다. 여기에서 Logrocket을 사용할 수 있습니다.

Logrocket을 사용하여 생산 환경에서 Redux 로깅의 FAQ (FAQS)

Redux 로깅에서 Logrocket의 주요 기능은 무엇입니까?

Logrocket은 개발자가 웹 애플리케이션에서 사용자 상호 작용을 추적, 녹음 및 이해하는 데 도움이되는 강력한 도구입니다. 네트워크 요청, 콘솔 로그 및 사용자 작업을 포함하여 응용 프로그램에서 발생하는 일에 대한 포괄적 인보기를 제공합니다. 따라서 개발자는 문제의 원인을 정확하게 볼 수 있으므로 문제를 쉽게 식별하고 해결할 수 있습니다. Logrocket은 Redux Applications에서 특히 유용하여 Redux 작업 및 상태를 기록 할 수 있으므로 이벤트 시퀀스를 명확하게 표시합니다.

Logrocket은 다른 로깅 도구와 어떻게 다릅니 까?

Logrocket은 세션 재생 기능을 위해 두드러집니다. 이 기능을 통해 개발자는 문제가있는 세션을 재생하고 사용자가 보는 내용을 정확하게 볼 수 있습니다. 버그를 식별하고 고정하는 데 매우 중요 할 수 있습니다. 또한 Logrocket은 Redux와 완벽하게 통합되어 Redux 작업 및 상태를 쉽게 기록 할 수 있습니다.

Logrocket을 내 Redux 응용 프로그램과 통합하는 방법은 무엇입니까?

Logrocket을 Redux 응용 프로그램과 통합하는 것은 매우 간단합니다. NPM을 통해 Logrocket을 설치 한 후 응용 프로그램의 항목 파일에서 초기화 할 수 있습니다. 그런 다음 Logrocket의 Redux Middleware를 사용하여 Redux 작업 및 상태를 기록 할 수 있습니다. 이 미들웨어는 Redux 스토리지를 만들 때 추가 할 수 있습니다.

프로덕션 환경에서 Logrocket을 사용할 수 있습니까?

예, Logrocket은 생산 환경에서 사용하도록 설계되었습니다. 민감한 사용자 데이터를 보호하는 개인 정보 보호 제어 및 응용 프로그램의 속도가 느려지지 않도록하는 개인 정보 보호 제어와 같은 다양한 기능이 있습니다.

Logrocket 레코드 유형은 무엇입니까?

Logrocket은 네트워크 요청, 콘솔 로그, 레일 작업 및 상태 및 사용자 상호 작용을 포함한 다양한 데이터를 기록 할 수 있습니다. 이는 응용 프로그램에서 발생하는 일에 대한 포괄적 인 관점을 제공하여 문제를 쉽게 식별하고 수정할 수 있습니다.

Logrocket은 민감한 사용자 데이터를 어떻게 처리합니까?

Logrocket에는 민감한 사용자 데이터를 보호 할 수있는 강력한 개인 정보 보호 제어 기능이 있습니다. 특정 데이터가 기록되지 않도록 이러한 컨트롤을 구성 할 수 있습니다. 예를 들어, 사용자 비밀번호를 보호하기 위해 양식 입력 로깅을 방지 할 수 있습니다.

다른 주 관리 라이브러리와 함께 Logrocket을 사용할 수 있습니까?

예, Logrocket은 Redux와 완벽하게 통합되지만 다른 주 관리 라이브러리와 함께 사용할 수도 있습니다. Mobx 및 Vuex를 포함한 여러 인기 라이브러리에 미들웨어를 제공합니다.

Logrocket은 어떻게 디버그에 도움이됩니까?

Logrocket의 세션 재생 기능은 디버깅에 매우 유용 할 수 있습니다. 문제가있는 세션을 재생함으로써 개발자는 사용자가 보는 내용을 정확하게 볼 수있어 버그를 쉽게 식별하고 수정할 수 있습니다. 또한 Logrocket의 네트워크 요청, 콘솔 로그 및 사용자 상호 작용에 대한 포괄적 인 로깅은 디버깅 할 때 귀중한 컨텍스트를 제공 할 수 있습니다.

Logrocket에서 기록한 데이터를 사용자 정의 할 수 있습니까?

예, Logrocket은 고도로 사용자 정의 할 수 있습니다. 기록 할 데이터를 구성 할 수 있으며 응용 프로그램의 특정 이벤트 또는 상태를 추적하기 위해 사용자 정의 로그를 추가 할 수도 있습니다.

Logrocket은 대규모 응용 프로그램에 적합합니까?

예, Logrocket은 대규모 응용 프로그램을 처리하도록 설계되었습니다. 응용 프로그램의 속도가 느려지지 않고 많은 로그를 처리 할 수 ​​있도록 성능 최적화가 있습니다. 또한 Logrocket의 강력한 검색 및 필터링 기능을 사용하면 대형 데이터 세트에서 관련 로그를 쉽게 찾을 수 있습니다.

위 내용은 Logrocket을 사용한 Redux 로깅의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!