เช เชฎเซ เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ เชธเชพเชฅเซ Sentry เชจเซ เชเชชเชฏเซเช เชเชฐเซเชจเซ เช เชจเซเชตเซเชทเชฃ เชเชฐเซ เชฐเชนเซเชฏเชพเช เชเซเช.
เช เชฒเซเช เชเชฆเชพเชนเชฐเชฃเชจเซ เชเชชเชฏเซเช เชเชฐเซเชจเซ เชธเชเชคเซเชฐเซเชจเซ เชญเซเชฒเซเชจเซ เชเชพเชฃ เชเชฐเชตเชพ เชธเชพเชฅเซ เชถเชฐเซ เชฅเชคเซ เชถเซเชฐเซเชฃเซเชจเซ เชเช เชญเชพเช เชเซ:
เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ เช เชฎเชฒเซเชเชฐเชฃ
เชชเซเชฐเชฅเชฎ เชเชชเชฃเซ เช เชเชชเซเชฒเชฟเชเซเชถเชจ เชฎเชพเชเซ เชเช เชจเชตเซ เชธเซเชจเซเชเซเชฐเซ เชชเซเชฐเซเชเซเชเซเช เชเชฎเซเชฐเชตเชพเชจเซ เชเชฐเซเชฐ เชเซ; เชธเชเชคเซเชฐเซ เชตเซเชฌเชธเชพเชเช เชชเชฐเชฅเซ. เช เชเชฟเชธเซเชธเชพเชฎเชพเช เช เชฎเซ เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ เชชเชธเชเชฆ เชเชฐเซเช เชเซเช.
เช เชฎเซ เช เชฎเชพเชฐเชพ เชฌเซ เชฌเชเชจเซ, เชนเซเชฒเซ เช เชจเซ เชเชฐเชฐ, เชฐเชฟเชเชเซเช เชธเชพเชฅเซเชจเซ เชเชชเซเชฒเชฟเชเซเชถเชจเชฎเชพเช เชซเชฐเซเชฅเซ เช เชฎเชฒเชฎเชพเช เชฎเซเชเซเชถเซเช. เช เชฎเซ เช เชฎเชพเชฐเซ เชธเซเชเชพเชฐเซเชเชฐ เชเชชเซเชฒเชฟเชเซเชถเชจ เชฌเชจเชพเชตเซเชจเซ เชชเซเชฐเชพเชฐเชเชญ เชเชฐเซเช เชเซเช:
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 เชฎเชพเช เชซเซเชฐเชซเชพเชฐเซเชจเซ เชฆเชฌเชพเชฃ เชเชฐเซ
เชจเซเชเชงเชฃเซ: เชฎเชพเชฐเซ เชถเซเช เชตเชพเชชเชฐเชตเชพเชจเซ เชเชฐเซเชฐ เชเซ เชคเซ เชธเชฎเชเซเชฏเชพ เชชเชเซ เชฌเชจเชพเชตเซ-เชฌเชจเชพเชตเซ-เชเชช เชเชชเซเชฒเชฟเชเซเชถเชจ เชถเชฐเซ เชเชฐเชตเชพ เชฎเชพเชเซ เชนเซเชฎ เชชเซเช เชซเชเชเซเชถเชจ. เชชเซเชเซเช.เชเซเชธเชจเชฎเชพเช เชจเซเชเซเชจเชพ เชเชฎเซเชฐเชตเชพ เชฎเชพเชเซ เชจเซเชเซ เชเชตเซเชฏเชพ:
"homepage": "https://larkintuckerllc.github.io/hello-sentry/"
เชเชพเชฒเซ เชฐเชนเซเชฒ เชเชชเซเชฒเชฟเชเซเชถเชจเชจเซเช เช เชเชคเชฟเชฎ เชธเชเชธเซเชเชฐเชฃ เช เชนเซเช เชเชชเชฒเชฌเซเชง เชเซ:
เชชเชเชกเชพเชฏเซเชฒ เชฌเชเซเชธเชจเซเช เชเชฟเชคเซเชฐเชฃ
เชเชพเชฒเซ เชนเซเชฒเซ เชฌเชเชจ เชชเชฐ เชเซเชฒเชฟเช เชเชฐเซเชจเซ เชเชเชณ เชตเชงเซเช.
เชเชจเซ เชเซเชฎ เชฆเซเชเชพเชคเซ เชญเซเชฒ เชธเชพเชฅเซ:
เช เชตเชฒเซเชเชจเซ:
- เช เชฌเช เชฐเชฟเชชเซเชฐเซเช เชธเซเชชเชทเซเช เชฅเช เชถเชเซเชฏเซ เชจเชฅเซ, BRAVO.
เชญเซเชฒเซ เชฎเชพเชเซ เชฌเชฟเชจเชนเชฟเชธเชพเชฌเซเชจเซเช เชเชฟเชคเซเชฐ
เชคเซเชตเซ เช เชฐเซเชคเซ, เชเชพเชฒเซ เชฌเชเชจ เชเซเชฒเชฟเช เชเชฐเซเชจเซ เชเชเช เชญเซเชฒ.
เชเชจเซ เชเซเชฎ เชฆเซเชเชพเชคเซ เชญเซเชฒ เชธเชพเชฅเซ:
เชฌเชฟเชจเชนเชฟเชธเชพเชฌเซ เชญเซเชฒเซเชจเซเช เชฌเชนเซเชคเชฐ เชธเชเชเชพเชฒเชจ (เชฐเซเชจเซเชกเชฐเซเชเช)
เชญเซเชฒ เชฎเชฐเซเชฏเชพเชฆเชพเชจเซ เชชเชฐเชฟเชเชฏ
เชตเชชเชฐเชพเชถเชเชฐเซเชคเชพ เชเชจเซเชเชฐเชซเซเชธเชจเชพ เชญเชพเชเชฎเชพเช JavaScript เชญเซเชฒ เชธเชฎเชเซเชฐ เชเชชเซเชฒเชฟเชเซเชถเชจเชจเซ เชคเซเชกเซ เชจ เชถเชเซ. React เชฏเซเชเชฐเซเชธ เชฎเชพเชเซ เช เชธเชฎเชธเซเชฏเชพเชจเซ เชเชเซเชฒเชตเชพ เชฎเชพเชเซ, React 16 "เชเชฐเชฐ เชฌเชพเชเชจเซเชกเซเชธ" เชจเชพเชฎเชจเซ เชจเชตเซ เชเซเชจเซเชธเซเชชเซเช เชฐเชเซ เชเชฐเซ เชเซ.
เชญเซเชฒเชจเซ เชธเซเชฎเชพเช เช เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ เชเชเชเซ เชเซ เชเซ เชคเซเชฎเชจเชพ เชฌเชพเชณ เชเชเช เชตเซเชเซเชทเชฎเชพเช เชเชฎเซ เชคเซเชฏเชพเช JavaScript เชญเซเชฒเซ เชชเชเชกเซ เชเซ, เชคเซ เชญเซเชฒเซเชจเซ เชฒเซเช เชเชฐเซ เชเซ เช เชจเซ เชเซเชฐเซเชถ เชฅเชฏเซเชฒเชพ เชเชเช เชตเซเชเซเชทเชจเซ เชฌเชฆเชฒเซ เชซเซเชฒเชฌเซเช UI เชฐเซเชจเซเชกเชฐ เชเชฐเซ เชเซ. เชญเซเชฒเชจเซ เชธเซเชฎเชพเช เชฐเซเชจเซเชกเชฐเชฟเชเช เชฆเชฐเชฎเชฟเชฏเชพเชจ, เชเซเชตเชจเชเชเซเชฐเชจเซ เชชเชฆเซเชงเชคเชฟเชเชฎเชพเช เช เชจเซ เชคเซเชฎเชจเซ เชจเซเชเซเชจเชพ เชธเชฎเชเซเชฐ เชตเซเชเซเชทเชจเชพ เชเชจเซเชธเซเชเซเชฐเชเซเชเชฐเชฎเชพเช เชญเซเชฒเซ เชชเชเชกเซ เชเซ.
...
เชถเซเชงเชพเชฏเซเชฒ เชญเซเชฒเซ เชฎเชพเชเซ เชจเชตเซเช เชตเชฐเซเชคเชจ
เช เชซเซเชฐเชซเชพเชฐ เชจเซเชเชงเชชเชพเชคเซเชฐ เชเซ. เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ 16 เชฎเซเชเชฌ, เชญเซเชฒเซ เชเซ เชเซ เชเซเชเชชเชฃ เชญเซเชฒ เชธเซเชฎเชพ เชฆเซเชตเชพเชฐเชพ เชชเชเชกเชตเชพเชฎเชพเช เชเชตเซ เชจ เชนเชคเซ เชคเซเชจเชพ เชชเชฐเชฟเชฃเชพเชฎเซ เชธเชฎเชเซเชฐ เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ เชเชเช เชตเซเชเซเชทเชจเซ เช เชจเชฎเชพเชเชจเซเช เชเชฐเชตเชพเชฎเชพเช เชเชตเชถเซ.
- เชกเซเชจ เช เชฌเซเชฐเชพเชฎเซเชต -
เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ 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,
});
}
}
เช เชตเชฒเซเชเชจ:
-
เชเซเชฏเชพเชฐเซ เชคเชฎเซ เชฌเชเชจ เชฆเชฌเชพเชตเซ เชเซ, เชชเซเชฐเชคเชฟเชเซเชฐเชฟเชฏเชพ เชฆเชฐเซเชถเชพเชตเชตเชพเชฎเชพเช เชเชตเชถเซ เชซเซเชฒเซเช.เชฌเชธเซเชเซเชก.เชฌเซเชเชธ, เชเซ เชญเซเชฒ เชเชจเชฐเซเช เชเชฐเซ เชเซ
-
เชญเซเชฒเชจเซ เชธเซเชฎเชพ เชตเชฟเชจเชพ, เชธเชฎเชเซเชฐ เชเชเช เชตเซเชเซเชทเชจเซ เช เชจเชฎเชพเชเชจเซเช เชเชฐเชตเชพเชฎเชพเช เชเชตเชถเซ
เชชเชเซ เช เชฎเซ เช เชฎเชพเชฐเซ เชเชฐเชฐ เชฌเชพเชเชจเซเชกเซเชฐเซ เชเซเชก เชฒเชเซเช เชเซเช (เชจเชตเซ เชเซเชตเชจเชเชเซเชฐ เชชเชฆเซเชงเชคเชฟเชจเซ เชเชชเชฏเซเช เชเชฐเซ เชเซ 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>
);
}
}
...
เชเซ เชเซ, เชฐเซเชจเซเชกเชฐ เชเชฐเชฐ เชฌเชเชจเชจเซ เชเซเชฒเชฟเช เชเชฐเชตเชพเชฅเซ เชซเซเชฒเชฌเซเช UI เชชเซเชฐเชฆเชฐเซเชถเชฟเชค เชฅเชพเชฏ เชเซ เช เชจเซ เชธเซเชจเซเชเซเชฐเซเชจเซ เชญเซเชฒเชจเซ เชเชพเชฃ เชฅเชพเชฏ เชเซ.
เชธเชฎเชพเชชเซเชคเชฟ
เชฎเชจเซ เชเชถเชพ เชเซ เชเซ เชคเชฎเชจเซ เช เชฎเชฆเชฆเชฐเซเชช เชฒเชพเชเซเชฏเซเช.
PS
เชธเชเชคเซเชฐเซ เชฆเซเชตเชพเชฐเชพ เชชเซเชเชธ เชเซเชฒเชฟเชเซเชฐเชพเชฎ เชเซเช
เชธเซเชฐเซเชธ: www.habr.com