റിയാക്റ്റ് ഫ്രണ്ട്‌എൻഡ് ആപ്ലിക്കേഷനുകളിലെ ബഗുകളുടെ സെൻട്രി റിമോട്ട് മോണിറ്ററിംഗ്

സെൻട്രി വിത്ത് റിയാക്ട് ഉപയോഗിച്ച് ഞങ്ങൾ പര്യവേക്ഷണം ചെയ്യുകയാണ്.

ഈ ലേഖനം ഒരു ഉദാഹരണം ഉപയോഗിച്ച് സെൻട്രി പിശകുകൾ റിപ്പോർട്ട് ചെയ്യുന്നതിലൂടെ ആരംഭിക്കുന്ന ഒരു പരമ്പരയുടെ ഭാഗമാണ്: ഭാഗം 1.

പ്രതിപ്രവർത്തനം നടപ്പിലാക്കൽ

ആദ്യം നമ്മൾ ഈ ആപ്ലിക്കേഷനായി ഒരു പുതിയ സെൻട്രി പ്രോജക്റ്റ് ചേർക്കേണ്ടതുണ്ട്; സെൻട്രി വെബ്സൈറ്റിൽ നിന്ന്. ഈ സാഹചര്യത്തിൽ ഞങ്ങൾ 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 പേജ് സേവനം ഉപയോഗിക്കുന്നതിനുള്ള ഒരു ലളിതമായ മറുപടി ബട്ടൺ (സൌജന്യമാണ്). സാധാരണയായി ഉപയോഗിക്കേണ്ട ഘട്ടങ്ങൾ ഇപ്രകാരമാണ്:

1. ഫോൾഡറിലെ ഉള്ളടക്കങ്ങൾ പകർത്തുക പണിയുക ഫോൾഡറിലേക്ക് ഡോക്സ് റിപ്പോസിറ്ററിയുടെ റൂട്ട് ഡയറക്ടറിയിൽ.

2. ഓൺ ചെയ്യുക GitHub പേജുകൾ ഡോക്‌സ് ഫോൾഡർ ഉപയോഗിക്കുന്നതിന് റിപ്പോസിറ്ററിയിൽ (GitHub-ൽ നിന്ന്). യജമാനന് ശാഖകൾ

3. GitHub-ലേക്ക് മാറ്റങ്ങൾ പുഷ് ചെയ്യുക

അഭിപായപ്പെടുക: ഞാൻ എന്താണ് ഉപയോഗിക്കേണ്ടതെന്ന് മനസിലാക്കിയ ശേഷം സൃഷ്ടിക്കുക-സൃഷ്ടിക്കുക-ആപ്പ് ആപ്ലിക്കേഷൻ സമാരംഭിക്കുന്നതിനുള്ള ഹോം പേജ് പ്രവർത്തനം. പാക്കേജ്.json-ലേക്ക് ഇനിപ്പറയുന്നവ ചേർക്കാൻ ഇറങ്ങി:

"homepage": "https://larkintuckerllc.github.io/hello-sentry/"

പ്രവർത്തിക്കുന്ന ആപ്ലിക്കേഷന്റെ അവസാന പതിപ്പ് ഇവിടെ ലഭ്യമാണ്:

https://larkintuckerllc.github.io/hello-sentry/

പിടിക്കപ്പെട്ട ബഗുകളുടെ ചിത്രീകരണം

ഹലോ ബട്ടണിൽ ക്ലിക്ക് ചെയ്ത് നമുക്ക് നടക്കാം.

ഇതുപോലെ ഒരു പിശക് ദൃശ്യമാകുമ്പോൾ:

നിരീക്ഷണങ്ങൾ:

• ഈ ബഗ് റിപ്പോർട്ട് കൂടുതൽ വ്യക്തമാക്കാൻ കഴിഞ്ഞില്ല, ബ്രാവോ.

കണക്കിൽപ്പെടാത്ത പിശകുകളുടെ ചിത്രീകരണം

അതുപോലെ, നമുക്ക് ബട്ടൺ ക്ലിക്കിലൂടെ പോകാം പിശക്.

ഇതുപോലെ ഒരു പിശക് ദൃശ്യമാകുമ്പോൾ:

കണക്കിൽപ്പെടാത്ത പിശകുകൾ മികച്ച രീതിയിൽ കൈകാര്യം ചെയ്യൽ (റെൻഡറിംഗ്)

പിശക് പരിധികളുടെ ആമുഖം

ഉപയോക്തൃ ഇന്റർഫേസിന്റെ ഭാഗത്തുള്ള ഒരു JavaScript പിശക് മുഴുവൻ ആപ്ലിക്കേഷനെയും തകർക്കാൻ പാടില്ല. റിയാക്റ്റ് ഉപയോക്താക്കൾക്കുള്ള ഈ പ്രശ്നം പരിഹരിക്കുന്നതിന്, റിയാക്റ്റ് 16 "പിശക് പരിധികൾ" എന്ന പുതിയ ആശയം അവതരിപ്പിക്കുന്നു.

ചൈൽഡ് കോംപോണന്റ് ട്രീയിൽ എവിടെയും ജാവാസ്ക്രിപ്റ്റ് പിശകുകൾ കണ്ടെത്തുകയും ആ പിശകുകൾ ലോഗ് ചെയ്യുകയും ക്രാഷായ ഘടക ട്രീക്ക് പകരം ഒരു ഫാൾബാക്ക് യുഐ റെൻഡർ ചെയ്യുകയും ചെയ്യുന്ന പ്രതികരണ ഘടകങ്ങളാണ് പിശക് അതിരുകൾ. റെൻഡറിംഗ് സമയത്തും ലൈഫ് സൈക്കിൾ രീതികളിലും അവയ്ക്ക് താഴെയുള്ള മുഴുവൻ ട്രീയുടെയും കൺസ്ട്രക്റ്ററുകളിലും പിശക് അതിരുകൾ പിശകുകൾ പിടിക്കുന്നു.

പങ്ക് € |

കണ്ടെത്താത്ത പിശകുകൾക്കുള്ള പുതിയ പെരുമാറ്റം

ഈ മാറ്റം ശ്രദ്ധേയമാണ്. റിയാക്റ്റ് 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,
    });
  }
}

നിരീക്ഷണം:

• ബട്ടൺ അമർത്തുമ്പോൾ, തിരിച്ചടി നടത്തുക പ്രദർശിപ്പിക്കും പതാക.ബസ്റ്റഡ്.വ്യാജം, ഇത് ഒരു പിശക് സൃഷ്ടിക്കുന്നു

• ഒരു പിശക് പരിധിയില്ലാതെ, മുഴുവൻ ഘടക ട്രീയും അൺമൗണ്ട് ചെയ്യപ്പെടും

തുടർന്ന് ഞങ്ങൾ ഞങ്ങളുടെ പിശക് അതിർത്തി കോഡ് എഴുതുന്നു (പുതിയ ലൈഫ് സൈക്കിൾ രീതി ഉപയോഗിക്കുന്നു ഘടകംDidCatch); ഇത് പ്രധാനമായും ഡാൻ അബ്രമോവിന്റെ ലേഖനത്തിൽ നൽകിയിരിക്കുന്ന ഉദാഹരണമാണ്:

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>
    );
  }
}
...

എന്നിരുന്നാലും, റെൻഡർ പിശക് ബട്ടൺ ക്ലിക്കുചെയ്യുന്നത് ഫോൾബാക്ക് യുഐ പ്രദർശിപ്പിക്കുകയും ഒരു പിശക് സെൻട്രിക്ക് റിപ്പോർട്ട് ചെയ്യുകയും ചെയ്യുന്നു.

പൂർത്തിയാക്കൽ

നിങ്ങൾ ഇത് സഹായകരമാണെന്ന് ഞാൻ പ്രതീക്ഷിക്കുന്നു.

പി.എസ് ഒറിജിനലിലേക്കുള്ള ലിങ്ക്

സെൻട്രി വഴി പിഎസ് ടെലിഗ്രാം ചാറ്റ് https://t.me/sentry_ru

അവലംബം: www.habr.com