Fix next/image usage of onError()

packages/next/client/image.tsx

@@ -368,7 +368,6 @@ export default function Image({
   objectFit,
   objectPosition,
   onLoadingComplete,
-  onError,
   placeholder = 'empty',
   blurDataURL,
   ...all

test/integration/image-component/default/pages/on-error.js

@@ -0,0 +1,44 @@
+import { useState } from 'react'
+import Image from 'next/image'
+
+const Page = () => {
+  return (
+    <div>
+      <h1>Test onError</h1>
+      <p>
+        If error occured while loading image, native onError should be called.
+      </p>
+      <ImageWithMessage id="1" src="/test.png" layout="fill" />
+
+      <ImageWithMessage id="2" src="/nonexistent-img.png" layout="fill" />
+      <div id="footer" />
+    </div>
+  )
+}
+
+function ImageWithMessage({ id, ...props }) {
+  const [msg, setMsg] = useState('no error occured')
+  const style =
+    props.layout === 'fill'
+      ? { position: 'relative', width: '64px', height: '64px' }
+      : {}
+
+  return (
+    <>
+      <div className="wrap" style={style}>
+        <Image
+          id={`img${id}`}
+          onError={(e) => {
+            const msg = `error occured while loading ${e.target.id}`
+            setMsg(msg)
+          }}
+          {...props}
+        />
+      </div>
+      <p id={`msg${id}`}>{msg}</p>
+      <hr />
+    </>
+  )
+}
+
+export default Page

test/integration/image-component/default/test/index.test.js

@@ -363,6 +363,29 @@ function runTests(mode) {
     )
   })
 
+  it('should callback native onError when error occured while loading image', async () => {
+    let browser = await webdriver(appPort, '/on-error')
+
+    await check(
+      () => browser.eval(`document.getElementById("img1").currentSrc`),
+      /test\.png/
+    )
+    await check(
+      () => browser.eval(`document.getElementById("img2").currentSrc`),
+      //This is an empty data url
+      /nonexistent-img\.png/
+    )
+    await check(
+      () => browser.eval(`document.getElementById("msg1").textContent`),
+      'no error occured'
+    )
+    await check(
+      () => browser.eval(`document.getElementById("msg2").textContent`),
+      'error occured while loading img2'
+    )
+    setTimeout(() => {}, [10000])
+  })
+
   it('should work with image with blob src', async () => {
     let browser
     try {