🥇Sentry fjärrövervakning av buggar i React frontend-applikationer

Vi utforskar användningen av Sentry med React.

Den här artikeln är en del av en serie som börjar med att rapportera Sentry-fel med ett exempel: Часть 1.

Implementering av React

Först måste vi lägga till ett nytt Sentry-projekt för denna applikation; från Sentrys webbplats. I det här fallet väljer vi React.

Vi kommer att återimplementera våra två knappar, Hej och Fel, i en applikation med React. Vi börjar med att skapa vår startapplikation:

npx create-react-app react-app

Sedan importerar vi Sentry-paketet:

yarn add @sentry/browser

och initiera det:

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

Observationer:

Under utvecklingen har vi andra mekanismer för att övervaka problem, till exempel konsolen, så vi aktiverar bara Sentry för produktionsbyggen

Därefter implementerar vi våra Hej och felknappar och lägger till dem i applikationen:

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;

Problem (Källkartor)

Vi kan testa Sentry med en produktionsuppbyggnad genom att ange:

yarn build

och från byggmappen anger du:

npx http-server -c-1

Problemet vi omedelbart stöter på är att Sentrys felposter refererar till radnummer i den minifierade batchen; inte särskilt användbart.

Tjänsten Sentry förklarar detta genom att dra källmapparna för det reducerade paketet efter att ha mottagit ett fel. I det här fallet kör vi från localhost (inte tillgängligt av Sentry-tjänsten).

Lösningar (Källkartor)

Lösningen på detta problem är att köra programmet från en offentlig webbserver. En enkel svarsknapp för att använda GitHub Pages-tjänsten (gratis). Stegen att använda är vanligtvis följande:

Kopiera innehållet i mappen SLUTRESULTAT till en mapp docs i förvarets rotkatalog.
Sätta på GitHub-sidor i arkivet (från GitHub) för att använda docs-mappen i Master grenar
Push ändringar till GitHub

Notera: efter att jag kommit på vad jag behöver använda skapa-skapa-app startsida för att starta applikationen. Kom på att lägga till följande i package.json:

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

Den slutliga versionen av programmet som körs finns på:

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

Illustration av fångade buggar

Låt oss gå igenom genom att klicka på Hej-knappen.

Med ett fel som visas så här:

Observationer:

Den här felrapporten kunde inte vara tydligare, BRAVO.

Illustration av Unaccounted for Errors

På samma sätt, låt oss gå igenom knappklicket Fel.

Med ett fel som visas så här:

Bättre hantering av oredovisade fel (rendering)

Introduktion av felgränser

Ett JavaScript-fel i en del av användargränssnittet bör inte bryta hela applikationen. För att lösa detta problem för React-användare introducerar React 16 ett nytt koncept som kallas "error bounds".

Felgränser är React-komponenter som fångar JavaScript-fel var som helst i deras underordnade komponentträd, loggar dessa fel och återger ett reservgränssnitt istället för komponentträdet som kraschade. Felgränser fångar upp fel under rendering, i livscykelmetoder och i konstruktörerna för hela trädet under dem.

.

Nytt beteende för oupptäckta fel

Denna förändring är betydande. Från och med React 16 kommer fel som inte fångades av någon felgräns att resultera i att hela React-komponentträdet avmonteras.

- Dan Abramov - Felhantering i React 16

Ett viktigt förtydligande som tog mig ett tag innan jag insåg detta är det ovanstående beteende fungerar bara med fel som kastas i renderingsmetoden (eller mer troligt i någon av livscykelmetoderna). Att till exempel använda felgränser skulle inte göra någon nytta med vår knapp Fel; det här felet fanns i klickhanteraren.

Låt oss skapa ett exempel på renderingsfel och sedan använda felgränser för att hantera felet mer elegant.

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

observation:

När du trycker på knappen, Reagera kommer att visas flagga.busted.falsk, vilket genererar ett fel
Utan en felgräns kommer hela komponentträdet att avmonteras

Sedan skriver vi vår felgränskod (använder den nya livscykelmetoden componentDidCatch); detta är i huvudsak exemplet som ges i Dan Abramovs artikel:

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

Slutligen använder vi denna komponent:

react-app/src/App.js

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

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

Om du klickar på knappen Render Error visas dock reservgränssnittet och rapporterar ett fel till Sentry.

fullbordan

Jag hoppas att du tyckte att detta var till hjälp.

PS Länk till original

PS Telegram-chatt via Sentry https://t.me/sentry_ru

Källa: will.com

Sentry fjärrövervakning av buggar i React frontend-applikationer

Lägg en kommentar Avbryt svar