search

aws-amplify / amplify-js

A declarative JavaScript library for application development using cloud services.
https://docs.amplify.aws/lib/q/platform/js
Apache License 2.0
9.43k stars 2.12k forks source link

Storage.put() returns success when offline #9703

Closed dmost714 closed 2 years ago

dmost714 commented 2 years ago

Before opening, please confirm:

JavaScript Framework

React

Amplify APIs

Storage

Amplify Categories

storage

Environment information

``` # Put output below this line System: OS: macOS 12.2.1 CPU: (8) x64 Apple M1 Memory: 406.80 MB / 16.00 GB Shell: 5.8 - /bin/zsh Binaries: Node: 16.10.0 - /usr/local/bin/node Yarn: 1.22.17 - /usr/local/bin/yarn npm: 7.24.0 - /usr/local/bin/npm Browsers: Chrome: 99.0.4844.51 Edge: 99.0.1150.39 Firefox: 92.0 Safari: 15.3 npmPackages: @aws-amplify/ui-react: ^2.1.6 => 2.10.0 @aws-amplify/ui-react-internal: undefined () @aws-amplify/ui-react-legacy: undefined () @fontsource/inter: ^4.5.1 => 4.5.5 @headlessui/react: ^1.4.0 => 1.5.0 @heroicons/react: ^1.0.4 => 1.0.6 @types/react: ^17.0.33 => 17.0.40 @types/react-dom: ^17.0.10 => 17.0.13 @vitejs/plugin-react: ^1.0.7 => 1.2.0 autoprefixer: ^10.4.1 => 10.4.2 aws-amplify: ^4.3.11 => 4.3.16 crypto-js: ^4.1.1 => 4.1.1 daisyui: ^1.25.4 => 1.25.4 date-fns: ^2.28.0 => 2.28.0 nanoid: ^3.2.0 => 3.3.1 postcss: ^8.4.5 => 8.4.8 postcss-cli: ^9.1.0 => 9.1.0 postcss-import: ^14.0.2 => 14.0.2 prop-types: ^15.8.1 => 15.8.1 react: ^17.0.2 => 17.0.2 react-dom: ^17.0.2 => 17.0.2 react-dropzone: ^12.0.4 => 12.0.4 react-email-editor: https://github.com/dmost714/react-email-editor.git => 1.5.0 react-hook-form: ^7.26.0 => 7.28.0 react-router: ^6.2.1 => 6.2.2 react-router-dom: ^6.2.1 => 6.2.2 react-waypoint: ^10.1.0 => 10.1.0 tailwindcss: ^3.0.11 => 3.0.23 typescript: ^4.4.4 => 4.6.2 vite: ^2.7.2 => 2.8.6 xlsx: ^0.17.3 => 0.17.5 npmGlobalPackages: @aws-amplify/cli: 7.6.23 corepack: 0.9.0 fast-xml-parser: 3.21.1 gatsby-cli: 3.0.0 npm: 7.24.0 serverless: 2.41.2 standard: 16.0.3 tslint: 6.1.3 typescript: 4.2.4 ```

Describe the bug

The Storage.put() api does not fail when there is no network connection.

Expected behavior

If the API is unable to successfully upload the file it should throw an error or call the error callback.

Reproduction steps

  1. configure a front-end project that uses S3 storage via amplify
  2. add a code snippet that uploads a file and indicates if the file was successfully uploaded or not
  3. verify the upload snippet works (reports success or fail, file appears in S3 bucket when success is reported)
  4. disconnect the internet
  5. test upload snippet
  6. expect snippet to report the failure

Code Snippet

// Put your code below this line.

//
// Example using async/await in browser. file is type File
//
try {
  console.log(`file to upload`, file)
  const key = file.name
  const response = await Storage.put(key, file, {
    level: "private",
    contentType: file.type,
    progressCallback: (event: any) => { console.log('progress event', event) },
    errorCallback: (err) => console.log('error err', err),
    completeCallback: (event: any) => { console.log('complete event', event) }
  })
  console.log('storage put response', response)
} catch (error) {
  console.log(`exception: error`, error)
}

//
// Example using Promise w/ resumable
//
  try {
    console.log(`fileToUpload`, file)
    const key = file.name
    await new Promise((resolve, reject) => {
      Storage.put(key, file, {
        resumable: true,
        level: "private",
        contentType: file.type,
        progressCallback: (event: any) => { console.log('progress event', event) },
        completeCallback: (event: any) => {
          console.log('complete event', event)
          resolve(event)
        },
        errorCallback: (err) => {
          console.log('error err', err)
          reject(event)
        }
      })
    }).catch((reason) => { console.log('catch reason', reason) })
  } catch (error) {
    console.log(`upload error`, error)
  }

Log output

``` // Put your logs below this line // // Logs from async/await // [Log] fileToUpload – File {path: "leads-test.csv", name: "leads-test.csv", lastModified: 1647283136000, …} (CampaignPage.tsx, line 28) File {path: "leads-test.csv", name: "leads-test.csv", lastModified: 1647283136000, webkitRelativePath: "", size: 4344582, …}FilelastModified: 1647283136000name: "leads-test.csv"path: "leads-test.csv"size: 4344582type: "text/csv"webkitRelativePath: ""File Prototype [Error] The Internet connection appears to be offline. [Error] XMLHttpRequest cannot load https://pixelstopostcardsemail203142-dev.s3.us-east-2.amazonaws.com/private/us-east-2%3Afd408848-cf08-4d60-9c0d-a1aade0e4474/GIZMO-GCKH1TZHTBIJ/2022-03-15T14%3A05%3A57.153Z-leads-test.csv?x-id=PutObject due to access control checks. [Error] [ERROR] 05:57.192 axios-http-handler - Network Error error (anonymous function) (chunk-F27YNVWS.js:15462) (anonymous function) (chunk-F27YNVWS.js:15521) (anonymous function) (chunk-F27YNVWS.js:110050) promiseReactionJob [Log] retcode – {key: "GIZMO-GCKH1TZHTBIJ/2022-03-15T14:05:57.153Z-leads-test.csv"} (CampaignPage.tsx, line 42) [Error] Failed to load resource: The Internet connection appears to be offline. (2022-03-15T14:05:57.153Z-leads-test.csv, line 0) // // Logs from Promise w/ resumable // [Log] fileToUpload – File {path: "leads-test.csv", name: "leads-test.csv", lastModified: 1647283136000, …} (CampaignPage.tsx, line 28) File {path: "leads-test.csv", name: "leads-test.csv", lastModified: 1647283136000, webkitRelativePath: "", size: 4344582, …}File [Error] The Internet connection appears to be offline. [Error] XMLHttpRequest cannot load https://pixelstopostcardsemail203142-dev.s3.us-east-2.amazonaws.com/private/us-east-2%3Afd408848-cf08-4d60-9c0d-a1aade0e4474/GIZMO-GCKH1TZHTBIJ/2022-03-15T15%3A02%3A53.214Z-leads-test.csv?uploads= due to access control checks. [Error] [ERROR] 02:53.256 axios-http-handler - Network Error error (anonymous function) (chunk-F27YNVWS.js:15462) (anonymous function) (chunk-F27YNVWS.js:15521) (anonymous function) (chunk-F27YNVWS.js:110050) promiseReactionJob [Error] Failed to load resource: The Internet connection appears to be offline. (2022-03-15T15:02:53.214Z-leads-test.csv, line 0) [Error] The Internet connection appears to be offline. [Error] XMLHttpRequest cannot load https://pixelstopostcardsemail203142-dev.s3.us-east-2.amazonaws.com/private/us-east-2%3Afd408848-cf08-4d60-9c0d-a1aade0e4474/GIZMO-GCKH1TZHTBIJ/2022-03-15T15%3A02%3A53.214Z-leads-test.csv?partNumber=1&x-id=UploadPart due to access control checks. [Error] [ERROR] 02:53.262 axios-http-handler - Network Error error (anonymous function) (chunk-F27YNVWS.js:15462) (anonymous function) (chunk-F27YNVWS.js:15521) (anonymous function) (chunk-F27YNVWS.js:110050) promiseReactionJob [Log] progress event – {loaded: 4344582, total: 4344582} (CampaignPage.tsx, line 37) [Error] Failed to load resource: The Internet connection appears to be offline. (2022-03-15T15:02:53.214Z-leads-test.csv, line 0) [Error] The Internet connection appears to be offline. [Error] XMLHttpRequest cannot load https://pixelstopostcardsemail203142-dev.s3.us-east-2.amazonaws.com/private/us-east-2%3Afd408848-cf08-4d60-9c0d-a1aade0e4474/GIZMO-GCKH1TZHTBIJ/2022-03-15T15%3A02%3A53.214Z-leads-test.csv due to access control checks. [Error] [ERROR] 02:53.268 axios-http-handler - Network Error error (anonymous function) (chunk-F27YNVWS.js:15462) (anonymous function) (chunk-F27YNVWS.js:15521) (anonymous function) (chunk-F27YNVWS.js:110050) promiseReactionJob [Log] complete event – {key: "pixelstopostcardsemail203142-dev/GIZMO-GCKH1TZHTBIJ/2022-03-15T15:02:53.214Z-leads-test.csv"} (CampaignPage.tsx, line 40) [Error] Failed to load resource: The Internet connection appears to be offline. (2022-03-15T15:02:53.214Z-leads-test.csv, line 0) [Error] The Internet connection appears to be offline. [Error] XMLHttpRequest cannot load https://pixelstopostcardsemail203142-dev.s3.us-east-2.amazonaws.com/?list-type=2&prefix=private%2Fus-east-2%3Afd408848-cf08-4d60-9c0d-a1aade0e4474%2FGIZMO-GCKH1TZHTBIJ%2F2022-03-15T15%3A02%3A53.214Z-leads-test.csv due to access control checks. [Error] [ERROR] 02:53.307 axios-http-handler - Network Error error (anonymous function) (chunk-F27YNVWS.js:15462) (anonymous function) (chunk-F27YNVWS.js:15521) (anonymous function) (chunk-F27YNVWS.js:110050) promiseReactionJob [Error] Failed to load resource: The Internet connection appears to be offline. (pixelstopostcardsemail203142-dev.s3.us-east-2.amazonaws.com, line 0) [Error] Unhandled Promise Rejection: Error: File size does not match between local file and file on s3 step (chunk-F27YNVWS.js:110896) fulfilled (chunk-F27YNVWS.js:110806) promiseReactionJob [Log] [vite] hot updated: /src/routes/CampaignPage.tsx (client, line 446) ```

aws-exports.js

No response

Manual configuration

No response

Additional configuration

No response

Mobile Device

No response

Mobile Operating System

No response

Mobile Browser

No response

Mobile Browser Version

No response

Additional information and screenshots

This issue may be related: Storage.put of multipart file returns successfully upon failure

chrisbonifacio commented 2 years ago

Hi @dmost714 👋 thanks for raising this issue. It seems this behavior might be particular to multipart/resumable file uploads. Looks like we've already identified this to be a bug and is a duplicate of #8781. I'll reach to the team and see if there are any updates on this issue.

dmost714 commented 2 years ago

I'd be surprised if they're not related. That said, I am able to reproduce this with a 588 byte file and async/await, so this may be broader than multipart and resumable.

jamesaucode commented 2 years ago

Hi @dmost714, this should be fixed by #9587 and available on 4.3.18

dmost714 commented 2 years ago

I tested my code w/ network OFF and verified I could still reproduce the bug. I updated to "aws-amplify": "^4.3.18", re-tested and can confirm the bug is fixed.

Thank you!

github-actions[bot] commented 1 year ago

This issue has been automatically locked since there hasn't been any recent activity after it was closed. Please open a new issue for related bugs.

Looking for a help forum? We recommend joining the Amplify Community Discord server *-help channels or Discussions for those types of questions.