рдЖрдореНрд╣реА Sentry with React рд╡рд╛рдкрд░реВрди рдПрдХреНрд╕рдкреНрд▓реЛрд░ рдХрд░рдд рдЖрд╣реЛрдд.
рд╣рд╛ рд▓реЗрдЦ рдЙрджрд╛рд╣рд░рдгрд╛рдЪрд╛ рд╡рд╛рдкрд░ рдХрд░реВрди рд╕реЗрдВрдЯреНрд░реАрдЪреНрдпрд╛ рдЪреБрдХрд╛ рдиреЛрдВрджрд╡рдгреНрдпрд╛рдкрд╛рд╕реВрди рд╕реБрд░реВ рд╣реЛрдгрд╛рд▒реНрдпрд╛ рдорд╛рд▓рд┐рдХреЗрдЪрд╛ рднрд╛рдЧ рдЖрд╣реЗ:
рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдЕрдВрдорд▓рдмрдЬрд╛рд╡рдгреА
рдкреНрд░рдердо рдЖрдореНрд╣рд╛рд▓рд╛ рдпрд╛ рдЕрдиреБрдкреНрд░рдпреЛрдЧрд╛рд╕рд╛рдареА рдПрдХ рдирд╡реАрди рд╕реЗрдВрдЯрд░реА рдкреНрд░рдХрд▓реНрдк рдЬреЛрдбрдгреНрдпрд╛рдЪреА рдЖрд╡рд╢реНрдпрдХрддрд╛ рдЖрд╣реЗ; рд╕реЗрдиреНрдЯреНрд░реА рд╡реЗрдмрд╕рд╛рдЗрдЯрд╡рд░реВрди. рдпрд╛ рдкреНрд░рдХрд░рдгрд╛рдд рдЖрдореНрд╣реА рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рдирд┐рд╡рдбрддреЛ.
рдЖрдореНрд╣реА рдЖрдордЪреА рджреЛрди рдмрдЯрдгреЗ, рд╣реЕрд▓реЛ рдЖрдгрд┐ рдПрд░рд░, рд░рд┐рдЕреЕрдХреНрдЯрд╕рд╣ рдЕреЕрдкреНрд▓рд┐рдХреЗрд╢рдирдордзреНрдпреЗ рдкреБрдиреНрд╣рд╛ рд▓рд╛рдЧреВ рдХрд░реВ. рдЖрдореНрд╣реА рдЖрдордЪреЗ рд╕реНрдЯрд╛рд░реНрдЯрд░ рдНрдкреНрд▓рд┐рдХреЗрд╢рди рддрдпрд╛рд░ рдХрд░реВрди рд╕реБрд░реБрд╡рд╛рдд рдХрд░рддреЛ:
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 рдордзреНрдпреЗ рдмрджрд▓ рдкреБрд╢ рдХрд░рд╛
рд╢реЗрд░рд╛: рдорд▓рд╛ рдХрд╛рдп рд╡рд╛рдкрд░рд╛рдпрдЪреЗ рдЖрд╣реЗ рд╣реЗ рд╕рдордЬрд▓реНрдпрд╛рдирдВрддрд░ рддрдпрд╛рд░ рдХрд░рд╛-рдЕтАНреЕрдк рддрдпрд╛рд░ рдХрд░рд╛ рдНрдкреНрд▓рд┐рдХреЗрд╢рди рд▓реЙрдиреНрдЪ рдХрд░рдгреНрдпрд╛рд╕рд╛рдареА рд╣реЛрдо рдкреЗрдЬ рдлрдВрдХреНрд╢рди. package.json рдордзреНрдпреЗ рдЦрд╛рд▓реАрд▓ рдЬреЛрдбрдгреНрдпрд╛рд╕рд╛рдареА рдЦрд╛рд▓реА рдЖрд▓реЗ:
"homepage": "https://larkintuckerllc.github.io/hello-sentry/"
рдЪрд╛рд▓реВ рдЕрд╕рд▓реЗрд▓реНрдпрд╛ рдЕрдиреБрдкреНрд░рдпреЛрдЧрд╛рдЪреА рдЕрдВрддрд┐рдо рдЖрд╡реГрддреНрддреА рдпреЗрдереЗ рдЙрдкрд▓рдмреНрдз рдЖрд╣реЗ:
рдкрдХрдбрд▓реЗрд▓реНрдпрд╛ рдмрдЧреНрд╕рдЪреЗ рдЪрд┐рддреНрд░рдг
рд╣реЕрд▓реЛ рдмрдЯрдгрд╛рд╡рд░ рдХреНрд▓рд┐рдХ рдХрд░реВрди рдЪрд▓рд╛.
рдпрд╛рд╕рд╛рд░рдЦреЗ рджрд┐рд╕рдгрд╛рд░реНтАНрдпрд╛ рддреНрд░реБрдЯреАрд╕рд╣:
рдирд┐рд░реАрдХреНрд╖рдгреЗ:
- рд╣рд╛ рджреЛрд╖ рдЕрд╣рд╡рд╛рд▓ рдЕрдзрд┐рдХ рд╕реНрдкрд╖реНрдЯ рд╣реЛрдК рд╢рдХрд▓рд╛ рдирд╛рд╣реА, рдмреНрд░рд╛рд╡реЛ.
рддреНрд░реБрдЯреАрдВрд╕рд╛рдареА рдмреЗрд╣рд┐рд╢реЗрдмреАрдЪреЗ рдЙрджрд╛рд╣рд░рдг
рддреНрдпрд╛рдЪрдкреНрд░рдорд╛рдгреЗ, рдмрдЯрдг рдХреНрд▓рд┐рдХ рдХрд░реВрди рдЬрд╛рдК рдпрд╛ рддреНрд░реБрдЯреА.
рдпрд╛рд╕рд╛рд░рдЦреЗ рджрд┐рд╕рдгрд╛рд░реНтАНрдпрд╛ рддреНрд░реБрдЯреАрд╕рд╣:
рдмреЗрд╣рд┐рд╢реЗрдмреА рддреНрд░реБрдЯреАрдВрдЪреА рдЙрддреНрддрдо рд╣рд╛рддрд╛рд│рдгреА (рд░реЗрдВрдбрд░рд┐рдВрдЧ)
рддреНрд░реБрдЯреА рдорд░реНрдпрд╛рджрд╛ рдкрд░рд┐рдЪрдп
рд╡рд╛рдкрд░рдХрд░реНрддрд╛ рдЗрдВрдЯрд░рдлреЗрд╕рдЪреНрдпрд╛ рдХрд╛рд╣реА рднрд╛рдЧрд╛рдордзреНрдпреЗ JavaScript рддреНрд░реБрдЯреАрдореБрд│реЗ рд╕рдВрдкреВрд░реНрдг рдЕрдиреБрдкреНрд░рдпреЛрдЧ рдЦрдВрдбрд┐рдд рд╣реЛрдК рдирдпреЗ. рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ рд╡рд╛рдкрд░рдХрд░реНрддреНрдпрд╛рдВрд╕рд╛рдареА рдпрд╛ рд╕рдорд╕реНрдпреЗрдЪреЗ рдирд┐рд░рд╛рдХрд░рдг рдХрд░рдгреНрдпрд╛рд╕рд╛рдареА, рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ 16 рдиреЗ "рдПрд░рд░ рдмрд╛рдЙрдВрдб" рдирд╛рд╡рд╛рдЪреА рдирд╡реАрди рд╕рдВрдХрд▓реНрдкрдирд╛ рд╕рд╛рджрд░ рдХреЗрд▓реА рдЖрд╣реЗ.
рдПрд░рд░ рдмрд╛рдЙрдВрдбрд░реАрдЬ рд╣реЗ рд░рд┐рдЕреЕрдХреНрдЯ рдШрдЯрдХ рдЖрд╣реЗрдд рдЬреЗ рддреНрдпрд╛рдВрдЪреНрдпрд╛ рдЪрд╛рдЗрд▓реНрдб рдХрдВрдкреЛрдирдВрдЯ рдЯреНрд░реАрдордзреНрдпреЗ рдХреБрдареЗрд╣реА JavaScript рдПрд░рд░ рдкрдХрдбрддрд╛рдд, рддреНрдпрд╛ рдПрд░рд░ рд▓реЙрдЧ рдХрд░рддрд╛рдд рдЖрдгрд┐ рдХреНрд░реЕрд╢ рдЭрд╛рд▓реЗрд▓реНрдпрд╛ рдШрдЯрдХ рдЯреНрд░реАрдРрд╡рдЬреА рдлреЙрд▓рдмреЕрдХ UI рд░реЗрдВрдбрд░ рдХрд░рддрд╛рдд. рдПрд░рд░ рдмрд╛рдЙрдВрдбрд░реАрдЬ рд░реЗрдВрдбрд░рд┐рдВрдЧ рджрд░рдореНрдпрд╛рди, рд▓рд╛рдЗрдлрд╕рд╛рдпрдХрд▓ рдкрджреНрдзрддреАрдВрдордзреНрдпреЗ рдЖрдгрд┐ рддреНрдпрд╛рдВрдЪреНрдпрд╛ рдЦрд╛рд▓реА рдЕрд╕рд▓реЗрд▓реНрдпрд╛ рд╕рдВрдкреВрд░реНрдг рдЭрд╛рдбрд╛рдЪреНрдпрд╛ рдХрдиреНрд╕реНрдЯреНрд░рдХреНрдЯрд░рдордзреНрдпреЗ рддреНрд░реБрдЯреА рдкрдХрдбрддрд╛рдд.
...
рди рд╕рд╛рдкрдбрд▓реЗрд▓реНрдпрд╛ рддреНрд░реБрдЯреАрдВрд╕рд╛рдареА рдирд╡реАрди рд╡рд░реНрддрди
рд╣рд╛ рдмрджрд▓ рд▓рдХреНрд╖рдгреАрдп рдЖрд╣реЗ. React 16 рдиреБрд╕рд╛рд░, рдХреЛрдгрддреНрдпрд╛рд╣реА рддреНрд░реБрдЯреА рд╕реАрдорд╛рд░реЗрд╖реЗрдиреЗ рдкрдХрдбрд▓реЗрд▓реНрдпрд╛ рддреНрд░реБрдЯреАрдВрдореБрд│реЗ рд╕рдВрдкреВрд░реНрдг React рдШрдЯрдХ рдЯреНрд░реА рдЕрдирдорд╛рдЙрдВрдЯ рдХреЗрд▓реА рдЬрд╛рдИрд▓.
- рдбреЕрди рдЕрдмреНрд░рд╛рдореЛрд╡реНрд╣ -
рдкреНрд░рддрд┐рдХреНрд░рд┐рдпрд╛ 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 рдкреНрд░рджрд░реНрд╢рд┐рдд рд╣реЛрддреЗ рдЖрдгрд┐ рд╕реЗрдиреНрдЯреНрд░реАрд▓рд╛ рддреНрд░реБрдЯреА рдХрд│рд╡рддреЗ.
рдкреВрд░реНрдг рдХрд░рдгреЗ
рдорд▓рд╛ рдЖрд╢рд╛ рдЖрд╣реЗ рдХреА рддреБрдореНрд╣рд╛рд▓рд╛ рд╣реЗ рдЙрдкрдпреБрдХреНрдд рд╡рд╛рдЯрд▓реЗ.
рд╕реЗрдВрдЯреНрд░реА рджреНрд╡рд╛рд░реЗ рдкреАрдПрд╕ рдЯреЗрд▓реАрдЧреНрд░рд╛рдо рдЪреЕрдЯ
рд╕реНрддреНрд░реЛрдд: www.habr.com