సేవ సెంట్రీ వ్రాయబడిన ఫ్రంట్-ఎండ్ అప్లికేషన్‌లలోని బగ్‌లను రిమోట్‌గా పర్యవేక్షించడానికి మిమ్మల్ని అనుమతిస్తుంది జావాస్క్రిప్ట్.
ఆన్ ఫ్రంట్-ఎండ్ అప్లికేషన్‌లలో సమస్యలను పరిష్కరించడానికి ప్రయత్నిస్తోంది జావాస్క్రిప్ట్ మీరు తరచుగా యాక్సెస్ చేయని వినియోగదారు బ్రౌజర్‌లో అవి ఉద్భవించినందున ఇది గమ్మత్తైనది. అయితే, సెంట్రీ బగ్‌లను రిమోట్‌గా పర్యవేక్షించడం సాధ్యం చేస్తుంది.
మీరు ఈ వ్యాసంలో చర్చించిన పరిష్కారాలను డౌన్‌లోడ్ చేసుకోవచ్చు.
ఏమి కావాలి
మీరు ఈ ఉదాహరణలను ఉపయోగించాలనుకుంటే, మీకు ఇది అవసరం:
- : అప్లికేషన్‌లో భాగం కాని ఫీచర్-రిచ్ డెవలప్‌మెంట్ టూల్. మేము తాజా LTS వెర్షన్ (8.12.0)ని డౌన్‌లోడ్ చేసాము
- సెంట్రీ: సెంట్రీ సేవలోని ఖాతా (మీరు నెలకు 10 వేల బగ్‌లను ఉచితంగా రికార్డ్ చేయవచ్చు) లేదా ఇన్‌స్టాల్ చేయబడిన స్థానిక సెంట్రీ -
మీ సర్వర్‌లో ఇన్‌స్టాలేషన్
మీ సర్వర్‌లో సెంట్రీ ఆన్-ప్రెమిస్‌ని ఇన్‌స్టాల్ చేయడానికి మీరు 2 మార్గాల్లో వెళ్లవచ్చు
-
rpm బిల్డ్ చేసి వాటిని ఇన్‌స్టాల్ చేయండి -
-
అధికారిక ఇన్‌స్టాలర్‌ని ఉపయోగించండి:
Установить на сервер docker и docker-compose git clone https://github.com/getsentry/onpremise.git ./install.sh
ప్రామాణిక ఉపయోగం
ప్రారంభించడానికి, సేవా వెబ్‌సైట్ నుండి కొత్తదాన్ని జోడించండి సెంట్రీ- అప్లికేషన్ కోసం ప్రాజెక్ట్. కావలసిన భాషను ఎంచుకున్న తర్వాత, మీరు సంబంధిత డాక్యుమెంటేషన్‌ను అందుకుంటారు. మా విషయంలో మేము ఎంచుకున్నాము జావాస్క్రిప్ట్.
మొదటి ఉదాహరణ ప్రామాణికమైనది జావాస్క్రిప్ట్. ఇక్కడ రెండు బటన్లు ఉన్నాయి: "హలో" (హలో) మరియు "లోపం" (లోపం).
మీరు బటన్‌ను క్లిక్ చేసిన తర్వాత "హలో", స్క్రీన్ రీబూట్ అవుతుంది మరియు బ్లాక్ అవుతుంది ప్రయత్నించండి బగ్‌ని గుర్తించి పట్టుకుంటారు. బగ్ "క్యాచ్" అయిన తర్వాత, లోపం నివేదిక మానవీయంగా సేవకు పంపబడుతుంది సెంట్రీ.
"ఎర్రర్" బటన్ బగ్‌ను సులభంగా గుర్తించడానికి మిమ్మల్ని అనుమతిస్తుంది.
vanilla/index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Vanilla</title>
</head>
<body>
<button id="hello">Hello</button>
<button id="error">Error</button>
<div id="output"></div>
<script src="https://browser.sentry-cdn.com/4.0.5/bundle.min.js" crossorigin="anonymous"></script>
<script>
(function () {
'use strict';
Sentry.init({ dsn: 'https://[email protected]/1289664' });
var helloEl = document.getElementById('hello');
var errorEl = document.getElementById('error');
var outputEl = document.getElementById('output');
helloEl.addEventListener('click', handleHelloClick);
errorEl.addEventListener('click', handleErrorClick);
function handleHelloClick() {
outputEl.innerHTML = 'Hello World';
try {
throw new Error('Caught');
} catch (err) {
Sentry.captureException(err);
}
}
function handleErrorClick() {
throw new Error('Uncaught');
}
})();
</script>
</body>
</html>వ్యాఖ్యలు:
- సెంట్రీ CDN నుండి ఇన్‌స్టాల్ చేయబడింది మరియు గ్లోబల్ వేరియబుల్‌గా బహిర్గతం చేయబడింది
- కొంచెం ముందుగా మేము మా జావాస్క్రిప్ట్‌లో సెంట్రీని ప్రారంభించాము
ఈ ఉదాహరణను పరీక్షించడానికి, మేము స్టాటిక్ వెబ్ సర్వర్ ప్లాట్‌ఫారమ్‌ను ఉపయోగించవచ్చు Node.js: http సర్వర్. ఫైల్ నిల్వ చేయబడిన ఫోల్డర్‌కు వెళ్లండి index.html, మరియు బ్రౌజర్‌లో చిరునామాను తెరవడానికి క్రింది పంక్తిని నమోదు చేయండి (కాషింగ్‌ని నిలిపివేసే ఎంపిక). .
క్యాచ్ బగ్‌లు ఎలా ప్రదర్శించబడతాయి
ముందుగా బటన్‌పై క్లిక్ చేయండి "హలో".
మేము బగ్‌ని పట్టుకున్నాము, కనుక ఇది కాల్ స్టాక్‌ను పాప్ అప్ చేయదు మరియు కనుక కన్సోల్‌లో పర్యవేక్షించబడదు. అయితే, మేము పంపినప్పటి నుండి సెంట్రీ బగ్‌ను మాన్యువల్‌గా నివేదించండి, మేము మీ ఖాతాలో దాని గురించి సందేశాన్ని చూస్తాము.
వ్యాఖ్యలు:
- ఏ లైన్ (24)లో బగ్ ఉందో మనం ట్రేస్ చేయవచ్చు
- అదనంగా, బ్రెడ్‌క్రంబ్ ట్రైల్ లోపానికి దారితీసిన బ్రౌజర్ చర్యలను ప్రదర్శిస్తుంది.
పట్టుకోని బగ్‌లు ఎలా ప్రదర్శించబడతాయి
బటన్ క్లిక్ చేయండి "లోపం".
బగ్ కాల్ స్టాక్‌ను బబుల్ చేస్తుంది మరియు కన్సోల్‌లో దోష సందేశం ప్రదర్శించబడుతుంది. దీని తర్వాత, సెంట్రీ ఎలాంటి అదనపు చర్యలు లేకుండా స్వయంచాలకంగా బగ్‌ను పర్యవేక్షిస్తుంది.
వ్యాఖ్యలు:
- ఏ లైన్‌లో (30) బగ్ పోతుందో మనం చూడవచ్చు
- బ్రెడ్‌క్రంబ్ ట్రైల్ లేదు (నాకు ఎందుకు అర్థం కాలేదు)
ప్రాజెక్ట్ భద్రతను ఎలా నిర్ధారించాలి
మా ప్రాజెక్ట్‌కు ఏ పేజీలు లోపాలను నివేదించవచ్చో మేము నియంత్రించే విధానాన్ని మీరు గమనించి ఉండవచ్చు సెంట్రీ; సహాయంతో dsn రికార్డులు. సమస్య ఏమిటంటే, మీ పేజీ యొక్క సోర్స్ కోడ్‌ని వీక్షించే ఎవరైనా ఇన్‌పుట్‌ని చూడగలరు.
దీన్ని నివారించడానికి, మా ప్రాజెక్ట్‌కు ఎర్రర్ రిపోర్ట్‌లను సమర్పించగల డొమైన్‌ల సంఖ్యను మేము పరిమితం చేయాలి. ఈ ఉదాహరణలో మేము ఉపయోగించాము localhost (స్థానిక హోస్ట్). ఈ ఎంపిక సెట్టింగ్‌ల ట్యాబ్‌లో కాన్ఫిగర్ చేయబడింది సెంట్రీ-ప్రాజెక్ట్, సెంట్రీ ప్రాజెక్ట్ సెట్టింగ్.
విడుదలలు
ఎలా ఉపయోగించాలో మీరు ఆలోచిస్తే సెంట్రీ మా అప్లికేషన్ యొక్క విభిన్న వైవిధ్యాలలో, సంస్కరణ సంఖ్యతో లోపాలను గుర్తించే ఒక రకమైన మెకానిజం అవసరం.
అన్నింటికంటే, మేము పరిష్కరించిన బగ్ మళ్లీ పాపప్ అవ్వకూడదనుకుంటున్నాము మరియు మేము పరిష్కరించినది పని చేయలేదని మేము భావిస్తున్నాము. వినియోగదారు అప్లికేషన్ యొక్క పాత, కాష్ చేసిన సంస్కరణను ప్రారంభించి ఉండవచ్చు.
సమస్యను పరిష్కరించడానికి, మీరు ఐడెంటిఫైయర్‌ను నమోదు చేయాలి విడుదల (వెర్షన్లు) ప్రారంభంలో సెంట్రీ.
vanilla/index.html
...
var RELEASE = '0.1.0';
Sentry.init({
dsn: 'https://[email protected]/1289664',
release: RELEASE,
});
...దీని తర్వాత, అన్ని కొత్త లోపాలుగా గుర్తించబడతాయి విడుదల (0.1.0), అంటే, అవి కోడ్ యొక్క సరైన సంస్కరణతో ముడిపడి ఉంటాయి.
వ్యాఖ్యలు:
- మేము విడుదలలను ఉపయోగించడానికి సులభమైన మార్గాన్ని కనుగొన్నాము
- సెంట్రీ మీరు మరింత ఉపయోగించడానికి అనుమతిస్తుంది , ఇది దగ్గరి సంబంధం కలిగి ఉంటుంది గ్యాలరీలు. ఈ ఫంక్షన్ నిర్దిష్ట కార్యకలాపాలను నిర్వహించడానికి ముందు బగ్‌లను ట్రాక్ చేయడం సాధ్యం చేస్తుంది.
PS రెండవ భాగం పొడవుగా ఉంది, కాబట్టి ఇది ప్రత్యేక పోస్ట్‌లో ఉంటుంది.
PS టెలిగ్రామ్ చాట్ సెంట్రీ
PS ఇది పోస్ట్ యొక్క అనువాదం అని సూచించడం మర్చిపోయాను
మూలం: www.habr.com