歩哨によるエラー監視

12337 ワード
react tutorial javascript gatsby テキストリンク
イメージからFree Illustrations .
あなたのアプリケーションが生産でバグに遭遇するとき、モニターすることができることは、あなたの個人的であるかプロのプロジェクトのために持っている良いものです.の人々Sentry あなたのアプリケーション内のエラーを監視するためのソリューションを作成し、彼らが起こるときに警告します.私は私の個人的なサイトと私の妻のために作ったウェブサイトのためにこれを設定している.このガイドでは、あなたのギャツビーのアプリケーションに歩哨監視を追加するために必要なものを歩いていきます.

Create Sentry Account and Project First, we need to create an account with Sentry . 彼らのサイトへのヘッド、選択Sign Up いずれかのアカウントを作成したり、githubや他の統合のいずれかを使用します.
サインされたら
  • 新しいプロジェクトの作成
  • 選択React プラットフォーム用
  • 設定通知
  • プロジェクト名
  • 私はドメインを使用するか、私は歩哨を追加しているウェブサイトのgithubプロジェクト名を使用します
  • プロジェクトが生きるべきチームを選んでください
  • ヒットCreate Project
    • 次のページでは、あなたのアプリケーションに歩哨を追加するためのいくつかのデフォルトの反応コードを与える.今これを無視することができます、ちょうどあなたの歩哨DSNをコードからコピーしてください、我々はGatsbyプラグインをセットアップするために後でこれを必要とします.

    Install Packages 📦

    In your project, add the gatsby-plugin-sentry :

    npm install gatsby-plugin-sentry

    or

    yarn add gatsby-plugin-sentry

    Gatsby Configuration Changes 👨‍💻

    Using the Sentry DSN we copied from creating our project, we now need to configure our Gatsby plugin to hook up to our Sentry project.

    In your gatsby-config.js add:

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

    You’ll want to set up your Sentry DSN up as an environment variable because you don’t want your secret for your project being exposed. This means adding it to any CI/CD (Github Actions, TravisCI, etc.) or deployment (Netlify, Vercel, etc.) configurations as well.
    Create the Error Boundary Component 🧩

    We’re going to create an Error Boundary component to catch any errors in our application and use it to send the details to Sentry. Later we’re going to wrap a Gatsby layout component with our new error boundary so any page or post in your site will have the error boundary available.

    Create a new file called ErrorBoundary.js where you define your components in your project (for me this is in src/common/components ):

    import React from 'react'
import PropTypes from 'prop-types'
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) {
      // render fallback UI
      return <h1>Something went wrong!</h1>
    } else {
      // when there's not an error, render children untouched
      return this.props.children
    }
  }
}

ErrorBoundary.propTypes = {
  children: PropTypes.object.isRequired,
}

export default ErrorBoundary

    Wrap Contents of Layout Component with Error Boundary

    Now in your layout component import the new ErrorBoundary component:

    import ErrorBoundary from '../components/ErrorBoundary'

    Wrap whatever was in your Layout component with the ErrorBoundary component:

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

    Conclusion

    Just like that, you should be all setup. Make sure to keep an eye out for Sentry e-mails coming from your application and this will give you a great way to issues reported from your applications in production. Cheers 🍻!

    Android studioインストール時エラー:unable to run maksdcard sdk tools
    [Algorithm]0 x 02基本コード作成テクニック2