react native - ComponentDidCatch isn't catching SVG Render errors

Question

My team uses a general RenderErrorWrapper component everywhere. Looks basically like this

export class RenderErrorWrapper extends React.PureComponent<RenderErrorWrapperProps, RenderErrorWrapperState> {
    constructor(props: RenderErrorWrapperProps) {
        super(props)
        this.state = { renderComponentSuccessful: true }
    }

    componentDidCatch(error: Error) {
        this.setState({ renderComponentSuccessful: false })
    }

    render() {
        if (!this.state.renderComponentSuccessful) {
            this.props.fallbackComponent
        }
        return this.props.children
    }
}

Now the thing is, this thing works. We know it works, it's a standard pattern for us, we see the errors this is catching, see the fallback UIs it displays.

Except.

We're also using the SvgUri component from react-native-svg-uri. Specifically the call we're doing is like

<SvgUri width={width} height={height} svgXmlData={xmlString} />

Now, if that xmlString isn't invalid, crazy things happen. We get an exception that bubbles all the way up, straight through our RenderErrorWrapper. We literally see the RenderErrorWrapper in the stack trace, but its ComponentDidCatch never gets called!

Invariant Violation: Text strings must be rendered within a <Text> component.

This error is located at:
    in RNSVGGroup (at G.js:23)
    in G (at Svg.js:127)
    in RNSVGSvgView (at Svg.js:116)
    in Svg (at react-native-svg-uri/index.js:168)
    in RCTView (at View.js:45)
    in View (at react-native-svg-uri/index.js:288)
    in SvgUri (created by MyComponent)
    in RenderErrorWrapper (created by MyComponent)
    in RCTView (at View.js:45)
    << etc >>

I know react-native-svg-uri is an abandoned library at this point, unfortunately we're basically stuck with it. What I'm more concerned about is how this exception manages to miss our error handling framework entirely, since that could happen with other issues as well.

What makes this error special that it can bypass our error handling?

question from:https://stackoverflow.com/questions/65835897/componentdidcatch-isnt-catching-svg-render-errors

Answer 1

Figured out what's going on here: The problem is that RNSVGGroup is a Native component called by the SVG renderer, and Native errors skip your React Native error catch layers.

You can still catch and log the error but you have to use a native error handler to catch the native error first, and it won't save you from the Red Screen of Death. Alternatively, newer versions of react-native-svg might not have this issue, ours is pretty old.