Дистанционно наблюдение на бъгове в React frontend приложения

Проучваме използването на Sentry с React.

Тази статия е част от поредица, започваща с докладване на грешки на Sentry, използвайки пример: Часть 1.

Внедряване на React

Първо трябва да добавим нов проект Sentry за това приложение; от уебсайта на Sentry. В този случай избираме React.

Ще внедрим отново нашите два бутона, Hello и Error, в приложение с React. Започваме със създаването на нашето стартово приложение:

npx create-react-app react-app

След това импортираме пакета Sentry:

yarn add @sentry/browser

и го инициализирайте:

реагират-приложение/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,
  });
}
...

Наблюдения:

• По време на разработката имаме други механизми за наблюдение на проблеми, като например конзолата, така че разрешаваме Sentry само за производствени компилации

След това прилагаме нашите бутони Hello и Error и ги добавяме към приложението:

реагират-приложение/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);
    }
  }
}

реагират-приложение/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');
  }
}

реагират-приложение/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;

Проблем (Изходни карти)

Можем да тестваме Sentry с производствена компилация, като въведете:

yarn build

и от папката за изграждане въведете:

npx http-server -c-1

Проблемът, с който се сблъскваме незабавно, е, че записите за грешки на Sentry се отнасят до номера на редове в минимизирания пакет; не е много полезно.

Услугата Sentry обяснява това, като изтегля изходните карти за намаления пакет след получаване на грешка. В този случай работим от localhost (не е достъпен от услугата Sentry).

Решения (изходни карти)

Решението на този проблем е да стартирате приложението от публичен уеб сървър. Един прост бутон за отговор, за да използвате услугата GitHub Pages (безплатно). Стъпките за използване обикновено са следните:

1. Копирайте съдържанието на папката изграждане на към папката Документи в основната директория на хранилището.

2. Включи Страници на GitHub в хранилището (от GitHub), за да използвате папката с документи майстор клонове

3. Изпратете промените в GitHub

Внимание: след като разбрах какво трябва да използвам създаване-създаване на приложение функция за начална страница за стартиране на приложението. Стигна се до добавяне на следното към package.json:

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

Окончателната версия на работещото приложение е достъпна на:

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

Илюстрация на хванати бъгове

Нека преминем през щракването върху бутона Здравей.

С грешка, появяваща се по следния начин:

Наблюдения:

• Този доклад за грешка не може да бъде по-ясен, BRAVO.

Илюстрация на неотчетени грешки

По същия начин нека да преминем през щракването на бутона грешка.

С грешка, появяваща се по следния начин:

По-добро обработване на неотчетени грешки (рендиране)

Въвеждане на граници на грешки

Грешка в JavaScript в част от потребителския интерфейс не трябва да нарушава цялото приложение. За да реши този проблем за потребителите на React, React 16 въвежда нова концепция, наречена „граници на грешката“.

Границите на грешките са компоненти на React, които улавят грешки на JavaScript навсякъде в дървото на техните дъщерни компоненти, регистрират тези грешки и изобразяват резервен потребителски интерфейс вместо дървото на компонентите, което се е сбило. Границите на грешки улавят грешки по време на рендиране, в методите на жизнения цикъл и в конструкторите на цялото дърво под тях.

...

Ново поведение за неоткрити грешки

Тази промяна е значителна. От React 16, грешки, които не са били уловени от никоя граница на грешка, ще доведат до демонтиране на цялото дърво на компонентите на React.

- Дан Абрамов - Обработка на грешки в React 16

Важно уточнение, което ми отне известно време, преди да разбера това е това горното поведение работи само с грешки, хвърлени в метода за рендиране (или по-вероятно в някой от методите на жизнения цикъл). Например, използването на граници на грешката няма да помогне с нашия бутон грешка; тази грешка беше в манипулатора на кликванията.

Нека създадем примерна грешка при рендиране и след това да използваме граници на грешката, за да се справим с грешката по-елегантно.

реагират-приложение/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,
    });
  }
}

Наблюдение:

• Когато натиснете бутона, Реагират ще се покаже флаг.разбит.фалшив, което генерира грешка

• Без граница на грешката цялото дърво на компонентите ще бъде демонтирано

След това пишем нашия граничен код за грешка (използва новия метод на жизнения цикъл componentDidCatch); това по същество е примерът, даден в статията на Дан Абрамов:

реагират-приложение/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;
  }
}

Накрая използваме този компонент:

реагират-приложение/src/App.js

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

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

Въпреки това, щракването върху бутона Render Error показва резервния потребителски интерфейс и съобщава за грешка на Sentry.

Завършване

Надявам се, че сте намерили това за полезно.

PS Линк към оригинала

PS Чат в Telegram чрез Sentry https://t.me/sentry_ru

Източник: www.habr.com