Îro ez ê di serîlêdanek React-ê de şopandina xeletiya rast-dem ji we re vebêjim. Serlêdanek pêşîn bi gelemperî ji bo şopandina xeletiyê nayê bikar anîn. Hin pargîdan bi gelemperî şopandina xeletiyê paşde dixin, piştî belgekirin, ceribandin, hwd vedigerin wê. Lêbelê, heke hûn dikarin hilbera xwe ji bo çêtir biguhezînin, wê hingê tenê wê bikin!
1. Çima hûn Sentry hewce ne?
Ez texmîn dikim ku hûn di dema hilberînê de bi şopandina xeletiyan re eleqedar in
Ma hûn difikirin ku ev ne bes e?
Baş e, em li hûrguliyan binêrin.
Sedemên sereke ji bo pêşdebiran ku Sentry bikar bînin:
- Destûrê dide we ku hûn dema ku kodê bi xeletiyan ve girêdidin ji xetereyan dûr bixin
- Alîkariya QA bi ceribandina kodê bikin
- Di derbarê pirsgirêkan de agahdariya bilez bistînin
- Kapasîteya rastkirina zû xeletiyan
- Di panela rêveberiyê de nîşanek hêsan a xeletiyan bistînin
- Çewtiyên li gorî beşa bikarhêner/gerokê rêz bikin
Sedemên sereke yên projeya CEO / Rêber
- Pereyan hilînin (Sentry dikare li ser serverên we were saz kirin)
- Bersivdana bikarhêner digirin
- Fêmkirina çi di projeya we de xelet e di wextê rast de
- Fêmkirina hejmara pirsgirêkên ku mirov bi sepana we re hene
- Ji we re bibin alîkar ku hûn cîhên ku pêşdebirên we xeletî kirine bibînin
Ez difikirim ku pêşdebir dê pêşî li vê gotarê eleqedar bibin. Her weha hûn dikarin vê navnîşa sedeman bikar bînin da ku patronên xwe qanih bikin ku Sentry entegre bikin.
Di navnîşa karsaziyê de ji xala paşîn re hişyar bimînin.
Jixwe tu eleqedar î?
Sentry çi ye?
Sentry serîlêdanek şopandina xeletiya çavkaniyek vekirî ye ku ji pêşdebiran re dibe alîkar ku di wextê rast de têkçûn bişopînin û rast bikin. Ji bîr nekin ku serîlêdan dihêle hûn karîgeriyê zêde bikin û ezmûna bikarhêner çêtir bikin. Sentry JavaScript, Node, Python, PHP, Ruby, Java û zimanên din ên bernamekirinê piştgirî dike.
2. Têkeve û projeyekê biafirîne
- Hesabê xweya Sentry vekin. Dibe ku divê hûn têkevinê. (Ji kerema xwe bala xwe bidin ku Sentry dikare li ser serverên we were saz kirin)
- Pêngava paşîn çêkirina projeyek e
- Zimanê xwe ji navnîşê hilbijêrin. (Em ê React hilbijêrin. "Proje biafirîne" bikirtînin)
Serlêdana xwe xweş bikin. Nimûneyek bingehîn a meriv çawa Sentry di konteynerek de yek dike li jêr tê dîtin:
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;
}
}
}Sentry xwedan Wizardek arîkar e ku ji we re bibe alîkar ku hûn fêr bibin ka hûn paşê çi bikin. Hûn dikarin van gavan bişopînin. Ez dixwazim nîşanî we bidim ka meriv çawa yekem rêgirê xeletiya xwe biafirîne. Mezin, me projeyek çêkir! Werin em derbasî qonaxa din bibin
3. React and Sentry entegrasyonê
Divê hûn pakêta npm di projeya xwe de saz bikin.
npm i @sentry/browserSentry di konteynera xwe de bidin destpêkirin:
Sentry.init({
// dsn: #dsnUrl,
});DSN di Projeyan -> Mîhengan -> Bişkojkên Xerîdar de cih digire. Hûn dikarin bişkojkên xerîdar di barika lêgerînê de bibînin.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}4. Şopandina xeletiya yekem
Mînakî, min bi Deezer API re serîlêdanek muzîkê ya hêsan bikar anî. Hûn dikarin wê bibînin . Divê em xeletiyek çêbikin. Yek rê ew e ku meriv xwe bigihîne milkê "nedîyar".
Pêdivî ye ku em bişkokek ku bang dike biafirînin konsol.log с user.email. Piştî vê çalakiyê divê em peyamek çewtiyê bistînin: TypeError Negirtî (nikare taybetmendiya ji nediyar bixwîne email) ji ber tiştê bikarhêner winda ne. Hûn jî dikarin bikar bînin îstîsna Javascript.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>Tevahiya konteynir wiha xuya dike:
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);Piştî yekkirina vê bişkojê, divê hûn wê di gerokê de ceribandin.
Xeletiya me ya yekem heye
Wey-hoo!
Heke hûn li ser xeletiya sernavê bikirtînin, hûn ê şopek stackê bibînin.
Peyam xerab xuya dikin. Bê guman me peyamên xeletiyê dît bêyî ku em fam bikin ku kod li ku ye. Ji hêla xwerû ve em li ser nexşeya çavkaniyê di ReactJS de diaxivin ji ber ku ew ne hatine mîheng kirin.
Di heman demê de ez dixwazim rêwerzan ji bo sazkirina nexşeya çavkaniyê peyda bikim, lê ew ê vê gotarê ji ya min dirêjtir bike.
Hûn dikarin vê mijarê bixwînin . Heke hûn bi vê gotarê re eleqedar dibin, dê beşa duyemîn di derbarê entegrasyona nexşeya çavkaniyê de biweşîne. Ji ber vê yekê, bêtir ecibandinan bixin û bibin abone da ku beşa duyemîn ji dest neçe.
5. Bikaranîn Nobet bi xala dawî API
OK. Me di paragrafên berê de îstîsna javascript vegirtiye. Lêbelê, em ê li ser xeletiyên XHR çi bikin?
Sentry di heman demê de rêgirtina xeletiya xwerû jî heye. Min ew bikar anî da ku xeletiyên api bişopîne.
Sentry.captureException(err)Hûn dikarin bi karanîna serîlêdana xwe, e-name, û hwd navê xeletiyê, astê, daneyan lê zêde bikin, daneyên bikarhênerê yekta xweş bikin.
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));
}
});Ez dixwazim ji bo API-ya girtinê fonksiyonek gelemperî bikar bînim.
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);
};Vê fonksiyonê di banga api-ya xwe de derxînin.
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));
}
});
};Ka em rêbazan kontrol bikin:
- setLevel destûrê dide te ku hûn xeletiyek astê têxin nav tabloya çavdêriyê. Taybetmendiyên wê hene - 'qir', 'çewtî', 'hişyarî', 'log', 'agahdarî, 'debug', 'krîtîk').
- setUser ji bo hilanîna daneyên bikarhêner (nasname, navnîşana e-nameyê, plansaziya dravdanê, hwd.) dibe alîkar.
- setExtra destûrê dide te ku hûn daneyên ku hûn hewce ne diyar bikin, mînakî hilanînê.
Heke hûn dixwazin li ser xeletiyek nerînên bikarhêner bistînin, divê hûn fonksiyona showReportDialog bikar bînin.
Sentry.showReportDialog();Encam:
Îro me yek rê diyar kir ku Sentry di serîlêdanek React de entegre dike.
→ chat Telegram ji aliyê
Source: www.habr.com