Где позвонить Sentry.configureScope?

Question

Я использую сторожевой браузер с моим приложением CRA реагировать. Я создаю компонент границы ошибок и использую его для обнаружения ошибок.

Пока все хорошо, я улавливаю ошибку и успешно регистрирую ее для часового.

Проблема возникает, когда я хочу передать информацию о пользователе или установить теги; эта информация не передается, если я не установил ее в своем индексном файле (но таким образом у меня нет доступа к хранилищу и, следовательно, к текущей информации о пользователе).

Итак, где я должен вызвать Sentry.configureScope () для установки этой информации?

EDIT: Я понял, что sentry.configureScope () на самом деле прекрасно работает внутри моей функции логгера. Проблема заключается в том, что я пытаюсь обернуть приложение с помощью ErrorBoundary, и если ошибка уже не присутствует при запуске, она не будет обработана.

Теперь, при условии, что я хотел бы сохранить базовую детализацию, как можно избежать переноса каждого компонента в ErrorBoundary?

Мой код ниже:

ИНДЕКС:

Sentry.init({
  dsn: "https://xxxxx.yyyyyyyyy",
  environment: process.env.NODE_ENV,
  release: '0.1.0'
})

// HERE IT WOULD WORK --------- BUT I HAVE NO STORE ACCESS
/* Sentry.configureScope(scope => {
     scope.setExtra('battery', 0.7);
     scope.setTag('user_access', 'admin');
     scope.setUser({ id: '555' });
}); */

ReactDOM.render(
<Provider store={store}>
    <LocalizeProvider store={store}>
        <PersistGate loading={<Spinner />} persistor={persistor}>
            <ErrorBoundary>
                <App />
            </ErrorBoundary>
        </PersistGate>
    </LocalizeProvider>
</Provider>,
document.getElementById('root'));

ERROR-BOUNDARY.JS

import * as React from 'react'
import * as Sentry from '@sentry/browser';


function logError(error, extraContext = {}) {
    Sentry.configureScope(scope => {
        scope.setExtra('battery', 0.7);
        scope.setTag('user_mode', 'admin');
        scope.setUser({ 'id': '4711' });

        if(extraContext.extra) {
            Object.keys(extraContext.extra).forEach(key => {
                scope.setExtra(key, extraContext.extra[key])
            })
        }
        Sentry.captureException(error)
    })
}


export default class ErrorBoundary extends React.Component {
  state = { error: null }

  static getDerivedStateFromError(error) {
    return {
        error: {
            timestamp: new Date().toJSON(),
            message: error.message,
        }
    }
  }

componentDidCatch(error, info) {
    logError(error, { extra: { ...info } })
}

render() {
    const { error } = this.state
    if (error != null) {
        return <div className="container-fluid">
            <h2>An error has occurred</h2>
            <div><strong>Message</strong>: {error.message}</div>
            <div><strong>Timestamp</strong>: {error.timestamp}</div>
        </div>
    }

    return this.props.children
  }
}

Answer 1

Я думаю, вы должны использовать Sentry.withScope в вашем ErrorBoundary, вот что работает в моем приложении:

function logError(error, extraContext = {}) {
  Sentry.withScope(scope => {
    scope.setExtra('battery', 0.7);
    scope.setTag('user_mode', 'admin');
    scope.setUser({ 'id': '4711' });

    if(extraContext.extra) {
      Object.keys(extraContext.extra).forEach(key => {
        scope.setExtra(key, extraContext.extra[key])
      });
    }

    Sentry.captureException(error);
  });

Ссылка: https://docs.sentry.io/enriching-error-data/scopes/?platform=javascript#local-scopes