Sentry pre Gatsby

Monitorovanie chýb v produkcii je naozaj užitočná vec, najmä pre profesionálny vývoj. Dnešným priemyselným štandardom pre sledovanie chýb sa stalo Sentry.

Vďaka skvelej podpore a veľkej komunite existuje veľa hotových riešení na integráciu s rôznymi frameworkami.

Dnes ukážeme, ako integrovať sentry s GatsbyJs generátorom statických stránok.

Inštalácia balíčkov

Prejdite do vášho Gatsby projektu a pridajte gatsby-plugin-sentry:

SHELL

npm install gatsby-plugin-sentry

Do vášho gatsby-config.js pridajte:

JAVASCRIPT

{
  resolve: 'gatsby-plugin-sentry',
  options: {
    dsn: process.env.SENTRY_DSN,
  },
},

Odporúčam použiť premennú prostredia, pretože nechcete, aby bol váš tajný kľúč pre projekt odhalený.

Error Boundary komponent

Tento wrapper môže zachytiť akékoľvek chyby v našej aplikácii a použiť ich na odoslanie detailov do Sentry. Je dobrý nápad mať rovnaký layout komponent pre každú stránku, aby sme mohli ľahko zabaliť celú stránku.

Vytvorte súbor ErrorBoundary.js pre náš komponent:

JAVASCRIPT

import React from 'react'
import Sentry from 'gatsby-plugin-sentry'

class ErrorBoundary extends React.Component {
  constructor(props) {
    super(props)
    this.state = { error: null }
  }

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

  render() {
    if (this.state.error) {
      // vykresliť náhradné UI
      return <h1>Niečo sa pokazilo!</h1>
    } else {
      // keď nie je chyba,
      // vykresliť children nedotknuté
      return this.props.children
    }
  }
}

export default ErrorBoundary

A nakoniec, zabalte Layout komponent:

JAVASCRIPT

const Layout = (props) => (
  <ErrorBoundary>
      <React.Fragment>
        <Helmet>
          <body className="bg-white mid-gray" />
        </Helmet>
        <Navbar />
        {props.children}
        <Footer />
      </React.Fragment>
  </ErrorBoundary>
  )

Teraz môžete vidieť všetky chyby vo vašom projekte:

Príklad chyby v sentry prostredí

Môžete pridať viac parametrov úpravou konfigurácie, napríklad:

JAVASCRIPT

{
  resolve: "gatsby-plugin-sentry",
  options: {
    dsn: process.env.SENTRY_DSN,
    release:process.env.APP_VERSION,
    environment: process.env.SENTRY_ENV,
  }
},

Všetky možnosti nájdete v oficiálnej dokumentácii.

Sentry pre Gatsby

Inštalácia balíčkov

Error Boundary komponent

Sestoo