Rakningarvillur í React forriti sem notar Sentry

Í dag mun ég segja þér frá rauntíma villurakningu í React forriti. Framendaforrit er venjulega ekki notað til að rekja villur. Sum fyrirtæki fresta oft villurakningu, snúa aftur til hennar eftir skjöl, prófanir osfrv. Hins vegar, ef þú getur breytt vörunni þinni til hins betra, gerðu það bara!

1. Af hverju þarftu Sentry?

Ég geri ráð fyrir að þú hafir áhuga á að rekja galla meðan á framleiðslu stendur

Finnst þér þetta ekki nóg?

Allt í lagi, við skulum skoða smáatriðin.

Helstu ástæður fyrir forritara til að nota Sentry:

• Leyfir þér að forðast áhættu þegar þú setur upp kóða með villum
• Hjálpaðu QA við kóðaprófun
• Fáðu skjótar tilkynningar um vandamál
• Geta til að leiðrétta villur fljótt
• Að fá þægilega sýningu á villum á stjórnborðinu
• Raða villum eftir notanda/vafrahluta

Helstu ástæður forstjóra/Lead verkefni

• Sparaðu peninga (hægt að setja Sentry upp á netþjónum þínum)
• Að fá athugasemdir frá notendum
• Að skilja hvað er að verkefninu þínu í rauntíma
• Að skilja fjölda vandamála sem fólk hefur með appið þitt
• Hjálpaðu þér að finna staði þar sem þróunaraðilar þínir gerðu mistök

Ég held að verktaki hefði áhuga á þessari grein fyrst. Þú getur líka notað þennan lista yfir ástæður til að sannfæra yfirmann þinn um að samþætta Sentry.

Vertu varkár með síðasta atriðið á fyrirtækjalistanum.

Hefur þú nú þegar áhuga?

Hvað er Sentry?

Sentry er opinn uppspretta villurakningarforrit sem hjálpar forriturum að fylgjast með og laga hrun í rauntíma. Ekki gleyma því að forritið gerir þér kleift að auka skilvirkni og bæta notendaupplifun. Sentry styður JavaScript, Node, Python, PHP, Ruby, Java og önnur forritunarmál.

2. Skráðu þig inn og búðu til verkefni

• Opnaðu Sentry reikninginn þinn. Þú gætir þurft að skrá þig inn. (Vinsamlegast athugaðu að Sentry er hægt að setja upp á netþjónum þínum)
• Næsta skref er að búa til verkefni
• Veldu tungumálið þitt af listanum. (Við ætlum að velja React. Smelltu á "Create Project")

Sérsníddu forritið þitt. Grunndæmi um hvernig á að samþætta Sentry í ílát má sjá hér að neðan:

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

Sentry hefur hjálpsaman Wizard til að hjálpa þér að finna út hvað þú ættir að gera næst. Þú getur fylgt þessum skrefum. Ég vil sýna þér hvernig á að búa til fyrsta villumeðferðarmanninn þinn. Frábært, við höfum búið til verkefni! Við skulum halda áfram í næsta skref

3. React og Sentry samþætting

Þú verður að setja upp npm pakkann í verkefninu þínu.

npm i @sentry/browser

Frumstilla Sentry í ílátinu þínu:

Sentry.init({
 // dsn: #dsnUrl,
});

DSN er staðsett í Verkefnum -> Stillingar -> Biðlaralyklar. Þú getur fundið viðskiptavinalykla í leitarstikunni.

componentDidCatch(error, errorInfo) {
  Sentry.withScope(scope => {
    Object.keys(errorInfo).forEach(key => {
      scope.setExtra(key, errorInfo[key]);
    });
    Sentry.captureException(error);
 });
}

4. Rekja fyrstu villuna

Til dæmis notaði ég einfalt tónlistarforrit með Deezer API. Þú getur séð það hér. Við þurfum að búa til villu. Ein leið er að fá aðgang að „óskilgreindu“ eigninni

Við þurfum að búa til hnapp sem hringir console.log с notandi.netfang. Eftir þessa aðgerð ættum við að fá villuboð: Uncaught TypeError (getur ekki lesið eign úr óskilgreindum email) vegna vantar notendahlut. Þú getur líka notað Javascript undantekning.

<button type="button" onClick={() => console.log(user.email)}>   
  Test Error button 
</button>

Allur ílátið lítur svona út:

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

Eftir að hafa samþætt þennan hnapp ættirðu að prófa hann í vafranum.

Við höfum okkar fyrstu villu

Úff-hú!

Ef þú smellir á hausvilluna muntu sjá staflaspor.

Skilaboðin líta illa út. Auðvitað höfum við séð villuboð án þess að skilja hvar kóðinn er. Sjálfgefið er að við erum að tala um upprunakortið í ReactJS vegna þess að þau eru ekki stillt.

Mig langar líka að koma með leiðbeiningar um uppsetningu heimildakortsins, en það myndi gera þessa grein miklu lengri en ég ætlaði mér.

Þú getur kynnt þér þetta efni hér. Ef þú hefur áhuga á þessari grein, Dmitry Nozhenko mun birta seinni hlutann um samþættingu frumkorta. Svo skaltu smella á fleiri líkar og gerast áskrifandi að Dmitry Nozhenkotil að missa ekki af seinni hlutanum.

5. Notkun Sentry með endapunkti API

Allt í lagi. Við höfum fjallað um javascript undantekninguna í fyrri málsgreinum. Hins vegar, hvað munum við gera við XHR villur?

Sentry hefur einnig sérsniðna villumeðferð. Ég notaði það til að rekja API villur.

Sentry.captureException(err)

Þú getur sérsniðið villuheiti, stig, bætt við gögnum, einstökum notendagögnum með því að nota forritið þitt, tölvupóst o.s.frv.

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

Mig langar að nota almenna aðgerð fyrir afla 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);
};

Flyttu þessa aðgerð inn í API-símtalið þitt.

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

Við skulum athuga aðferðirnar:

• setjaStig gerir þér kleift að setja stigvillu inn í mælaborð vaktarinnar. Það hefur eiginleika - 'banvænt', 'villa', 'viðvörun', 'log', 'upplýsingar, 'kembiforrit', 'mikilvægt').
• setja notanda hjálpar til við að vista öll notendagögn (auðkenni, netfang, greiðsluáætlun osfrv.).
• setExtra gerir þér kleift að tilgreina öll gögn sem þú þarft, til dæmis, geyma.

Ef þú vilt fá athugasemdir frá notendum um villu, ættir þú að nota showReportDialog aðgerðina.

Sentry.showReportDialog();

Ályktun:

Í dag lýstum við einni leið til að samþætta Sentry í React forrit.

→ Telegram spjall eftir Sentry

Heimild: www.habr.com