Sentry - React - фиксирует ошибки iframe и только iframe - PullRequest
Новая
       8

Sentry - React - фиксирует ошибки iframe и только iframe

1 голос
/ 06 марта 2020

Context Мы разрабатываем приложение на основе React, которое используется в качестве «виджета» на других веб-сайтах. Все наше приложение реагирует на iframe, используя response-frame-component .

В целях разработки мы используем Sentry для регистрации любых ошибок ( @ sentry / browser sdk).

Проблема Мы заметили, что после того, как наше приложение интегрировано с любыми веб-сайтами, ошибки больше не регистрируются в Sentry, и мы не совсем уверены, как это решить.

Поэтому мы ищем решение для регистрации ошибок в Sentry. которые встречаются внутри iframe и ТОЛЬКО внутри этого iframe.

Можно ли как-то указать Sentry, какое окно / цель / область использовать?

Использование React Error Boundaries может будет вариант для рассмотрения. Тем не менее, он не фиксирует все ошибки.

Iframe - код 

...
render(
    <Iframe initialContent={initialIframeContent}>
        <App />
    </Iframe>,
    document.getElementById(containerId)
);
...

Стражная интеграция - код 

...
Sentry.init({
    environment: env,
    dsn: SENTRY_DSN
});
...

1 Ответ

1 голос
/ 17 апреля 2020

Мы не смогли найти прямое решение, поэтому мы в конечном итоге использовали React Error Boundaries для захвата любого cra sh и регистрации его на страже.

Имейте в виду, что Error Boundaries не фиксирует все сбои (см. цитату ниже). Таким образом, мы придумали ловушку, которая позволяла бы границам ошибок также фиксировать эти сбои (за исключением рендеринга на стороне сервера и сбоев внутри самих границ ошибок). *

Примечание

Границы ошибок не перехватывают ошибки для:

  • Обработчики событий (подробнее)
  • Асинхронный код (например, обратные вызовы setTimeout или requestAnimationFrame)
  • Рендеринг на стороне сервера
  • Ошибки, создаваемые в самой границе ошибки (а не в ее дочерних элементах)

~ React

ErrorBoundary. js

const initialState = {
    hasError: false,
    showError: false
};

export default class ErrorBoundary extends Component {
    static propTypes = {
        children: PropTypes.node.isRequired
    };

    static getDerivedStateFromError () {
        return { hasError: true };
    }

    state = initialState;

    componentDidCatch (error) {
        logToSentry(error);
    };
    ...

См. сторожевые документы

useError. js

const useError = () => {
    const [_, setError] = useState();

    return useCallback(
        e => {
            setError(() => {
                throw e;
            });
        },
        [setError],
    );
};

export default useError;

Пример использования 

const throwError = useError();

const someAsyncFn = useCallback(async () => {
    try {
        const response = await asyncApiRequest();
    } catch (e) {
        throwError(e)
    }
}, []);

const someEventHandler = useCallback(async () => {
    try {
        doSomethingThatMightCrash();
    } catch (e) {
        throwError(e)
    }
}, []);

Это немного утомительно и могут быть способы упростить это еще больше, но это делает свою работу.

...