그래서 당신은 이미 당신의 홍목 응용 프로그램을 개발하여 전면적인 테스트를 하고 출시할 준비를 하고 있습니다.너, 유행하는 수염을 기르고 오트밀 젖을 입고☕️, 당신은 훌륭한 개발자이기 때문에 코드에 버그가 없습니다......아니면 있어요?
당연히 핫한 인물이 있죠.🛑! 이것은 당신이 고려하지 않은 가장자리 상황일 수도 있고, 당신의 인프라 시설 중의 어떤 것일 수도 있고, 매우 신뢰할 수 있는 제3자 서비스가 아닐 수도 있고, 사용자가 당신이 가장 기대하지 않는 일을 할 수도 있다. 그리고 그들은 처리되지 않은 오류를 만났을 수도 있다.
생산 응용 프로그램에 대해 당신의 응용 프로그램이 사용자를 기쁘게 하기 위해서는 문제를 신속하게 진단하고 가능한 한 빨리 복구 방안을 제시해야 한다.문제를 볼 수 있는 좋은 로그가 필요하며, 도구가 마찰을 최대한 줄일 수 있기를 바랍니다.기업계에서는 평균 복구 시간(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

소개

이 강좌는 버그스nag를 설정하는 방법을 소개할 것입니다. 이것은 이상 추적 도구(주로 모바일 개발자가 사용함)이지만 웹과 노드를 지원합니다.js, 붉은 나무 - 앞부분과api 측면에서.
우리가 처음으로 Tape.sh(모바일 개발자를 위한 스크린 기록 도구)을 내놓은 이래로 우리는 이런 가시성을 가지고 재현하기 어려운 문제를 복구해야 한다.그것은 심지어 우리가 홍삼을 돌려주는 것을 도왔다!
우리는 정말 Bugsnag를 좋아하지만, 너는 완전히 같은 과정을 따라서, 네가 선택한 도구를 사용할 수 있다. 나는 그것이 너무 다르다고 생각하지 않는다.

너무 길어서 읽을 수가 없어요.

앞부분에 버그스nag 이상 처리 프로그램 구성 요소를 사용하여 Redwood 응용 프로그램을 포장하고sourcemaps(웹pack 플러그인이나 다른 방식을 사용)를 업로드합니다.
백엔드에 대해 맞춤형 apollo 서버 플러그인을 만들고 버그nag에 이상을 전달합니다.사용자 정의 함수에서 사용할 수 있도록 오류를 보고할 수 있는 방법이 있는지 확인하십시오.

섹션 1: 프런트엔드

먼저 bugsnag 대시보드에 로그인한 다음 항목을 만듭니다.
새 항목 > 브라우저 > 반응
API 키를 잡으면 나중에 사용할 것입니다.

예외 처리 프로그램 설정

Bugsnag 라이브러리와react 플러그인 추가

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

현재, 우리는 이상 처리 프로그램으로 전체 전단react 프로그램을 포장해야 합니다.웹/src/index에서회사 명

+ 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 FatalErrorBoundary이지만, 여기에서 자신의 구성 요소를 사용할 수 있습니다.process.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을 에 추가하는 것을 기억하십시오.환경 파일
도은✨! 현재 사용자가 이상이 발생하면 알림을 받을 수 있습니다.하지만 자바스크립트가 축소되었기 때문에 볼 수 있는 로그는 아직 그렇게 유용하지 않습니다.지금까지 우리는 무슨 일이 일어났는지 알고 있다. 이제 왜

웹 페이지 설정 및 원본 지도 업로드

Bugsnag의 패키지 플러그인을 사용하여 설정합니다.설치 방법:

yarn workspace web add webpack-bugsnag-plugins

홍삼을 위한 웹 설정을 사용자 정의하려면 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과 CONTEXT은 Netlify에서 왔으므로 코드를 배치할 위치에 따라 수정하십시오.

설정 확인

이제 설정을 검증해 보겠습니다.추가하기만 하면 됩니다.

throw new Error('Catch me bugsnag!')

전방 코드의 어느 곳에서든지, 그것이 촉발되었을 때, 계기판 (및 전자메일) 에서 그것을 보아야 한다.너는 빵 부스러기 라벨을 통해 무슨 일이 일어났는지, 왜 일어났는지, 그리고 그것이 어떻게 일어났는지 볼 수 있다.

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에서 설정을 해제하면 스택 추적이 완전히 표시됩니다.불행하게도 Netlify가 업로드하기 전에 파일을 왜 이름을 바꿨는지, 호스트 이름이 무엇인지 공개하지 않았기 때문에 Cloudfront와 함께 일할 생각은 없습니다.

개발 및 제품 구성

좋습니다. 오류를 보았습니다. 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 FatalErrorBoundary를 사용하지만, 생산 중에 버그스nag에 이상을 보고하는 것이다.
다음 그림과 같이 이 구성 요소에 응용 프로그램을 포장할 수 있습니다.

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

섹션 2: API 및 Graphql

graphql에 사용자 정의 플러그인 만들기

백엔드에 대해, 우리는graphql에서 오류를 포착하기를 희망합니다.따라서 Bugsnag 코드를 수용하기 위한 util 모듈을 만드는 것부터 시작합니다.
api/src/lib/bugsnag.회사 명

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방법을 만들었는지 기억하십니까?이제 사용자 정의 함수에서 사용할 수 있습니다

제품 구성

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).

전단과 마찬가지로, 우리는 개발 과정에서 로그 기록 이상을 사용하지 않기를 희망합니다. 따라서, 코드를 일부if문장에 봉인하면 완성됩니다!우리의 예에서 우리가 사용하는 것은 process.env.LOG_EXCEPTIONS 변수다.
api/src/lib/bugsnag.회사 명

+ 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와 협력하는 내용입니다.