Heddiw, byddaf yn dweud wrthych am olrhain gwallau amser real mewn cymhwysiad React. Ni ddefnyddir cymhwysiad pen blaen fel arfer ar gyfer olrhain gwallau. Mae rhai cwmnΓ―au yn aml yn gohirio olrhain bygiau, gan ddychwelyd ato ar Γ΄l dogfennaeth, profion, ac ati. Fodd bynnag, os gallwch chi newid eich cynnyrch er gwell, yna gwnewch hynny!
1. Pam mae angen Sentry arnoch chi?
Rwy'n cymryd bod gennych ddiddordeb mewn olrhain chwilod yn ystod y cynhyrchiad
Ydych chi'n meddwl nad yw hyn yn ddigon?
Iawn, gadewch i ni edrych ar y manylion.
Y prif resymau i ddatblygwyr ddefnyddio Sentry:
- Yn eich galluogi i osgoi risgiau wrth ddefnyddio cod gyda gwallau
- Helpu SA gyda phrofi cod
- Derbyn hysbysiadau cyflym am broblemau
- Y gallu i gywiro gwallau yn gyflym
- Cael arddangosfa gyfleus o wallau yn y panel gweinyddol
- Trefnu gwallau yn Γ΄l segment defnyddiwr/porwr
Prif resymau dros y Prif Swyddog Gweithredol/Arweinydd y prosiect
- Arbed arian (gellir gosod Sentry ar eich gweinyddwyr)
- Cael adborth defnyddwyr
- Deall beth sydd o'i le ar eich prosiect mewn amser real
- Deall nifer y problemau y mae pobl yn eu cael gyda'ch app
- Eich helpu chi i ddod o hyd i leoedd lle gwnaeth eich datblygwyr gamgymeriadau
Rwy'n credu y byddai gan y datblygwyr ddiddordeb yn yr erthygl hon yn gyntaf. Gallwch hefyd ddefnyddio'r rhestr hon o resymau i argyhoeddi'ch bos i integreiddio Sentry.
Byddwch yn ofalus gyda'r eitem olaf ar y rhestr fusnes.
Oes gennych chi ddiddordeb yn barod?
Beth yw Sentry?
Mae Sentry yn gymhwysiad olrhain bygiau ffynhonnell agored sy'n helpu datblygwyr i olrhain a thrwsio damweiniau mewn amser real. Peidiwch ag anghofio bod y rhaglen yn caniatΓ‘u ichi gynyddu effeithlonrwydd a gwella profiad y defnyddiwr. Mae Sentry yn cefnogi JavaScript, Node, Python, PHP, Ruby, Java ac ieithoedd rhaglennu eraill.
2. Mewngofnodi a chreu prosiect
- Agorwch eich cyfrif Sentry. Efallai y bydd yn rhaid i chi fewngofnodi. (Sylwer y gellir gosod Sentry ar eich gweinyddwyr)
- Y cam nesaf yw creu prosiect
- Dewiswch eich iaith o'r rhestr. (Rydym yn mynd i ddewis React. Cliciwch "Creu Prosiect")
Addaswch eich cais. Mae enghraifft sylfaenol o sut i integreiddio Sentry i gynhwysydd i'w gweld isod:
import * as Sentry from '@sentry/browser';
// Sentry.init({
// dsn: "<https://[email protected]/1432138>"
// });
// should have been called before using it here
// ideally before even rendering your react app
class ExampleBoundary extends Component {
constructor(props) {
super(props);
this.state = { error: null };
}
componentDidCatch(error, errorInfo) {
this.setState({ error });
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
if (this.state.error) {
//render fallback UI
return (
<a onClick={() => Sentry.showReportDialog()}>Report feedback</a>
);
} else {
//when there's not an error, render children untouched
return this.props.children;
}
}
}Mae gan Sentry Dewin defnyddiol i'ch helpu chi i ddarganfod beth ddylech chi ei wneud nesaf. Gallwch ddilyn y camau hyn. Rwyf am ddangos i chi sut i greu eich triniwr gwall cyntaf. Gwych, rydym wedi creu prosiect! Gadewch i ni symud ymlaen i'r cam nesaf
3. Integreiddio Ymateb a Sentry
Rhaid i chi osod y pecyn npm yn eich prosiect.
npm i @sentry/browserCychwyn Sentry yn eich cynhwysydd:
Sentry.init({
// dsn: #dsnUrl,
});Mae'r DSN wedi'i leoli yn Prosiectau -> Gosodiadau -> Allweddi Cleient. Gallwch ddod o hyd i allweddi cleient yn y bar chwilio.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Olrhain y gwall cyntaf
Er enghraifft, defnyddiais raglen gerddoriaeth syml gyda'r API Deezer. Gallwch ei weld . Mae angen i ni greu gwall. Un ffordd yw cael mynediad i'r eiddo "anniffiniedig".
Mae angen i ni greu botwm sy'n galw consol.log Ρ defnyddiwr.e-bost. Ar Γ΄l y weithred hon dylem dderbyn neges gwall: Gwall Math Heb ei Dal (methu darllen priodwedd o heb ei ddiffinio email) oherwydd gwrthrych defnyddiwr coll. Gallwch hefyd ddefnyddio Eithriad Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Mae'r cynhwysydd cyfan yn edrych fel hyn:
import React, { Component } from "react";
import { connect } from "react-redux";
import { Input, List, Skeleton, Avatar } from "antd";
import * as Sentry from "@sentry/browser";
import getList from "../store/actions/getList";
const Search = Input.Search;
const mapState = state => ({
list: state.root.list,
loading: state.root.loading
});
const mapDispatch = {
getList
};
class Container extends Component {
constructor(props) {
super(props);
Sentry.init({
dsn: "https://[email protected]/1417586",
});
}
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
render() {
const { list, loading, getList } = this.props;
const user = undefined;
return (
<div className="App">
<button
type="button"
onClick={() => console.log(user.email)}
>
test error1
</button>
<div onClick={() => Sentry.showReportDialog()}>Report feedback1</div>
<h1>Music Finder</h1>
<br />
<Search onSearch={value => getList(value)} enterButton />
{loading && <Skeleton avatar title={false} loading={true} active />}
{!loading && (
<List
itemLayout="horizontal"
dataSource={list}
locale={{ emptyText: <div /> }}
renderItem={item => (
<List.Item>
<List.Item.Meta
avatar={<Avatar src={item.artist.picture} />}
title={item.title}
description={item.artist.name}
/>
</List.Item>
)}
/>
)}
</div>
);
}
}
export default connect(
mapState,
mapDispatch
)(Container);Ar Γ΄l integreiddio'r botwm hwn, dylech ei brofi yn y porwr.
Mae gennym ein camgymeriad cyntaf
Pwy-hoo!
Os cliciwch ar y gwall pennawd, fe welwch olrhain pentwr.
Mae'r negeseuon yn edrych yn ddrwg. Wrth gwrs rydym wedi gweld negeseuon gwall heb ddeall ble mae'r cod. Yn ddiofyn rydym yn sΓ΄n am y map ffynhonnell yn ReactJS oherwydd nad ydynt wedi'u ffurfweddu.
Hoffwn hefyd ddarparu cyfarwyddiadau ar gyfer sefydlu'r map ffynhonnell, ond byddai hynny'n gwneud yr erthygl hon yn llawer hirach nag yr oeddwn yn bwriadu.
Gallwch astudio'r pwnc hwn . Os oes gennych ddiddordeb yn yr erthygl hon, yn cyhoeddi'r ail ran am integreiddio mapiau ffynhonnell. Felly, tarwch fwy o hoffterau a thanysgrifiwch i rhag colli yr ail ran.
5. Defnyddiwch Sentry gyda phwynt diwedd API
IAWN. Rydym wedi ymdrin Γ’'r eithriad javascript yn y paragraffau blaenorol. Fodd bynnag, beth fyddwn ni'n ei wneud am wallau XHR?
Mae gan Sentry hefyd drin gwallau personol. Fe'i defnyddiais i olrhain gwallau api.
Sentry.captureException(err)Gallwch chi addasu enw'r gwall, lefel, ychwanegu data, data defnyddiwr unigryw gan ddefnyddio'ch cais, e-bost, ac ati.
superagent
.get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
.set("X-RapidAPI-Key", #id_key)
.end((err, response) => {
if (err) {
Sentry.configureScope(
scope => scope
.setUser({"email": "[email protected]"})
.setLevel("Error")
);
return Sentry.captureException(err);
}
if (response) {
return dispatch(setList(response.body.data));
}
});Hoffwn ddefnyddio swyddogaeth generig ar gyfer yr API dal.
import * as Sentry from "@sentry/browser";
export const apiCatch = (error, getState) => {
const store = getState();
const storeStringify = JSON.stringify(store);
const { root: { user: { email } } } = store;
Sentry.configureScope(
scope => scope
.setLevel("Error")
.setUser({ email })
.setExtra("store", storeStringify)
);
// Sentry.showReportDialog(); - If you want get users feedback on error
return Sentry.captureException(error);
};Mewnforio'r swyddogaeth hon yn eich galwad ap.
export default query => (dispatch, getState) => {
superagent
.get(`https://deezerdevs-deezer.p.rapidapi.com/search?q=${query}`)
.set("X-RapidAPI-Key", #id_key)
.end((error, response) => {
if (error) {
return apiCatch(error, getState)
}
if (response) {
return dispatch(setList(response.body.data));
}
});
};Gadewch i ni wirio'r dulliau:
- setLevel yn eich galluogi i fewnosod gwall lefel yn y dangosfwrdd sentry. Mae ganddo briodweddau - 'angheuol', 'gwall', 'rhybudd', 'log', 'gwybodaeth, 'debug', 'critigol').
- setUser yn helpu i arbed unrhyw ddata defnyddiwr (id, cyfeiriad e-bost, cynllun talu, ac ati).
- setExtra yn caniatΓ‘u ichi nodi unrhyw ddata sydd ei angen arnoch, er enghraifft, storio.
Os ydych chi am gael adborth gan ddefnyddwyr am fyg, dylech ddefnyddio'r swyddogaeth showReportDialog.
Sentry.showReportDialog();Casgliad:
Heddiw fe wnaethom ddisgrifio un ffordd o integreiddio Sentry i mewn i gais React.
β Telegram sgwrs gan
Ffynhonnell: hab.com