🥇 Dabagalka Khaladaadka ku jira App-ka falcelinta ee Sentry

Maanta waxaan kaaga sheegi doonaa wax ku saabsan raadinta qaladka wakhtiga dhabta ah ee codsiga React. Codsiga dhamaadka-hore caadi ahaan looma isticmaalo dabagalka khaladka. Shirkadaha qaarkood waxay inta badan joojiyaan dabagalka cayayaanka, ku soo noqda dukumeenti ka dib, imtixaano, iwm. Si kastaba ha noqotee, haddii aad u bedeli karto alaabtaada si ka wanaagsan, ka dibna kaliya samee!

1. Maxaad ugu baahan tahay Sentry?

Waxaan u malaynayaa inaad xiisaynayso raadinta kutaannada inta lagu jiro wax soo saarka

Ma u malaynaysaa in aanay tani ku filnayn?

Hagaag, aan eegno faahfaahinta.

Sababaha ugu sarreeya ee horumariyayaashu u isticmaalaan Sentry:

Kuu ogolaanayaa inaad ka fogaato khataraha marka aad geynayso kood khaladaadka leh
Ka caawi QA baaritaanka koodka
Hel ogeysiisyo degdeg ah oo ku saabsan dhibaatooyinka
Awoodda in si degdeg ah loo saxo khaladaadka
Helitaanka bandhig habboon ee khaladaadka guddiga maamulka
Kala sooc khaladaadka qaybta isticmaalaha/browser

Sababaha ugu waaweyn ee mashruuca CEO/Hoggaanka

Lacag kaydso (Sentry waxa lagu rakibi karaa serfaradaada)
Helitaanka jawaab celinta isticmaalaha
Fahamka waxa ka khaldan mashruucaaga wakhtiga dhabta ah
Fahamka tirada dhibaatooyinka ay dadku ku qabaan abkaaga
Caawinta sidii aad u heli lahayd meelaha horumariyayaashu ku sameeyeen khaladaad

Waxaan u maleynayaa in horumariyayaashu ay xiiseyn doonaan maqaalkan marka hore. Waxa kale oo aad isticmaali kartaa liiskan sababaha si aad ugu qanciso madaxdaada inay dhexgalaan Sentry.

Ka taxaddar shayga ugu dambeeya ee liiska ganacsiga.

Durba ma xiisaynaysaa?

Waa maxay Sentry?

Sentry waa arjiga raadraaca kutaanka il furan kaas oo ka caawiya horumariyayaasha inay la socdaan oo ay hagaajiyaan shilalka wakhtiga dhabta ah. Ha iloobin in codsigu kuu ogolaanayaa inaad kordhiso waxtarka oo aad wanaajiso khibradaha isticmaalaha. Sentry wuxuu taageeraa JavaScript, Node, Python, PHP, Ruby, Java iyo luqadaha kale ee barnaamijka.

2. Soo gal oo samee mashruuc

Fur akoonkaaga Sentry Waxaa laga yaabaa inaad gasho (Fadlan ogow in Sentry lagu rakibi karo server-kaaga)
Tallaabada xigta waa in la abuuro mashruuc
Ka dooro luqadaada liiska. (Waxaanu dooran doonaa React. Guji "Create Project")

Habbee codsigaga Tusaalaha aasaasiga ah ee sida loogu dhex geliyo Sentry weelka waxaa lagu arki karaa hoos:

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 wuxuu leeyahay saaxir ku caawiya si uu kaaga caawiyo inaad ogaato waxa aad samayn lahayd marka xigta. Waxaad raaci kartaa talaabooyinkan. Waxaan rabaa inaan ku tuso sida loo sameeyo maamulahaaga qaladka koowaad. Wanaagsan, waxaan abuurnay mashruuc! Aan u gudubno tallaabada xigta

3. React and Sentry dhexgalka

Waa inaad ku rakibtaa xirmada npm mashruucaaga.

npm i @sentry/browser

Ku bilow Sentry weelkaaga:

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

DSN-ku waxa uu ku yaalaa Mashaariicda -> Settings -> Furayaasha Macmiilka. Waxaad ka heli kartaa furayaasha macmiilka barta raadinta.

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

4. Dabagalka khaladka koowaad

Tusaale ahaan, waxaan isticmaalay codsi muusig oo fudud oo leh Deezer API. Waad arki kartaa halkan. Waxaan u baahanahay inaan abuurno qalad. Hal dariiqo ayaa ah in la galo hantida "aan la qeexin".

Waxaan u baahanahay inaan abuurno badhan soo wacaya console.log с user.email. Tallaabadan ka dib waa in aan helnaa fariin qalad ah: Qaladka Nooca Aan La Qabin (ma akhriyi karo hantida aan la qeexin email) iyadoo ay ugu wacan tahay shay isticmaale oo maqan. Waxaad sidoo kale isticmaali kartaa Javascript ka reeban.

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

Weelka oo dhan wuxuu u eg yahay sidan:

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

Ka dib marka la isku daro badhanka, waa inaad ku tijaabisaa browserka.

Waxaan leenahay qaladkayaga koowaad

Ku-hoo!

Haddii aad gujiso cilada madaxa, waxaad arki doontaa raad-raac.

Farriimaha ayaa u muuqda kuwo xun. Dabcan waxaan aragnay farriimaha khaladka ah annaga oo aan fahmin meesha koodku yaal. Sida caadiga ah waxaan uga hadlaynaa khariidadda isha ee ReactJS sababtoo ah ma aha kuwo qaabaysan.

Waxaan sidoo kale jeclaan lahaa in aan bixiyo tilmaamo dejinta khariidadda isha, laakiin taasi waxay ka dhigi doontaa maqaalkan in ka badan intii aan ku tala galay.

Waxaad baran kartaa mawduucan halkan. Haddii aad xiisaynayso maqaalkan, Dmitry Nozhenko waxay daabici doontaa qaybta labaad ee ku saabsan isdhexgalka khariidadda isha. Marka, ku dhufo likes badan oo subscribe dheh Dmitry Nozhenkosi aanay u dhaafin qaybta labaad.

5. Isticmaalka Sentry oo leh barta dhamaadka API

OK Waxaan ku soo koobnay ka-reebista Javascript-ka ee cutubyadii hore. Si kastaba ha ahaatee, maxaan ka yeeli doonaa khaladaadka XHR?

Sentry waxa kale oo uu leeyahay khaladka gaarka ah ee maaraynta. Waxaan u isticmaalay si aan ula socdo khaladaadka API

Sentry.captureException(err)

Waxaad habayn kartaa magaca qaladka, heerka, ku dar xogta, xogta isticmaalaha gaarka ah adoo isticmaalaya codsigaaga, iimaylka, iwm.

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

Waxaan jeclaan lahaa inaan u isticmaalo hawl guud API qabashada.

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

Soo rar shaqadan wicitaankaaga api

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

Aynu eegno hababka:

heerka dhigay Waxay kuu ogolaanaysaa inaad geliso qalad heer ah dashboard-ka sentry. Waxay leedahay sifooyin - 'dhiman', 'qalad', 'digniin', 'log', 'xog, 'debug', 'muhiim ah').
setUser wuxuu caawiyaa inuu kaydiyo xogta isticmaale kasta (ID, ciwaanka iimaylka, qorshaha lacag bixinta, iwm.).
dhigayExtra wuxuu kuu ogolaanayaa inaad sheegto xog kasta oo aad u baahan tahay, tusaale ahaan, kaydinta.

Haddii aad rabto inaad hesho jawaab celin isticmaale oo ku saabsan cayayaanka, waa inaad isticmaashaa hawsha showReportDialog.

Sentry.showReportDialog();

Вывод:

Maanta waxaan sharaxnay hal dariiqo oo Sentry loogu dhex daro codsiga React.

→ Telegram ku sheekee Sentry

Source: www.habr.com

Raadinta khaladaadka codsiga React iyadoo la isticmaalayo Sentry

1. Maxaad ugu baahan tahay Sentry?

Waa maxay Sentry?

2. Soo gal oo samee mashruuc

3. React and Sentry dhexgalka

4. Dabagalka khaladka koowaad

Add a comment cancel reply