ので、徹底的にそれをテストし、ライブに行く準備ができてあなたの驚くべきレッドウッドのアプリを構築した.あなたのヒップスターひげとオート麦の平らな白で☕️, あなたは素晴らしいdevですので、コードにバグはありません.それともありますか.
もちろんホットショット🛑! それはあなたが考えていなかったエッジケースかもしれません、多分、それはあなたの基盤の何かであるかもしれません、あるいは、スーパー信頼性でないサードパーティのサービスまたは多分ちょうどそのユーザーはあなたが少なくとも期待することをするでしょう、そして、彼らは取り扱われていないエラーを打ちました!
生産アプリのために、あなたのアプリケーションのユーザーを喜ばせるためには、迅速に問題を診断することができる必要がありますし、できるだけ早く修正を押してください.あなたは問題が何であるかを見ることができる良いログを必要とします、そして、あなたはあなたのツールをこの摩擦を最小にして欲しいです.エンタープライズサークルでは、これは回復に平均時間を使用して測定されます- MTTR -簡単な用語では、修正し、できるだけ早く出荷します.

Introduction

Tldr;

Part 1: Frontend

Setting up exception handler

Webpack setup & uploading source maps

Validate your setup

Dev & Prod configuration

Part 2: API and Graphql

Create custom plugin for graphql

Custom functions

Prod configuration

導入

このチュートリアルでは、BugSngを設定するには、例外を追跡ツール(主にモバイルDEVSによって使用される)を設定するだけでなく、Webとノードをサポートします.JS、Redwoodで-フロントエンドとAPI側の両方.
まず始めにTape.sh , モバイルDEVSのためのスクリーンレコーディングツール、我々は非常に難しい問題を再現するためにこの可視性を必要としました.それも、我々がレッドウッドに貢献するのを助けました!
私たちは本当にBugSngが好きですが、あなたは、まったく同じプロセスに従うことができますし、独自の選択肢のツールを使用する-私はそれがあまりにも異なっているとは思わない.

TLR

フロントエンドの場合は、BugSng例外ハンドラコンポーネントを使用してRedwoodアプリケーションをラップし、SourceSapsをアップロードしてください.
バックエンドでは、カスタムアポロサーバプラグインを作成し、BugSngに例外を渡します.カスタム関数で使用するエラーを報告する方法もあります.

第1部フロントエンド

あなたのBugSngダッシュボードに最初にログインし、プロジェクトを作成します.
ブラウザの反応
あなたのAPIキーをつかんでください、そして、我々は少しそれを使います.

例外ハンドラの設定

BugSngライブラリを追加して、プラグインに反応しましょう

# -W because we'll use it in both web and api
yarn add -W @bugsnag/js 
yarn workspace web add @bugsnag/plugin-react

今、我々は全体のフロントエンドの反応のアプリを、例外ハンドラをラップする必要があります.ウェブ/src/indexで.js

+ import Bugsnag from '@bugsnag/js'
+ import BugsnagPluginReact from '@bugsnag/plugin-react'

+ Bugsnag.start({
+  apiKey: process.env.BUGSNAG_NOTIFIER_API_KEY,
+  plugins: [new BugsnagPluginReact()],
+  releaseStage: process.env.CONTEXT || process.env.NODE_ENV,
+  appVersion: process.env.DEPLOY_ID,
+ })

+ const BugsnagBoundary = Bugsnag.getPlugin('react').createErrorBoundary(React)

ReactDOM.render(
- <FatalErrorBoundary page={FatalErrorPage}>
+ <BugsnagBoundary
+    FallbackComponent={<FatalErrorBoundary page={FatalErrorPage} />}
+  >
      <RedwoodProvider>
        <Routes />
      </RedwoodProvider>
+ </BugsnagBoundar>
- </FatalErrorBoundary>,
  document.getElementById('redwood-app')
)

私が使用しているフォールバックコンポーネントは、デフォルトのRedwood FatalErrorObjectsですが、ここで独自に使用できます.
使用方法に注意してくださいprocess.env 変数.デフォルトRedwoodによってENV変数をフロントエンドに公開しません.だからレッドウッドを変更することができます.これらの変数を含むtoml

[web]
  port = 8910
  apiProxyPath = "/.netlify/functions"
+ includeEnvironmentVariables = ['BUGSNAG_NOTIFIER_API_KEY', 'CONTEXT', 'NODE_ENV', 'DEPLOY_ID']
[api]
  port = 8911
[browser]

覚えて！

そして最後にBUGSNAG_NOTIFIER_API_KEY あなたに.envファイル
完了✨! 今すぐあなたのユーザーの例外をヒット通知されます.しかし、あなたが見るログはあなたのJavaScriptがminifiedされるので、まだ役に立ちません.今まで何が起こっているか知っています

セットアップとアップロードソースマップ

BugSnapのwebpackプラグインを使って設定します.インストールしましょう

yarn workspace web add webpack-bugsnag-plugins

Redwood用のWebpackの設定をカスタマイズするには、web/config/webpack.config.js . あなたはすでにそれを持っている場合は、偉大なだけでそれを追加します.

/* ==== web/config/webpack.config.js ==== */

// Important, so webpack can use the environment variables
require('dotenv-defaults').config()

const {
  BugsnagSourceMapUploaderPlugin,
  BugsnagBuildReporterPlugin,
} = require('webpack-bugsnag-plugins')

module.exports = (config) => {
  // Check if its building in netlify
    // No need to upload source maps when building locally
  const netlifyBuild = !!process.env.NETLIFY

  const bugsnagPlugins = netlifyBuild
    ? [
        new BugsnagBuildReporterPlugin({
          apiKey: process.env.BUGSNAG_NOTIFIER_API_KEY,
          appVersion: process.env.DEPLOY_ID,
          releaseStage: process.env.CONTEXT || process.env.NODE_ENV,
          sourceControl: {
            provider: 'github',
            repository: process.env.REPOSITORY_URL,
            revision: process.env.COMMIT_REF,
          },
        }),
        new BugsnagSourceMapUploaderPlugin({
          apiKey: process.env.BUGSNAG_NOTIFIER_API_KEY,
          appVersion: process.env.DEPLOY_ID,
        }),
      ]
    : []

  config.plugins = [...config.plugins, ...bugsnagPlugins]

  return config
}

我々が使用していることに注意してくださいprocess.env.NETLIFY 環境変数.これはローカルビルドのソースマップをアップロードしないようにするためです.環境変数REPOSITORY_URL , COMMIT_REF , DEPLOY_ID and CONTEXT netlifyから来るので、コードを展開する場所に応じて変更します.

セットアップの妥当性検査

では、設定を有効にしましょう.ジャストアド

throw new Error('Catch me bugsnag!')

あなたのフロントエンドコードのどこでも、そして、それが得られるとき、あなたはそれがあなたのダッシュボード(そして、電子メール)の上に来るのを見るべきです.あなたは何が起こったのか、なぜそれが起こったか、また、どのようにBreadCrumbsタブを介して起こったかを確認することができます.

A note on sourcemaps with Netlify. If you have "optimise JS bundles" enabled on Netlify, they move your bundles to the Cloudfront CDN, and Bugsnag isn't able to match up the sourcemap to the js file.

NetLify UIの設定をオフにすると、StackTraceを完全に見ることができます.私はまだCloudfrontで動作するようにしていません.なぜなら、残念なことにNetLifyはファイルの名前を変更していないからです.

devの設定

グレート、エラーを見ている今、あなたはそれを無効にします<EnvironmentAwareErrorBoundary>

const EnvironmentAwareErrorBoundary = React.memo(({ children, ...otherProps }) => {
  if (process.env.NODE_ENV === 'development') {
    return (
      <FatalErrorBoundary page={FatalErrorBoundary} {...otherProps}>
        {children}
      </FatalErrorBoundary>
    )
  } else {
    Bugsnag.start({
      apiKey: process.env.BUGSNAG_NOTIFIER_API_KEY,
      plugins: [new BugsnagPluginReact()],
      releaseStage: process.env.CONTEXT || process.env.NODE_ENV,
      appVersion: process.env.DEPLOY_ID,
    })

    const BugsnagBoundary = Bugsnag.getPlugin('react').createErrorBoundary(
      React
    )

    return (
      <BugsnagBoundary
        FallbackComponent={<FatalErrorBoundary page={FatalErrorPage} />}
        {...otherProps}
      >
        {children}
      </BugsnagBoundary>
    )
  }
})

これはデフォルトのRedwood FatalErrorObjectsを使用していますが、例外は生成時にbugsSgに報告します.
次に、このようなコンポーネントでアプリケーションをラップできます.

ReactDOM.render(
+  <EnvironmentAwareErrorBoundary>
            {*/ your other stuff */}
      <RedwoodProvider>
        <Routes />
      </RedwoodProvider>
+  </EnvironmentAwareErrorBoundary>,
  document.getElementById('redwood-app')
)

パート2 : APIとグラフ

グラフィカルプラグインの作成

バックエンドでは、GraphSQLからエラーを取得します.では、BugSnagコードを作成するためにutilモジュールを作成しましょう.
API/src/lib/bugsSg.js

import Bugsnag from '@bugsnag/js'
import { isEmpty } from 'lodash'

Bugsnag.start({
  apiKey: process.env.BUGSNAG_SERVER_API_KEY,
  releaseStage: process.env.CONTEXT || process.env.NODE_ENV,
  appVersion: process.env.DEPLOY_ID,
})

export const reportErrorFromContext = (requestContext) => {
  const { errors, metrics, request, context } = requestContext

    // Call bugsnag here
  // But you could easily use something else here
  Bugsnag.notify(new Error(errors), function (event) {
    event.severity = 'error'
    event.addMetadata('metrics', metrics)
    event.addMetadata('errors', errors)
    event.addMetadata('query', request)
  })
}

export const reportError = (error) => {
  Bugsnag.notify(error)
}

我々はreportReportErrorFromContext カスタムアポロサーバプラグインで使用するにはreportError 他の用途に.
今すぐプラグインを作成し、サーバーのセットアップに追加しよう

// === api/src/functions/graphql.js ===

+ import { reportErrorFromContext } from 'src/lib/bugsnag'


+ const bugSnagExceptionPlugin = {
+   requestDidStart() {
+     return {
+       didEncounterErrors(requestContext) {
+         reportErrorFromContext(requestContext)
+       },
+     }
+   },
+ }

export const handler = createGraphQLHandler({
  getCurrentUser,
+  plugins: [bugSnagExceptionPlugin],
  schema: makeMergedSchema({
    schemas,
    services: makeServices({ services }),

// ....rest of the file omitted for brevity

カスタム関数

我々がどのように作成したか覚えておいてくださいreportError 方法?これでカスタム関数で使用できます

prodの設定

Quick headsup here, Netlify’s functions annoyingly don’t set the NODE_ENV value at runtime by default. So if you wanted to check if you’re running on prod, you’ll have to make sure you set the value in the Netlify UI, but then in your netlify.toml set NODE_ENV to development for the build env (otherwise the build will fail).

フロントエンドと同じように、私たちはdevの間にログの例外を無効にしたいので、if文でコードをラップしましょう.我々のケースではprocess.env.LOG_EXCEPTIONS 変数.
API/src/lib/bugsSg.js

+ if (!isEmpty(process.env.LOG_EXCEPTIONS)) {
  Bugsnag.start({
    apiKey: process.env.BUGSNAG_SERVER_API_KEY,
    releaseStage: process.env.CONTEXT || process.env.NODE_ENV,
    appVersion: process.env.DEPLOY_ID,
  })
+ }

export const reportReportErrorFromContext = (requestContext) => {
  const { errors, metrics, request, context } = requestContext

  // Note that netlify doesn't set node_env at runtime in functions
+  if (isEmpty(process.env.LOG_EXCEPTIONS)) {
+    return
+  }

それはすべての人々です!🎉 あなたは今、あなたのアプリを起動する準備ができて、自信を持って見つけることができますトレースし、彼らが起こる場合は例外を修正!

👋🏽 PSは、我々がRedwoodに取り組んでいるものです：