TypeError: Failed to fetch at c when trying to attach files in SPFx

Anitha-1997 commented 2 months ago

Major Version

3.x

Minor Version Number

3.24.0

Target environment

SharePoint Framework

Additional environment details

I'm using node version 18.20.0.

Expected or Desired Behavior

I'm trying to create a new item in list and if there are any attachments added to a formik form, I am updating that item with the attachments.

Observed Behavior

It works properly in most of the scenario. But some users are getting an issue . Attachments doesn't seems to get attached. And it provides a log as below:

"TypeError: Failed to fetch at c (https://publiccdn.sharepointonline.com/dummysite.sharepoint.com/sites/AppStore/ClientSideAssets/f25c455d-16ce-453c-8f3f-538e4eaf03c3/biz-ops-app-webpart-web-part_b0b1cc2d6cb19c858147.js:2:1087976) at c (https://publiccdn.sharepointonline.com/dummysite.sharepoint.com/sites/AppStore/ClientSideAssets/f25c455d-16ce-453c-8f3f-538e4eaf03c3/biz-ops-app-webpart-web-part_b0b1cc2d6cb19c858147.js:2:1088055) at async https://publiccdn.sharepointonline.com/dummysite.sharepoint.com/sites/AppStore/ClientSideAssets/f25c455d-16ce-453c-8f3f-538e4eaf03c3/biz-ops-app-webpart-web-part_b0b1cc2d6cb19c858147.js:2:1084734"__

Steps to Reproduce

Here is the code I'm running,


const newProjectVariation: IItemAddResult = await sp.web.lists
.getByTitle("DC-SS-ProjectVariations")
.items.add(newVariationProject);
try {
const item: IItem = sp.web.lists
.getByTitle("DC-SS-ProjectVariations")
.items.getById(newProjectVariation?.data?.Id);
 for (let i = 0; i < values.attachedFiles.length; i++) {
    const file = values.attachedFiles[i];
    await item.attachmentFiles.add(file.name, file);
  }
} catch (err) {
  await sp.web.lists.getByTitle("DC-SS-Logs").items.add({
    Title: err.message,
    LogType: "Error",
    CodeFileName: "ProjectVariationServices",
    MethodName: "createSubmitProjectVariation/fetch-data",
    StackTrace: err.stack,
    AffectedUserId: userID,
    Response: err?.response?.url,
    Status: err.status,
    StatusText: err.statusText,
  });
  throw new Error(err);
}```

juliemturner commented 2 months ago

Unfortunately, with intermittent issues like you're having I'm not going to really be able to help you. I can suggest a few things:

Verify that you actually got a value in the add method before trying to retrieve the new item
Don't "throw" and error from the catch, that's just creating a situation where you can't debug, use console.log instead... i get that you're sending your errors to a list so you can review them but throwing an error here is going to make it pretty difficult to debug the issue on the user's machine, you need to see real time what's happening.
Add some debug or info-based console logging in the flow of the code so that you can (on the user's machine) see which of these calls is failing.

Good luck!

bcameron1231 commented 2 months ago

Are you able to open up dev tools (F12) and see what the network calls says?

Anitha-1997 commented 2 months ago

Since the issue occur intermittently, I have not been able to reproduce the error in user's system. When we try to debug, it always result in a successful response.

patrick-rodgers commented 2 months ago

Closing this issue as answered. If you have additional questions or we did not answer your question, please open a new issue, ref this issue, and provide any additional details available. Thank you!

juliemturner commented 2 months ago

Since the issue occur intermittently, I have not been able to reproduce the error in user's system. When we try to debug, it always result in a successful response.

That's likely a race condition then, so you may need to restructure your code.

github-actions[bot] commented 2 months ago

This issue is locked for inactivity or age. If you have a related issue please open a new issue and reference this one. Closed issues are not tracked.

pnp / pnpjs