🥇React ön uç uygulamalarındaki hataların Sentry uzaktan izlenmesi

Sentry'yi React ile kullanmayı araştırıyoruz.

Bu makale, Sentry hatalarının bir örnek kullanılarak raporlanmasıyla başlayan bir serinin parçasıdır: Часть 1.

React'ın uygulanması

Öncelikle bu uygulama için yeni bir Sentry projesi eklememiz gerekiyor; Sentry'nin web sitesinden. Bu durumda React'ı seçiyoruz.

Merhaba ve Hata adlı iki düğmemizi React ile bir uygulamada yeniden uygulayacağız. Başlangıç uygulamamızı oluşturarak başlıyoruz:

npx create-react-app react-app

Daha sonra Sentry paketini içe aktarıyoruz:

yarn add @sentry/browser

ve onu başlat:

react-app/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,
  });
}
...

gözlemler:

Geliştirme sırasında sorunları izlemek için konsol gibi başka mekanizmalarımız var, bu nedenle Sentry'yi yalnızca üretim yapıları için etkinleştiriyoruz

Daha sonra Merhaba ve Hata butonlarımızı uygulayıp uygulamaya ekliyoruz:

react-app/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);
    }
  }
}

react-app/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');
  }
}

react-app/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;

Sorun (Kaynak Haritaları)

Sentry'yi aşağıdakileri girerek bir üretim yapısıyla test edebiliriz:

yarn build

ve derleme klasöründen şunu girin:

npx http-server -c-1

Hemen karşılaştığımız sorun, Sentry'nin hata kayıtlarının küçültülmüş gruptaki satır numaralarına gönderme yapmasıdır; pek kullanışlı değil.

Sentry servisi bunu hata aldıktan sonra azaltılmış pakete ait kaynak haritalarını çekerek açıklıyor. Bu durumda localhost'tan çalışıyoruz (Sentry hizmeti tarafından erişilemez).

Çözümler (Kaynak Haritaları)

Bu sorunun çözümü, uygulamayı genel bir web sunucusundan çalıştırmaktır. GitHub Pages hizmetini (ücretsiz) kullanmak için basit bir yanıt düğmesi. Kullanılacak adımlar genellikle aşağıdaki gibidir:

Klasörün içeriğini kopyalayın inşa etmek klasöre docs deponun kök dizininde.
Aç GitHub Sayfaları docs klasörünü kullanmak için depoda (GitHub'dan) usta ветви
Değişiklikleri GitHub'a aktarın

Dikkat: Neyi kullanmam gerektiğini bulduktan sonra uygulama oluştur-oluştur Uygulamayı başlatmak için ana sayfa işlevi. package.json'a aşağıdakileri eklemek geldi:

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

Çalışan uygulamanın son sürümüne şu adresten ulaşılabilir:

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

Yakalanan Hataların İllüstrasyonu

Merhaba butonuna tıklayarak ilerleyelim.

Bunun gibi görünen bir hatayla:

gözlemler:

Bu hata raporu daha net olamazdı BRAVO.

Hesaplanmayan Hataların İllüstrasyonu

Aynı şekilde butona tıklayarak ilerleyelim Hata.

Bunun gibi görünen bir hatayla:

Hesaplanmayan hataların daha iyi ele alınması (oluşturma)

Hata Sınırlarının Tanıtılması

Kullanıcı arayüzünün bir kısmındaki bir JavaScript hatası uygulamanın tamamını bozmamalıdır. React kullanıcıları için bu sorunu çözmek amacıyla React 16, "hata sınırları" adı verilen yeni bir kavram sunar.

Hata sınırları, alt bileşen ağacının herhangi bir yerindeki JavaScript hatalarını yakalayan, bu hataları günlüğe kaydeden ve çöken bileşen ağacı yerine bir yedek kullanıcı arayüzü oluşturan React bileşenleridir. Hata sınırları, oluşturma sırasında, yaşam döngüsü yöntemlerinde ve altındaki tüm ağacın oluşturucularındaki hataları yakalar.

...

Tespit edilemeyen hatalar için yeni davranış

Bu değişiklik önemlidir. React 16'dan itibaren herhangi bir hata sınırı tarafından yakalanmayan hatalar, tüm React bileşen ağacının bağlantısının kesilmesine neden olacaktır.

- Dan Abramov- React 16'da Hata İşleme

Bunun farkına varmam biraz zaman alan önemli bir açıklama şu: yukarıdaki davranış yalnızca oluşturma yönteminde (veya daha büyük olasılıkla yaşam döngüsü yöntemlerinden herhangi birinde) atılan hatalarla çalışır.. Örneğin, hata sınırlarını kullanmanın düğmemizde hiçbir faydası olmaz Hata; bu hata tıklama işleyicisindeydi.

Örnek bir işleme hatası oluşturalım ve ardından hatayı daha iyi ele almak için hata sınırlarını kullanalım.

react-app/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,
    });
  }
}

gözlem:

Düğmeye bastığınızda, React görüntülenecek flag.busted.bogusbir hata üretir
Hata sınırı olmadan tüm bileşen ağacının bağlantısı kaldırılacaktır

Daha sonra hata sınırı kodumuzu yazarız (yeni yaşam döngüsü yöntemini kullanır) bileşenDidCatch); bu aslında Dan Abramov'un makalesinde verilen örnektir:

react-app/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;
  }
}

Son olarak bu bileşeni kullanıyoruz:

react-app/src/App.js

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

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

Ancak İşleme Hatası düğmesine tıklandığında geri dönüş kullanıcı arayüzü görüntülenir ve Sentry'ye bir hata bildirilir.

Tamamlama

Umarım bunu faydalı bulmuşsunuzdur.

PS Orijinale bağlantı

Sentry aracılığıyla PS Telegram sohbeti https://t.me/sentry_ru

Kaynak: habr.com

React ön uç uygulamalarındaki hataların Sentry tarafından uzaktan izlenmesi

Yorum ekle Cevabı iptal