reactjs - Sentry - React - 捕获错误 iframe 和仅 iframe

Question

语境
我们正在开发一个基于 React 的应用程序，该应用程序在其他网站上用作“小部件”。我们的整个 React 应用程序都使用 react-frame-component 包裹在 iframe 中.

出于开发目的，我们使用 Sentry记录任何错误(@sentry/browser sdk)。

问题
我们注意到，一旦我们的应用程序集成到任何网站上，错误就不会再记录到 Sentry 中，我们也不完全确定如何解决这个问题。

因此，我们正在寻求一种解决方案，将发生在 iframe 内且仅在该 iframe 内发生的错误记录到 Sentry。

是否有可能以某种方式告诉 Sentry 使用哪个窗口/目标/范围？

使用 React Error Boundaries可能是一个可以考虑的选择。但是，它不会捕获所有错误。

iframe - 代码

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

哨兵集成 - 代码

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

Answer 1

我们找不到直接的解决方案，所以我们最终使用 React Error Boundaries 来捕获任何崩溃并将其记录到 sentry。

请记住，错误边界不会捕获所有崩溃(请参阅下面的引用)。所以我们想出了一个钩子(Hook)，可以让错误边界捕获这些崩溃(除了服务器端渲染和错误边界本身内部的崩溃)。

见 inspiration hook .

Note

Error boundaries do not catch errors for:

• Event handlers (learn more)
• Asynchronous code (e.g. setTimeout or requestAnimationFrame callbacks)
• Server side rendering
• Errors thrown in the error boundary itself (rather than its children)

~ 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);
    };
    ...

见 sentry docs

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)
    }
}, []);

这有点乏味，可能有一些方法可以进一步简化它，但它完成了它的工作。