موږ د سینټري سره د عکس العمل په کارولو سره سپړنه کوو.
دا مقاله د یوې لړۍ برخه ده چې د مثال په کارولو سره د سینټري غلطیو راپور ورکولو سره پیل کیږي: .
د عکس العمل پلي کول
لومړی موږ اړتیا لرو د دې غوښتنلیک لپاره نوې سینټري پروژه اضافه کړو؛ د سینټری ویب پاڼې څخه. پدې حالت کې موږ عکس العمل غوره کوو.
موږ به خپل دوه بټونه بیا پلي کړو، هیلو او ایرر، د عکس العمل سره په غوښتنلیک کې. موږ د خپل سټارټر غوښتنلیک په جوړولو سره پیل کوو:
npx create-react-app react-appبیا موږ د سینټري کڅوړه واردوو:
yarn add @sentry/browserاو پیل یې کړئ:
react-app/src/index.js
...
import * as Sentry from '@sentry/browser';
const RELEASE = '0.1.0';
if (process.env.NODE_ENV === 'production') {
Sentry.init({
dsn: 'https://[email protected]/1289887',
release: RELEASE,
});
}
...مشاهدات:
- د پراختیا په جریان کې، موږ د مسلو د څارنې لپاره نور میکانیزمونه لرو، لکه کنسول، نو موږ یوازې د تولید جوړولو لپاره سینټري فعالوو
بیا موږ خپل هیلو او ایرر تڼۍ پلي کوو او په غوښتنلیک کې یې اضافه کوو:
react-app/src/Hello.js
import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';
export default class Hello extends Component {
state = {
text: '',
};
render() {
const { text } = this.state;
return (
<div>
<button
onClick={this.handleClick}
>
Hello
</button>
<div>{text}</div>
</div>
)
}
handleClick = () => {
this.setState({
text: 'Hello World',
});
try {
throw new Error('Caught');
} catch (err) {
if (process.env.NODE_ENV !== 'production') {
return;
}
Sentry.captureException(err);
}
}
}react-app/src/MyError.js
import React, { Component } from 'react';
export default class MyError extends Component {
render() {
return (
<div>
<button
onClick={this.handleClick}
>
Error
</button>
</div>
)
}
handleClick = () => {
throw new Error('Uncaught');
}
}react-app/src/App.js
...
import Hello from './Hello';
import MyError from './MyError';
class App extends Component {
render() {
return (
<div className="App">
...
<Hello />
<MyError />
</div>
);
}
}
export default App;ستونزه (سرچینه نقشه)
موږ کولی شو د ننوتلو له لارې د تولید جوړونې سره سینټري ازموینه وکړو:
yarn buildاو د جوړ فولډر څخه داخل کړئ:
npx http-server -c-1هغه ستونزه چې موږ یې په سمدستي توګه پرمخ وړو هغه دا ده چې د سینټري د تېروتنې ریکارډونه په کوچني بسته کې د لاین شمیرو ته اشاره کوي؛ ډیر ګټور نه دی.
د سینټري خدمت دا د غلطۍ ترلاسه کولو وروسته د کم شوي کڅوړې لپاره د سرچینې نقشې په ایستلو سره تشریح کوي. پدې حالت کې موږ د لوکل هوسټ څخه روان یو (د سینټري خدمت لخوا د لاسرسي وړ ندي).
حلونه (سرچینه نقشه)
د دې ستونزې حل د عامه ویب سرور څخه غوښتنلیک چلول دي. د GitHub پاڼو خدمت کارولو لپاره یو ساده ځواب تڼۍ (وړیا). د کارولو مرحلې معمولا په لاندې ډول دي:
-
د فولډر مینځپانګې کاپي کړئ د جوړولو فولډر ته ثبوت د ذخیرې په روټ لارښود کې.
-
چالان کړئ د ګیټ هب پا .ې په ذخیره کې (د GitHub څخه) د ډاکس فولډر کارولو لپاره د بادار څانګې
-
GitHub ته بدلونونه فشار ورکړئ
تبصره: وروسته له دې چې زه پوه شوم چې زه څه کارولو ته اړتیا لرم create-create-app د اپلیکیشن پیل کولو لپاره د کور پاڼې فعالیت. په package.json کې د لاندې اضافه کولو لپاره لاندې راغلی:
"homepage": "https://larkintuckerllc.github.io/hello-sentry/"د روان غوښتنلیک وروستۍ نسخه دلته شتون لري:
د نیول شوي کیګونو بیلګه
راځئ چې د هیلو تڼۍ په کلیک کولو سره لاړ شو.
د یوې تېروتنې سره چې داسې ښکاري:
مشاهدات:
- دا د بګ راپور روښانه نه شي، براوو.
د غلطیو لپاره د بې حسابه بیلګه
په ورته ډول، راځئ چې د تڼۍ کلیک له لارې لاړ شو تېروتنه.
د یوې تېروتنې سره چې داسې ښکاري:
د بې حسابه غلطیو ښه اداره کول (راینډینګ)
د خطا د محدودیتونو پیژندنه
د کارن انٹرفیس په برخه کې د جاوا سکریپټ تېروتنه باید ټول غوښتنلیک مات نه کړي. د React کاروونکو لپاره د دې ستونزې د حل لپاره، React 16 د "غلطۍ حد" په نوم یو نوی مفهوم معرفي کوي.
د تېروتنې حدود د عکس العمل اجزا دي چې د دوی د ماشوم برخې ونې کې هرچیرې د جاواسکریپټ غلطۍ نیسي، هغه تېروتنې لاګ کوي، او د هغه برخې ونې پر ځای د فال بیک UI وړاندې کوي چې ټکر شوی. د خطا حدود د رینډینګ په جریان کې، د ژوند دورې میتودونو کې، او د دوی لاندې د ټولې ونې په جوړونکو کې تېروتنې نیسي.
...
د نه موندلو غلطیو لپاره نوی چلند
دا بدلون د پام وړ دی. د عکس العمل 16 پورې، هغه تېروتنې چې د کومې خطا حد لخوا نه دي نیول شوي د ټول عکس العمل برخې ونې د غیر نصب کیدو لامل کیږي.
- دان ابراموف -
یو مهم وضاحت چې ما یو څه وخت نیولی مخکې له دې چې زه پوه شم دا دی پورتني چلند یوازې د رینډر میتود کې اچول شوي غلطیو سره کار کوي (یا ډیر احتمال د ژوند دورې میتودونو کې). د مثال په توګه، د خطا حدونو کارول به زموږ د تڼۍ سره هیڅ ښه ونه کړي تېروتنه; دا تېروتنه په کلک هینډلر کې وه.
راځئ چې د رینډینګ غلطی مثال جوړ کړو او بیا د خطا حدونه وکاروو ترڅو خطا په ډیر ښه ډول اداره کړو.
react-app/src/MyRenderError
import React, { Component } from 'react';
export default class MyRenderError extends Component {
state = {
flag: false,
};
render() {
const { flag } = this.state;
return (
<div>
<button
onClick={this.handleClick}
>
Render Error
</button>
{ flag && <div>{flag.busted.bogus}</div> }
</div>
)
}
handleClick = () => {
this.setState({
flag: true,
});
}
}څارنه:
-
کله چې تاسو تڼۍ فشار کړئ، غبرګون ښکاره شي flag.busted.bogus، کوم چې یوه تېروتنه رامنځته کوي
-
د خطا حد پرته، ټوله برخه ونې به غیر نصب شي
بیا موږ زموږ د خطا حد کوډ لیکو (د نوي ژوند دورې میتود کاروي componentDidCatch); دا په اصل کې د ډان ابراموف په مقاله کې ورکړل شوی مثال دی:
react-app/src/ErrorBoundary.js
import React, { Component } from 'react';
import * as Sentry from '@sentry/browser';
export default class ErrorBoundary extends Component {
constructor(props) {
super(props);
this.state = { hasError: false };
}
componentDidCatch(err, info) {
this.setState({ hasError: true });
Sentry.captureException(err);
}
render() {
if (this.state.hasError) {
return <h1>Something went wrong.</h1>;
}
return this.props.children;
}
}په نهایت کې موږ دا اجزا کاروو:
react-app/src/App.js
...
import MyRenderError from './MyRenderError';
class App extends Component {
render() {
return (
<ErrorBoundary>
<div className="App">
...
</div>
</ErrorBoundary>
);
}
}
...په هرصورت، د Render Error تڼۍ کلیک کول د فال بیک UI ښکاره کوي او سینټري ته د تېروتنې راپور ورکوي.
بشپړ کول
زه امید لرم چې تاسو دا ګټور موندلی.
PS
د سینټری له لارې د PS ټیلیګرام چیٹ
سرچینه: www.habr.com