ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ನೈಜ-ಸಮಯದ ದೋಷ ಟ್ರ್ಯಾಕಿಂಗ್ ಬಗ್ಗೆ ಇಂದು ನಾನು ನಿಮಗೆ ಹೇಳುತ್ತೇನೆ. ದೋಷ ಟ್ರ್ಯಾಕಿಂಗ್ಗಾಗಿ ಫ್ರಂಟ್-ಎಂಡ್ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಸಾಮಾನ್ಯವಾಗಿ ಬಳಸಲಾಗುವುದಿಲ್ಲ. ಕೆಲವು ಕಂಪನಿಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಬಗ್ ಟ್ರ್ಯಾಕಿಂಗ್ ಅನ್ನು ಮುಂದೂಡುತ್ತವೆ, ದಾಖಲಾತಿ, ಪರೀಕ್ಷೆಗಳು ಇತ್ಯಾದಿಗಳ ನಂತರ ಅದಕ್ಕೆ ಹಿಂತಿರುಗುತ್ತವೆ. ಆದಾಗ್ಯೂ, ನಿಮ್ಮ ಉತ್ಪನ್ನವನ್ನು ನೀವು ಉತ್ತಮವಾಗಿ ಬದಲಾಯಿಸಬಹುದಾದರೆ, ಅದನ್ನು ಮಾಡಿ!
1. ನಿಮಗೆ ಸೆಂಟ್ರಿ ಏಕೆ ಬೇಕು?
ಉತ್ಪಾದನೆಯ ಸಮಯದಲ್ಲಿ ದೋಷಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಲು ನೀವು ಆಸಕ್ತಿ ಹೊಂದಿದ್ದೀರಿ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ
ಇದು ಸಾಕಾಗುವುದಿಲ್ಲ ಎಂದು ನೀವು ಭಾವಿಸುತ್ತೀರಾ?
ಸರಿ, ವಿವರಗಳನ್ನು ನೋಡೋಣ.
ಡೆವಲಪರ್ಗಳು ಸೆಂಟ್ರಿಯನ್ನು ಬಳಸಲು ಪ್ರಮುಖ ಕಾರಣಗಳು:
- ದೋಷಗಳೊಂದಿಗೆ ಕೋಡ್ ಅನ್ನು ನಿಯೋಜಿಸುವಾಗ ಅಪಾಯಗಳನ್ನು ತಪ್ಪಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ
- ಕೋಡ್ ಪರೀಕ್ಷೆಯೊಂದಿಗೆ QA ಗೆ ಸಹಾಯ ಮಾಡಿ
- ಸಮಸ್ಯೆಗಳ ಕುರಿತು ತ್ವರಿತ ಅಧಿಸೂಚನೆಗಳನ್ನು ಸ್ವೀಕರಿಸಿ
- ದೋಷಗಳನ್ನು ತ್ವರಿತವಾಗಿ ಸರಿಪಡಿಸುವ ಸಾಮರ್ಥ್ಯ
- ನಿರ್ವಾಹಕ ಫಲಕದಲ್ಲಿ ದೋಷಗಳ ಅನುಕೂಲಕರ ಪ್ರದರ್ಶನವನ್ನು ಪಡೆಯುವುದು
- ಬಳಕೆದಾರ/ಬ್ರೌಸರ್ ವಿಭಾಗದಿಂದ ದೋಷಗಳನ್ನು ವಿಂಗಡಿಸಿ
CEO/ಲೀಡ್ ಪ್ರಾಜೆಕ್ಟ್ಗೆ ಮುಖ್ಯ ಕಾರಣಗಳು
- ಹಣವನ್ನು ಉಳಿಸಿ (ಸೆಂಟ್ರಿಯನ್ನು ನಿಮ್ಮ ಸರ್ವರ್ಗಳಲ್ಲಿ ಸ್ಥಾಪಿಸಬಹುದು)
- ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯಲಾಗುತ್ತಿದೆ
- ನೈಜ ಸಮಯದಲ್ಲಿ ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ಏನು ತಪ್ಪಾಗಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
- ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನೊಂದಿಗೆ ಜನರು ಹೊಂದಿರುವ ಸಮಸ್ಯೆಗಳ ಸಂಖ್ಯೆಯನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳುವುದು
- ನಿಮ್ಮ ಡೆವಲಪರ್ಗಳು ತಪ್ಪು ಮಾಡಿದ ಸ್ಥಳಗಳನ್ನು ಹುಡುಕಲು ನಿಮಗೆ ಸಹಾಯ ಮಾಡಿ
ಅಭಿವರ್ಧಕರು ಮೊದಲು ಈ ಲೇಖನದಲ್ಲಿ ಆಸಕ್ತಿ ಹೊಂದಿರುತ್ತಾರೆ ಎಂದು ನಾನು ಭಾವಿಸುತ್ತೇನೆ. ಸೆಂಟ್ರಿಯನ್ನು ಸಂಯೋಜಿಸಲು ನಿಮ್ಮ ಬಾಸ್ಗೆ ಮನವರಿಕೆ ಮಾಡಲು ನೀವು ಈ ಕಾರಣಗಳ ಪಟ್ಟಿಯನ್ನು ಸಹ ಬಳಸಬಹುದು.
ವ್ಯಾಪಾರ ಪಟ್ಟಿಯಲ್ಲಿರುವ ಕೊನೆಯ ಐಟಂನೊಂದಿಗೆ ಜಾಗರೂಕರಾಗಿರಿ.
ನೀವು ಈಗಾಗಲೇ ಆಸಕ್ತಿ ಹೊಂದಿದ್ದೀರಾ?
ಸೆಂಟ್ರಿ ಎಂದರೇನು?
ಸೆಂಟ್ರಿ ಎಂಬುದು ಓಪನ್ ಸೋರ್ಸ್ ಬಗ್ ಟ್ರ್ಯಾಕಿಂಗ್ ಅಪ್ಲಿಕೇಶನ್ ಆಗಿದ್ದು ಅದು ಡೆವಲಪರ್ಗಳಿಗೆ ನೈಜ ಸಮಯದಲ್ಲಿ ಕ್ರ್ಯಾಶ್ಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ. ದಕ್ಷತೆಯನ್ನು ಹೆಚ್ಚಿಸಲು ಮತ್ತು ಬಳಕೆದಾರರ ಅನುಭವವನ್ನು ಸುಧಾರಿಸಲು ಅಪ್ಲಿಕೇಶನ್ ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ ಎಂಬುದನ್ನು ಮರೆಯಬೇಡಿ. ಸೆಂಟ್ರಿ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್, ನೋಡ್, ಪೈಥಾನ್, ಪಿಎಚ್ಪಿ, ರೂಬಿ, ಜಾವಾ ಮತ್ತು ಇತರ ಪ್ರೋಗ್ರಾಮಿಂಗ್ ಭಾಷೆಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ.
2. ಲಾಗಿನ್ ಮಾಡಿ ಮತ್ತು ಯೋಜನೆಯನ್ನು ರಚಿಸಿ
- ನಿಮ್ಮ ಸೆಂಟ್ರಿ ಖಾತೆಯನ್ನು ತೆರೆಯಿರಿ. ನೀವು ಲಾಗ್ ಇನ್ ಮಾಡಬೇಕಾಗಬಹುದು. (ನಿಮ್ಮ ಸರ್ವರ್ಗಳಲ್ಲಿ ಸೆಂಟ್ರಿಯನ್ನು ಸ್ಥಾಪಿಸಬಹುದು ಎಂಬುದನ್ನು ದಯವಿಟ್ಟು ಗಮನಿಸಿ)
- ಮುಂದಿನ ಹಂತವು ಯೋಜನೆಯನ್ನು ರಚಿಸುವುದು
- ಪಟ್ಟಿಯಿಂದ ನಿಮ್ಮ ಭಾಷೆಯನ್ನು ಆಯ್ಕೆಮಾಡಿ. (ನಾವು ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಆಯ್ಕೆ ಮಾಡಲಿದ್ದೇವೆ. "ಪ್ರಾಜೆಕ್ಟ್ ರಚಿಸಿ" ಕ್ಲಿಕ್ ಮಾಡಿ)
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಿ. ಕಂಟೇನರ್ಗೆ ಸೆಂಟ್ರಿಯನ್ನು ಹೇಗೆ ಸಂಯೋಜಿಸುವುದು ಎಂಬುದರ ಮೂಲ ಉದಾಹರಣೆಯನ್ನು ಕೆಳಗೆ ನೋಡಬಹುದು:
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;
}
}
}
ನೀವು ಮುಂದೆ ಏನು ಮಾಡಬೇಕೆಂದು ಲೆಕ್ಕಾಚಾರ ಮಾಡಲು ಸಹಾಯ ಮಾಡಲು ಸೆಂಟ್ರಿಯು ಸಹಾಯಕವಾದ ವಿಝಾರ್ಡ್ ಅನ್ನು ಹೊಂದಿದೆ. ನೀವು ಈ ಹಂತಗಳನ್ನು ಅನುಸರಿಸಬಹುದು. ನಿಮ್ಮ ಮೊದಲ ದೋಷ ಹ್ಯಾಂಡ್ಲರ್ ಅನ್ನು ಹೇಗೆ ರಚಿಸುವುದು ಎಂದು ನಾನು ನಿಮಗೆ ತೋರಿಸಲು ಬಯಸುತ್ತೇನೆ. ಅದ್ಭುತವಾಗಿದೆ, ನಾವು ಯೋಜನೆಯನ್ನು ರಚಿಸಿದ್ದೇವೆ! ಮುಂದಿನ ಹಂತಕ್ಕೆ ಹೋಗೋಣ
3. ರಿಯಾಕ್ಟ್ ಮತ್ತು ಸೆಂಟ್ರಿ ಏಕೀಕರಣ
ನಿಮ್ಮ ಯೋಜನೆಯಲ್ಲಿ ನೀವು npm ಪ್ಯಾಕೇಜ್ ಅನ್ನು ಸ್ಥಾಪಿಸಬೇಕು.
npm i @sentry/browser
ನಿಮ್ಮ ಕಂಟೇನರ್ನಲ್ಲಿ ಸೆಂಟ್ರಿಯನ್ನು ಆರಂಭಿಸಿ:
Sentry.init({
// dsn: #dsnUrl,
});
DSN ಯೋಜನೆಗಳು -> ಸೆಟ್ಟಿಂಗ್ಗಳು -> ಕ್ಲೈಂಟ್ ಕೀಗಳಲ್ಲಿ ನೆಲೆಗೊಂಡಿದೆ. ಹುಡುಕಾಟ ಪಟ್ಟಿಯಲ್ಲಿ ನೀವು ಕ್ಲೈಂಟ್ ಕೀಗಳನ್ನು ಕಾಣಬಹುದು.
componentDidCatch(error, errorInfo) {
Sentry.withScope(scope => {
Object.keys(errorInfo).forEach(key => {
scope.setExtra(key, errorInfo[key]);
});
Sentry.captureException(error);
});
}
4. ಮೊದಲ ದೋಷವನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡುವುದು
ಉದಾಹರಣೆಗೆ, ನಾನು Deezer API ನೊಂದಿಗೆ ಸರಳ ಸಂಗೀತ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ಬಳಸಿದ್ದೇನೆ. ನೀವು ಅದನ್ನು ನೋಡಬಹುದು
ನಾವು ಕರೆ ಮಾಡುವ ಬಟನ್ ಅನ್ನು ರಚಿಸಬೇಕಾಗಿದೆ console.log с user.email. ಈ ಕ್ರಿಯೆಯ ನಂತರ ನಾವು ದೋಷ ಸಂದೇಶವನ್ನು ಸ್ವೀಕರಿಸಬೇಕು: ಅನ್ಕ್ಯಾಟ್ ಟೈಪ್ಎರರ್ (ನಿರ್ದಿಷ್ಟದಿಂದ ಆಸ್ತಿಯನ್ನು ಓದಲಾಗುವುದಿಲ್ಲ email
) ಬಳಕೆದಾರರ ವಸ್ತು ಕಾಣೆಯಾದ ಕಾರಣ. ನೀವು ಸಹ ಬಳಸಬಹುದು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿನಾಯಿತಿ.
<button type="button" onClick={() => console.log(user.email)}>
Test Error button
</button>
ಸಂಪೂರ್ಣ ಕಂಟೇನರ್ ಈ ರೀತಿ ಕಾಣುತ್ತದೆ:
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);
ಈ ಬಟನ್ ಅನ್ನು ಸಂಯೋಜಿಸಿದ ನಂತರ, ನೀವು ಅದನ್ನು ಬ್ರೌಸರ್ನಲ್ಲಿ ಪರೀಕ್ಷಿಸಬೇಕು.
ನಾವು ನಮ್ಮ ಮೊದಲ ದೋಷವನ್ನು ಹೊಂದಿದ್ದೇವೆ
ಹೂ-ಹೂ!
ನೀವು ಹೆಡರ್ ದೋಷದ ಮೇಲೆ ಕ್ಲಿಕ್ ಮಾಡಿದರೆ, ನೀವು ಸ್ಟಾಕ್ ಟ್ರೇಸ್ ಅನ್ನು ನೋಡುತ್ತೀರಿ.
ಸಂದೇಶಗಳು ಕೆಟ್ಟದಾಗಿ ಕಾಣುತ್ತವೆ. ಕೋಡ್ ಎಲ್ಲಿದೆ ಎಂಬುದನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳದೆ ದೋಷ ಸಂದೇಶಗಳನ್ನು ನಾವು ನೋಡಿದ್ದೇವೆ. ಪೂರ್ವನಿಯೋಜಿತವಾಗಿ ನಾವು ReactJS ನಲ್ಲಿ ಮೂಲ ನಕ್ಷೆಯ ಬಗ್ಗೆ ಮಾತನಾಡುತ್ತಿದ್ದೇವೆ ಏಕೆಂದರೆ ಅವುಗಳನ್ನು ಕಾನ್ಫಿಗರ್ ಮಾಡಲಾಗಿಲ್ಲ.
ನಾನು ಮೂಲ ನಕ್ಷೆಯನ್ನು ಹೊಂದಿಸಲು ಸೂಚನೆಗಳನ್ನು ನೀಡಲು ಬಯಸುತ್ತೇನೆ, ಆದರೆ ಅದು ಈ ಲೇಖನವನ್ನು ನಾನು ಉದ್ದೇಶಿಸಿದ್ದಕ್ಕಿಂತ ಹೆಚ್ಚು ಉದ್ದವಾಗಿಸುತ್ತದೆ.
ನೀವು ಈ ವಿಷಯವನ್ನು ಅಧ್ಯಯನ ಮಾಡಬಹುದು
5. ಬಳಕೆ ಸೆಂಟ್ರಿ ಅಂತಿಮ ಬಿಂದುವಿನೊಂದಿಗೆ ಎಪಿಐ
ಸರಿ. ಹಿಂದಿನ ಪ್ಯಾರಾಗಳಲ್ಲಿ ನಾವು ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ವಿನಾಯಿತಿಯನ್ನು ಒಳಗೊಂಡಿದ್ದೇವೆ. ಆದಾಗ್ಯೂ, XHR ದೋಷಗಳ ಬಗ್ಗೆ ನಾವು ಏನು ಮಾಡುತ್ತೇವೆ?
ಸೆಂಟ್ರಿಯು ಕಸ್ಟಮ್ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಸಹ ಹೊಂದಿದೆ. API ದೋಷಗಳನ್ನು ಟ್ರ್ಯಾಕ್ ಮಾಡಲು ನಾನು ಅದನ್ನು ಬಳಸಿದ್ದೇನೆ.
Sentry.captureException(err)
ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್, ಇಮೇಲ್ ಇತ್ಯಾದಿಗಳನ್ನು ಬಳಸಿಕೊಂಡು ನೀವು ದೋಷದ ಹೆಸರು, ಮಟ್ಟ, ಡೇಟಾವನ್ನು ಸೇರಿಸುವುದು, ಅನನ್ಯ ಬಳಕೆದಾರ ಡೇಟಾವನ್ನು ಗ್ರಾಹಕೀಯಗೊಳಿಸಬಹುದು.
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));
}
});
ಕ್ಯಾಚ್ API ಗಾಗಿ ನಾನು ಸಾಮಾನ್ಯ ಕಾರ್ಯವನ್ನು ಬಳಸಲು ಬಯಸುತ್ತೇನೆ.
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);
};
ನಿಮ್ಮ API ಕರೆಯಲ್ಲಿ ಈ ಕಾರ್ಯವನ್ನು ಆಮದು ಮಾಡಿ.
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));
}
});
};
ವಿಧಾನಗಳನ್ನು ಪರಿಶೀಲಿಸೋಣ:
- ಸೆಟ್ ಮಟ್ಟ ಸೆಂಟ್ರಿ ಡ್ಯಾಶ್ಬೋರ್ಡ್ಗೆ ಮಟ್ಟದ ದೋಷವನ್ನು ಸೇರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಇದು ಗುಣಲಕ್ಷಣಗಳನ್ನು ಹೊಂದಿದೆ - 'ಮಾರಣಾಂತಿಕ', 'ದೋಷ', 'ಎಚ್ಚರಿಕೆ', 'ಲಾಗ್', 'ಮಾಹಿತಿ, 'ಡೀಬಗ್', 'ನಿರ್ಣಾಯಕ').
- ಸೆಟ್ ಬಳಕೆದಾರ ಯಾವುದೇ ಬಳಕೆದಾರ ಡೇಟಾವನ್ನು (ಐಡಿ, ಇಮೇಲ್ ವಿಳಾಸ, ಪಾವತಿ ಯೋಜನೆ, ಇತ್ಯಾದಿ) ಉಳಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ಹೆಚ್ಚುವರಿ ನಿಮಗೆ ಅಗತ್ಯವಿರುವ ಯಾವುದೇ ಡೇಟಾವನ್ನು ನಿರ್ದಿಷ್ಟಪಡಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ, ಉದಾಹರಣೆಗೆ, ಸಂಗ್ರಹಿಸಿ.
ನೀವು ದೋಷದ ಕುರಿತು ಬಳಕೆದಾರರ ಪ್ರತಿಕ್ರಿಯೆಯನ್ನು ಪಡೆಯಲು ಬಯಸಿದರೆ, ನೀವು showReportDialog ಕಾರ್ಯವನ್ನು ಬಳಸಬೇಕು.
Sentry.showReportDialog();
ತೀರ್ಮಾನ:
ಇಂದು ನಾವು ಸೆಂಟ್ರಿಯನ್ನು ರಿಯಾಕ್ಟ್ ಅಪ್ಲಿಕೇಶನ್ಗೆ ಸಂಯೋಜಿಸುವ ಒಂದು ಮಾರ್ಗವನ್ನು ವಿವರಿಸಿದ್ದೇವೆ.
→ ಟೆಲಿಗ್ರಾಮ್ ಚಾಟ್ ಮೂಲಕ
ಮೂಲ: www.habr.com