Merge pull request #1923 from ProjectBarks/master

Add Error Handler to Limit Exception Bubbling

MIGRATION.md

@@ -2,6 +2,16 @@
 
 Details relating to major changes that aren't presently in `CHANGELOG.md`, due to limitations with how that file is being generated.
 
+## v16.0.0
+
+**Added**
+
+- `onError` prop.
+
+**Changed**
+
+- `afterInjection` is no longer an error-first callback.
+
 ## v15.0.0
 
 **Removed**

README.md

@@ -50,12 +50,13 @@ root.render(<ReactSVG src="svg.svg" />)
 **Props**
 
 - `src` - The SVG URL.
-- `afterInjection(err, svg)` - _Optional_ Function to call after the SVG is injected. If an injection error occurs, `err` is an `Error` object. Otherwise, `err` is `null` and `svg` is the injected SVG DOM element. Defaults to `() => {}`.
-- `beforeInjection(svg)` - _Optional_ Function to call just before the SVG is injected. `svg` is the SVG DOM element which is about to be injected. Defaults to `() => {}`.
+- `afterInjection(svg)` - _Optional_ Function to call after the SVG is injected. `svg` is the injected SVG DOM element. If an error occurs during execution it will be routed to the `onError` callback, and if a `fallback` is specified it will be rendered. Defaults to `() => {}`.
+- `beforeInjection(svg)` - _Optional_ Function to call just before the SVG is injected. `svg` is the SVG DOM element which is about to be injected. If an error occurs during execution it will be routed to the `onError` callback, and if a `fallback` is specified it will be rendered. Defaults to `() => {}`.
 - `evalScripts` - _Optional_ Run any script blocks found in the SVG. One of `'always'`, `'once'`, or `'never'`. Defaults to `'never'`.
-- `fallback` - _Optional_ Fallback to use if an injection error occurs. Can be a string, class component, or function component. Defaults to `null`.
+- `fallback` - _Optional_ Fallback to use if an error occurs during injection, or if errors are thrown from the `beforeInjection` or `afterInjection` functions. Can be a string, class component, or function component. Defaults to `null`.
 - `httpRequestWithCredentials` - _Optional_ Boolean indicating if cross-site Access-Control requests for the SVG should be made using credentials. Defaults to `false`.
 - `loading` - _Optional_ Component to use during loading. Can be a string, class component, or function component. Defaults to `null`.
+- `onError(error)` - _Optional_ Function to call if an error occurs during injection, or if errors are thrown from the `beforeInjection` or `afterInjection` functions. `error` is an `unknown` object. Defaults to `() => {}`.
 - `renumerateIRIElements` - _Optional_ Boolean indicating if SVG IRI addressable elements should be renumerated. Defaults to `true`.
 - `useRequestCache` - _Optional_ Use SVG request cache. Defaults to `true`.
 - `wrapper` - _Optional_ Wrapper element types. One of `'div'`, `'span'` or `'svg'`. Defaults to `'div'`.
@@ -66,11 +67,7 @@ Other non-documented properties are applied to the outermost wrapper element.
 
 ```jsx
 <ReactSVG
-  afterInjection={(error, svg) => {
-    if (error) {
-      console.error(error)
-      return
-    }
+  afterInjection={(svg) => {
     console.log(svg)
   }}
   beforeInjection={(svg) => {
@@ -85,6 +82,9 @@ Other non-documented properties are applied to the outermost wrapper element.
   onClick={() => {
     console.log('wrapper onClick')
   }}
+  onError={(error) => {
+    console.error(error)
+  }}
   renumerateIRIElements={false}
   src="svg.svg"
   useRequestCache={false}

examples/api-usage/src/index.js

@@ -5,11 +5,7 @@ const container = document.getElementById('root')
 const root = createRoot(container)
 root.render(
   <ReactSVG
-    afterInjection={(error, svg) => {
-      if (error) {
-        console.error(error)
-        return
-      }
+    afterInjection={(svg) => {
       console.log(svg)
     }}
     beforeInjection={(svg) => {
@@ -24,6 +20,9 @@ root.render(
     onClick={() => {
       console.log('wrapper onClick')
     }}
+    onError={(error) => {
+      console.error(error)
+    }}
     renumerateIRIElements={false}
     src="svg.svg"
     useRequestCache={false}

examples/css-animation/src/index.js

@@ -10,7 +10,7 @@ const C = () => {
   return (
     <>
       <ReactSVG
-        afterInjection={(_err, svg) => {
+        afterInjection={(svg) => {
           if (animate) {
             svg.classList.add('is-clicked')
           }

examples/fallbacks/src/index.js

@@ -17,5 +17,19 @@ root.render(
     <ReactSVG fallback={ClassFallback} src="notfound.svg" />
     <ReactSVG fallback={FunctionFallback} src="notfound.svg" />
     <ReactSVG fallback={StringFallback} src="notfound.svg" />
+    <ReactSVG
+      beforeInjection={() => {
+        throw new Error('boom!')
+      }}
+      fallback={<span>beforeInjection fallback</span>}
+      src="svg.svg"
+    />
+    <ReactSVG
+      afterInjection={() => {
+        throw new Error('boom!')
+      }}
+      fallback={<span>afterInjection fallback</span>}
+      src="svg.svg"
+    />
   </Fragment>
 )

examples/styled-components/src/index.tsx

@@ -24,16 +24,14 @@ const Icon: FC<IconProps> = ({ src, filled, ...props }) => {
   return (
     <SVG
       $filled={filled}
-      afterInjection={(error) => {
-        if (error) {
-          console.error('Error injecting svg icon', error)
-        }
-      }}
       beforeInjection={(svg) => {
         if (svg.getElementsByTagName('title').length > 0) {
           svg.removeChild(svg.getElementsByTagName('title')[0])
         }
       }}
+      onError={(error) => {
+        console.error('Error injecting svg icon', error)
+      }}
       src={src}
       {...props}
     />