🥇በReact frontend መተግበሪያዎች ውስጥ የሳንካዎችን የርቀት ክትትል

Sentry with Reactን በመጠቀም እያሰስን ነው።

ይህ ጽሑፍ ምሳሌን በመጠቀም የሴንትሪ ስህተቶችን ሪፖርት በማድረግ የሚጀምር ተከታታይ አካል ነው፡- የ 1 ክፍል.

የ React ትግበራ

መጀመሪያ ለዚህ መተግበሪያ አዲስ Sentry ፕሮጀክት ማከል አለብን; ከሴንትሪ ድህረ ገጽ። በዚህ አጋጣሚ React የሚለውን እንመርጣለን.

ሁለቱን አዝራሮቻችንን, Hello and Error, React በሚለው መተግበሪያ ውስጥ እንደገና እንተገብራለን. የጀማሪ መተግበሪያችንን በመፍጠር እንጀምራለን-

npx create-react-app react-app

ከዚያ የ Sentry ጥቅል እናስመጣለን፡-

yarn add @sentry/browser

እና አስጀምረው፡-

ምላሽ-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');
  }
}

ምላሽ-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

ወዲያውኑ የገባንበት ችግር የሴንትሪ የስህተት መዝገቦች በተቀነሰ ባች ውስጥ ያሉትን የመስመር ቁጥሮች የሚያመለክቱ መሆኑ ነው። በጣም ጠቃሚ አይደለም.

የሴንትሪ አገልግሎት ስህተት ከተቀበለ በኋላ ለተቀነሰው ፓኬት የምንጭ ካርታዎችን በመሳብ ይህንን ያብራራል። በዚህ አጋጣሚ የምንሄደው ከ localhost (በሴንትሪ አገልግሎት የማይደረስ) ነው።

መፍትሄዎች (ምንጭ ካርታዎች)

ለዚህ ችግር መፍትሄው አፕሊኬሽኑን ከህዝብ ድር አገልጋይ ማሄድ ነው። የ GitHub ገጾች አገልግሎትን ለመጠቀም አንድ ቀላል የምላሽ ቁልፍ (ነጻ)። የአጠቃቀም ደረጃዎች ብዙውን ጊዜ እንደሚከተለው ናቸው-

የአቃፊውን ይዘት ይቅዱ መገንባት ወደ አቃፊ ሰነዶች በማጠራቀሚያው ስርወ ማውጫ ውስጥ.
ማዞር GitHub ገጾች የሰነዶች አቃፊን ለመጠቀም በማጠራቀሚያው ውስጥ (ከ GitHub) ባለቤት ቅርንጫፎች
ለውጦችን ወደ GitHub ይግፉ

አመለከተ: ምን መጠቀም እንዳለብኝ ካወቅኩ በኋላ አፕ መፍጠር-ፍጠር መተግበሪያውን ለማስጀመር መነሻ ገጽ ተግባር። የሚከተለውን ወደ pack.json ለማከል ወረደ፡-

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

የመጨረሻው የማስኬጃ መተግበሪያ ስሪት የሚገኘው በ፡

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

የተያዙ ሳንካዎች ምሳሌ

ሄሎ የሚለውን ቁልፍ በመጫን እንሂድ።

ስህተት በሚከተለው መልክ፡-

ምልከታዎች፡-

ይህ የሳንካ ሪፖርት የበለጠ ግልጽ ሊሆን አልቻለም፣ Bravo.

ያልታወቁ ስህተቶች ምሳሌ

ልክ እንደዚሁ፣ በጠቅታ ቁልፍ እንሂድ ስሕተት.

ስህተት በሚከተለው መልክ፡-

ያልታወቁ ስህተቶችን በተሻለ ሁኔታ ማስተናገድ (መስራት)

የስህተት ገደቦች መግቢያ

በከፊል የተጠቃሚ በይነገጽ ላይ ያለ የጃቫ ስክሪፕት ስህተት ሙሉውን መተግበሪያ መስበር የለበትም። ይህንን ችግር ለReact ተጠቃሚዎች ለመፍታት፣ React 16 "ስህተት ድንበሮች" የሚባል አዲስ ፅንሰ ሀሳብ አስተዋውቋል።

የስህተት ድንበሮች በልጃቸው አካል ዛፍ ውስጥ የትኛውም ቦታ ላይ የጃቫ ስክሪፕት ስህተቶችን የሚይዙ፣ ስህተቶቹን የሚመዘግቡ እና ከተበላሽው አካል ዛፍ ይልቅ የኋሊት UI የሚያሳዩ ምላሽ አካላት ናቸው። የስህተት ድንበሮች በሚሰጡበት ጊዜ፣ በህይወት ኡደት ዘዴዎች እና ከነሱ በታች ባለው የዛፍ ገንቢዎች ላይ ስህተቶችን ይይዛሉ።

...

ላልተገኙ ስህተቶች አዲስ ባህሪ

ይህ ለውጥ ጉልህ ነው። ከ React 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;
  }
}

በመጨረሻም ይህንን አካል እንጠቀማለን-

ምላሽ-app/src/App.js

...
import MyRenderError from './MyRenderError';

class App extends Component {
  render() {
    return (
      <ErrorBoundary>
        <div className="App">
          ...
        </div>
      </ErrorBoundary>
    );
  }
}
...

ነገር ግን፣ የአስረጅ ስህተት አዝራሩን ጠቅ ማድረግ የመመለሻ UI ያሳያል እና ስህተትን ለሴንትሪ ሪፖርት ያደርጋል።

ማጠናቀቅ

ይህ ጠቃሚ ሆኖ እንዳገኙት ተስፋ አደርጋለሁ።

PS ከዋናው ጋር አገናኝ

PS የቴሌግራም ውይይት በሴንትሪ በኩል https://t.me/sentry_ru

ምንጭ: hab.com

Sentry የርቀት ሳንካ ክትትል የፊት-መጨረሻ መተግበሪያዎች ውስጥ React

አስተያየት ያክሉ ምላሽ መሰረዝ