React - Sentry integration - using Iframe

1

Context

We’re developing a React-based app that is being used as a ‘widget’ on other websites. Our entire react app is wrapped in an iframe using react-frame-component.

Problem

We noticed that once our app is integrated on any website errors don’t get logged to Sentry anymore and we’re not entirely sure how to solve this.

So we’re seeking a solution to log errors to Sentry that occur inside an iframe and ONLY inside that iframe.

Is it possible to somehow tell Sentry what window/target/scope to use?

Using React Error Boundaries might be an option to consider. However, it doesn’t capture all errors.

Iframe - code

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

Sentry integration - code

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

If any relevant information is missing pls let me know and I’ll update this question asap.

Thanks.

2

Hi @bakkum, Any success with this?