React հավելվածում սխալների հետևում Sentry-ի միջոցով

Այսօր ես ձեզ կպատմեմ React հավելվածում իրական ժամանակում սխալների հետևման մասին: Առջևի հավելվածը սովորաբար չի օգտագործվում սխալներին հետևելու համար: Որոշ ընկերություններ հաճախ հետաձգում են սխալների հետագծումը, վերադառնալով դրան փաստաթղթերից, թեստերից և այլն: Այնուամենայնիվ, եթե դուք կարող եք փոխել ձեր արտադրանքը դեպի լավը, ապա պարզապես արեք դա:

1. Ինչու՞ է ձեզ անհրաժեշտ Sentry-ը:

Ենթադրում եմ, որ դուք հետաքրքրված եք արտադրության ընթացքում սխալների հետևմամբ

Ի՞նչ եք կարծում, սա բավարա՞ր չէ։

Լավ, եկեք նայենք մանրամասներին:

Sentry-ն օգտագործելու ծրագրավորողների հիմնական պատճառները.

• Թույլ է տալիս խուսափել ռիսկերից սխալներով ծածկագիրը տեղակայելիս
• Օգնեք QA-ին կոդի փորձարկման հարցում
• Ստացեք արագ ծանուցումներ խնդիրների մասին
• Սխալները արագ շտկելու ունակություն
• Ադմինիստրատորի վահանակում սխալների հարմար ցուցադրում ստանալը
• Տեսակավորել սխալներն ըստ օգտվողի/բրաուզերի հատվածի

CEO/Lead նախագծի հիմնական պատճառները

• Խնայեք գումար (Sentry-ը կարող է տեղադրվել ձեր սերվերների վրա)
• Օգտատիրոջ կարծիքի ստացում
• Հասկանալով, թե ինչն է սխալ ձեր նախագծի հետ իրական ժամանակում
• Հասկանալով ձեր հավելվածի հետ կապված մարդկանց խնդիրների քանակը
• Օգնեք գտնել վայրեր, որտեղ ձեր մշակողները սխալներ են թույլ տվել

Կարծում եմ, որ մշակողները նախ կհետաքրքրվեն այս հոդվածով: Դուք կարող եք նաև օգտագործել պատճառների այս ցանկը՝ ձեր ղեկավարին համոզելու համար ինտեգրել Sentry-ին:

Զգույշ եղեք բիզնես ցուցակի վերջին կետի հետ:

Դուք արդեն հետաքրքրվա՞ծ եք:

Ի՞նչ է Sentry-ն:

Sentry-ը բաց կոդով սխալների հետագծման ծրագիր է, որն օգնում է մշակողներին իրական ժամանակում հետևել և ուղղել խափանումները: Մի մոռացեք, որ հավելվածը թույլ է տալիս բարձրացնել արդյունավետությունը և բարելավել օգտատերերի փորձը: Sentry-ն աջակցում է JavaScript, Node, Python, PHP, Ruby, Java և այլ ծրագրավորման լեզուներ:

2. Մուտք գործեք և ստեղծեք նախագիծ

• Բացեք ձեր Sentry հաշիվը: Հնարավոր է՝ ստիպված լինեք մուտք գործել: (Խնդրում ենք նկատի ունենալ, որ Sentry-ը կարող է տեղադրվել ձեր սերվերների վրա)
• Հաջորդ քայլը նախագիծ ստեղծելն է
• Ընտրեք ձեր լեզուն ցուցակից: (Մենք պատրաստվում ենք ընտրել React: Սեղմեք «Ստեղծել նախագիծ»):

Անհատականացրեք ձեր դիմումը: Sentry-ն կոնտեյների մեջ ինտեգրելու հիմնական օրինակ կարելի է տեսնել ստորև.

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-ն ունի օգտակար Wizard, որը կօգնի ձեզ պարզել, թե ինչ պետք է անեք հետո: Դուք կարող եք հետևել այս քայլերին. Ես ուզում եմ ձեզ ցույց տալ, թե ինչպես ստեղծել ձեր առաջին սխալների մշակիչը: Հիանալի է, մենք նախագիծ ենք ստեղծել: Անցնենք հաջորդ քայլին

3. React և Sentry ինտեգրում

Դուք պետք է տեղադրեք npm փաթեթը ձեր նախագծում:

npm i @sentry/browser

Նախաձեռնեք Sentry-ն ձեր կոնտեյներով.

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

DSN-ը գտնվում է Ծրագրեր -> Կարգավորումներ -> Հաճախորդի ստեղներ: Դուք կարող եք գտնել հաճախորդի ստեղները որոնման տողում:

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

4. Հետևել առաջին սխալին

Օրինակ, ես օգտագործել եմ պարզ երաժշտական ​​հավելված Deezer API-ով: Դուք կարող եք դա տեսնել այստեղ. Մենք պետք է սխալ ստեղծենք: Ճանապարհներից մեկը «չսահմանված» սեփականություն մուտք գործելն է

Մենք պետք է ստեղծենք կոճակ, որը կանչում է console.log с user.email. Այս գործողությունից հետո մենք պետք է ստանանք սխալի հաղորդագրություն. Չբռնված TypeError (չի կարող կարդալ հատկությունը չսահմանվածից email) օգտվողի օբյեկտի բացակայման պատճառով: Կարող եք նաև օգտագործել Javascript բացառություն.

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

Ամբողջ կոնտեյները նման է հետևյալին.

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

Այս կոճակը ինտեգրելուց հետո դուք պետք է փորձարկեք այն բրաուզերում:

Մենք ունենք մեր առաջին սխալը

Ուու-հու:

Եթե ​​սեղմեք վերնագրի սխալի վրա, կտեսնեք շարվածքի հետք:

Հաղորդագրությունները վատ տեսք ունեն: Իհարկե, մենք սխալի հաղորդագրություններ ենք տեսել՝ չհասկանալով, թե որտեղ է կոդը: Լռելյայնորեն մենք խոսում ենք ReactJS-ի աղբյուրի քարտեզի մասին, քանի որ դրանք կազմաձևված չեն:

Ես կցանկանայի նաև հրահանգներ տրամադրել սկզբնաղբյուրի քարտեզը կարգավորելու համար, բայց դա այս հոդվածը կդարձնի շատ ավելի երկար, քան ես նախատեսում էի:

Դուք կարող եք ուսումնասիրել այս թեման այստեղ. Եթե ​​դուք հետաքրքրված եք այս հոդվածով, Դմիտրի Նոժենկո կհրապարակի երկրորդ մասը աղբյուրի քարտեզի ինտեգրման մասին: Այսպիսով, սեղմեք ավելի շատ հավանումներ և բաժանորդագրվեք Դմիտրի Նոժենկոերկրորդ մասը բաց չթողնելու համար։

5: Օգտագործել Ժամապահ վերջնակետով API

ԼԱՎ. Մենք անդրադարձել ենք Javascript-ի բացառությանը նախորդ պարբերություններում: Այնուամենայնիվ, ի՞նչ ենք անելու XHR սխալների հետ կապված:

Sentry-ն ունի նաև մաքսային սխալների մշակում: Ես այն օգտագործել եմ api-ի սխալներին հետևելու համար:

Sentry.captureException(err)

Դուք կարող եք հարմարեցնել սխալի անունը, մակարդակը, ավելացնել տվյալներ, եզակի օգտվողի տվյալները՝ օգտագործելով ձեր հավելվածը, էլ.փոստը և այլն:

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

Ես կցանկանայի օգտագործել ընդհանուր ֆունկցիա catch 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);
};

Ներմուծեք այս գործառույթը ձեր 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));
      }
    });
};

Եկեք ստուգենք մեթոդները.

• setLevel թույլ է տալիս մակարդակի սխալ մտցնել պահակային վահանակի մեջ: Այն ունի հատկություններ՝ «ճակատագրական», «սխալ», «նախազգուշացում», «մատյան», «տեղեկություն», «վրիպազերծում», «կրիտիկական»):
• setUser օգնում է պահպանել օգտատիրոջ ցանկացած տվյալ (id, էլփոստի հասցե, վճարման պլան և այլն):
• setExtra թույլ է տալիս նշել ձեզ անհրաժեշտ ցանկացած տվյալ, օրինակ՝ պահել:

Եթե ​​ցանկանում եք ստանալ օգտատերերի կարծիքը սխալի մասին, դուք պետք է օգտագործեք showReportDialog ֆունկցիան:

Sentry.showReportDialog();

Եզրակացություն.

Այսօր մենք նկարագրեցինք Sentry-ին React հավելվածում ինտեգրելու մեկ եղանակ:

→ Telegram chat by Ժամապահ

Source: www.habr.com