🥇 Te Aroturuki i nga Hapa i roto i te React App me te Kaitiaki

I tenei ra ka korero atu ahau ki a koe mo te tirotiro hapa i te waa tuuturu i roto i te tono React. Ko te tono o mua kaore i te whakamahia mo te aroturuki hapa. Ko etahi o nga kamupene he maha nga wa ka whakakorehia te aroturuki pepeha, ka hoki mai ano ki muri i nga tuhinga, nga whakamatautau, me era atu. Heoi, mena ka taea e koe te whakarereke i to hua mo te pai ake, me mahi noa!

1. He aha koe e hiahia ai ki te Sentry?

Ki taku whakaaro kei te pirangi koe ki te whai i nga pepeha i te wa e whakaputa ana

Ki to whakaaro kaore e ranea tenei?

Kaati, me titiro ki nga korero.

Ko nga take nui mo nga kaihanga ki te whakamahi i te Sentry:

Ka taea e koe te karo i nga tupono ka tukuna he waehere me nga hapa
Awhina i te QA ki te whakamatautau waehere
Whiwhi whakamohiotanga tere mo nga raru
Te kaha ki te whakatika tere i nga hapa
Te whiwhi whakaaturanga watea o nga hapa i roto i te papa whakahaere
Kōmaka hapa mā te wāhanga kaiwhakamahi/pūtirotiro

Nga take matua mo te kaupapa Tumuaki/Arahi

Whakaorangia te moni (Ka taea te whakauru i te Kaitiaki ki o tuunga)
Te whiwhi urupare a te kaiwhakamahi
Te mohio he aha te he o to kaupapa i roto i te waa
Te mohio ki te maha o nga raru e pa ana ki nga tangata mo to taupānga
Awhina koe ki te rapu waahi i pohehe ai o kaihanga

Ki taku whakaaro ka aro mai nga kaihanga ki tenei tuhinga tuatahi. Ka taea hoki e koe te whakamahi i tenei rarangi take hei whakatenatena i to rangatira ki te whakauru i a Sentry.

Kia tupato ki te mea whakamutunga i te rarangi pakihi.

Kei te pirangi kē koe?

He aha te Sentry?

Ko te Sentry he tono aroturuki pepeke puna tuwhera hei awhina i nga kaiwhakawhanake ki te whai me te whakatika i nga tukinga i te waa tuuturu. Kaua e wareware ko te tono ka taea e koe te whakanui ake i te pai me te whakapai ake i te wheako kaiwhakamahi. Ka tautoko a Sentry i te JavaScript, Node, Python, PHP, Ruby, Java me etahi atu reo hotaka.

2. Takiuru me te hanga kaupapa

Whakatūwherahia tō pūkete Sentry. Me takiuru pea koe. (Kia mahara ka taea te whakauru i a Sentry ki runga i o tūmau)
Ko te mahi e whai ake nei ko te hanga kaupapa
Tīpakohia tō reo mai i te rārangi. (Ka tohua e matou te React. Pāwhiritia te "Waihanga Kaupapa")

Whakaritehia to tono. He tauira taketake mo te whakauru i a Sentry ki roto i te ipu ka kitea i raro nei:

import * as Sentry from '@sentry/browser';
// Sentry.init({
//  dsn: "<https://63bbb258ca4346139ee533576e17ac46@sentry.io/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;
        }
    }
}

He Ruānuku awhina a Sentry hei awhina i a koe ki te whakaaro me aha koe ka whai ake. Ka taea e koe te whai i enei kaupae. E hiahia ana ahau ki te whakaatu ki a koe me pehea te hanga i to kaihautu hapa tuatahi. He pai, kua hanga e matou he kaupapa! Kia neke tatou ki te taahiraa e whai ake nei

3. React and Sentry integration

Me whakauru e koe te putea npm ki to kaupapa.

npm i @sentry/browser

Arawhiti te Sentry i roto i to ipu:

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

Ko te DSN kei roto i nga Kaupapa -> Tautuhinga -> Kī Kiritaki. Ka kitea e koe nga taviri kiritaki i te pae rapu.

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

4. Te aroturuki i te hapa tuatahi

Hei tauira, i whakamahia e ahau tetahi tono puoro ngawari me te Deezer API. Ka taea e koe te kite konei. Me hanga he hapa. Ko tetahi huarahi ko te uru ki te taonga "kaore i tautuhia".

Me hanga e tatou he paatene e karanga ana papatohu.log с kaiwhakamahi.īmera. I muri i tenei mahi me whiwhi tatou i te karere hapa: Hapa Momo Kaore i mau (kaore e taea te panui taonga mai i te undefined email) nā te ngaro o te ahanoa kaiwhakamahi. Ka taea hoki e koe te whakamahi Javascript okotahi.

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

He penei te ahua o te ipu katoa:

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://fc0edcf6927a4397855797a033f04085@sentry.io/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);

I muri i te whakauru i tenei paatene, me whakamatau koe i roto i te tirotiro.

Kei a maatau te hapa tuatahi

Whoo-hoo!

Mena ka paatohia e koe te hapa pane, ka kite koe i tetahi tohu puranga.

He kino te ahua o nga karere. Ko te tikanga kua kite matou i nga karere hapa me te kore e mohio kei hea te waehere. Ma te taunoa e korero ana matou mo te mapi puna i ReactJS na te mea kaore i te whirihora.

Kei te pirangi ano ahau ki te tuku tohutohu mo te whakatakoto i te mapi puna, engari ka roa ake tenei tuhinga i taku i whakaaro ai.

Ka taea e koe te ako i tenei kaupapa konei. Mena kei te pirangi koe ki tenei tuhinga, Dmitry Nozhenko ka whakaputahia te waahanga tuarua mo te whakauru mapi puna. Na, pa atu ki nga pai me te ohauru ki Dmitry Nozhenkokia kore ai e ngaro te wahanga tuarua.

5. Whakamahinga Tuhinga o mua me te pito mutunga API

pai. Kua hipokina e matou te tuunga javascript i nga waahanga o mua. Heoi, ka aha tatou mo nga hapa XHR?

Kei a Sentry hoki te whakahaere hapa ritenga. I whakamahia e ahau ki te whai i nga hapa api.

Sentry.captureException(err)

Ka taea e koe te whakarite i te ingoa hapa, taumata, taapiri raraunga, raraunga kaiwhakamahi ahurei ma te whakamahi i to tono, imeera, aha atu.

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": "john.doe@example.com"})
          .setLevel("Error")
      );
      return Sentry.captureException(err);
    }

    if (response) {
      return dispatch(setList(response.body.data));
    }
  });

Kei te pirangi au ki te whakamahi i tetahi mahi whanui mo te API hopu.

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

Kawemai i tenei mahi ki to waea 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));
      }
    });
};

Kia tirohia nga tikanga:

huingaTaumata ka taea e koe te whakauru i tetahi hapa taumata ki te papatohu kaitiaki. He āhuatanga - 'mate', 'hapa', 'whakatupato', 'takiuru', 'info, 'debug', 'arohaehae').
SetUser ka awhina ki te tiaki i nga raraunga kaiwhakamahi (id, wahitau imeera, mahere utu, me etahi atu).
setExtra ka taea e koe te tautuhi i nga raraunga e hiahia ana koe, hei tauira, rokiroki.

Mena kei te pirangi koe ki te tiki urupare a nga kaiwhakamahi mo tetahi pepeha, me whakamahi koe i te mahi showReportDialog.