From 28328379f89dd41bee7eee618a570b52bc906d53 Mon Sep 17 00:00:00 2001
From: shinkj11 <76468090+shinkj11@users.noreply.github.com>
Date: Wed, 20 Apr 2022 09:49:14 +0900
Subject: [PATCH 1/3] Update image.tsx

---
 packages/next/client/image.tsx | 1 -
 1 file changed, 1 deletion(-)

diff --git a/packages/next/client/image.tsx b/packages/next/client/image.tsx
index 6a793cdae1cd..9fbb4e4e6a82 100644
--- a/packages/next/client/image.tsx
+++ b/packages/next/client/image.tsx
@@ -368,7 +368,6 @@ export default function Image({
   objectFit,
   objectPosition,
   onLoadingComplete,
-  onError,
   placeholder = 'empty',
   blurDataURL,
   ...all

From 75d4676a527cef8c50f3e77dadedf97e8ef20f24 Mon Sep 17 00:00:00 2001
From: "kyeongjun.shin" <>
Date: Fri, 22 Apr 2022 17:55:38 +0900
Subject: [PATCH 2/3] Add test for image onError

---
 .../image-component/default/pages/on-error.js | 44 +++++++++++++++++++
 .../default/test/index.test.js                | 23 ++++++++++
 2 files changed, 67 insertions(+)
 create mode 100644 test/integration/image-component/default/pages/on-error.js

diff --git a/test/integration/image-component/default/pages/on-error.js b/test/integration/image-component/default/pages/on-error.js
new file mode 100644
index 000000000000..a976887359ac
--- /dev/null
+++ b/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
diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index a9d2ab902bad..e444013df946 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/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 {

From dfc6e09859b976a4bb623b8ae936c6d170420fec Mon Sep 17 00:00:00 2001
From: Steven <steven@ceriously.com>
Date: Fri, 22 Apr 2022 09:35:26 -0400
Subject: [PATCH 3/3] Remove unused setTimeout

---
 test/integration/image-component/default/test/index.test.js | 1 -
 1 file changed, 1 deletion(-)

diff --git a/test/integration/image-component/default/test/index.test.js b/test/integration/image-component/default/test/index.test.js
index e444013df946..13e8bec9a719 100644
--- a/test/integration/image-component/default/test/index.test.js
+++ b/test/integration/image-component/default/test/index.test.js
@@ -383,7 +383,6 @@ function runTests(mode) {
       () => browser.eval(`document.getElementById("msg2").textContent`),
       'error occured while loading img2'
     )
-    setTimeout(() => {}, [10000])
   })
 
   it('should work with image with blob src', async () => {