Display a Note

Had this exact issue, I had “authorizor” in the yml instead of authorizer

1 Like

Glad you figure it out. Thanks for reporting back.

Hello,

Thank you for this awesome tutorial!

I am having trouble getting the display note page to load. Similar to previous users, I am getting an
“Error: Request failed with status 500” in the front end when I click on a note in the notes list.

I checked the AWS cloudwatch logs and although I’m not sure what to expect, it does not look like it is throwing an error.

I also tried manually going to the url of one of the note Id’s (localhost:3000/notes/{noteId}) and get the same “Request Failed” message and it brings me to the a different webpage (localhost:3000/notes/undefined)

I believe I followed the instructions correctly and am checking with the repo to make client github repo to make sure my Home, Router and Notes js pages are the same up until this point in the tutorial.

Do you have any ideas what the error could be? Also any debugging steps/ techniques would be greatly appreciated!

Thanks

I found the issue. I used chrome’s inspect tool to see that the link wasn’t being defined correctly so I figured there might be an error somewhere else.

I had named key in the backend set to noteID instead of noteId for some reason and that was causing undefined to show up instead of the correct key.

Thanks again for the tutorial! Will continue going through it

2 Likes

Ah glad you figured it out!

1 Like

Hello,

Thank you for this awesome tutorial!

I am having trouble getting the display note page to load. I am getting an
“Error: Request failed with status 500” in the front end when I click on a note in the notes list.!
Here is my error and log
1|449x131


Do you have any ideas how to solve this?

Hello,

I have an issue when displaying a note with an attachment :

If I comment the following code: the note loads properly :

        {this.state.note.attachment &&
          <FormGroup>
            <FormLabel>Attachment</FormLabel>
            <FormControl.Static>
              <a
                target="_blank"
                rel="noopener noreferrer"
                href={this.state.attachmentURL}
              >
                {this.formatFilename(this.state.note.attachment)}
              </a>
            </FormControl.Static>
          </FormGroup>}

Edit : After trying to commend/uncomment some code, I noticed that it’s the FormControl.Static which cause the bug. If I remove it, it’s working.

Thx for your help ! :wink:

Hmm that is a CloudWatch Alarm, it isn’t the error log. Have you looked at your CloudWatch logs?

Hello,
So far a great tutorial, thanks!
I am having this issue with retrieving an item by id in the Notes Container. What’s odd is that the API.get method works for getting back a list of items but throws this network error when requesting by :id
Code:

  async componentDidMount() {
    try {
      let attachmentURL;
      const note = await this.getNote();
      const { content, attachment } = note;

      if (attachment) {
        attachmentURL = await Storage.vault.get(attachment);
      }

      this.setState({
        note,
        content,
        attachmentURL
      });
    } catch (e) {
      alert(e);
    }
  }

  getNote() {
    return API.get("notes", `/notes/${this.props.match.params.id}`);
  }

here’s a screenshot of the error:


Has anybody come across this by any chance, and willing to lend a hand, it’d be awesome!
Well thanks! I will continue to dig some more on this issue.

Cool, I was able to figure it out ^
after reading the serverless docs I found that I had to define req params for this GET handler
so now my serverless.yml looks like:

      get:
          handler: src/get.main
          events:
            - http:
                path: notes/{id}
                method: get
                request:
                    (tab)parameters:
                        (tab, tab)paths:
                           (tabx3) id: true
   cors: true
   authorizer: aws_iam

The indentation is all messed up but follows a yml structure.

1 Like

Glad you figured it out!

Thanks a lot for the great tip. The issue was the links to the notes were showing as undefined in the inspect. The issue (for me atleat) was in the previous step “Call the List API”.

The code for renderNotesList had “noteID” in the link container whereas as I had it as noteid thoughout.

Changed the renderNotesList code and it worked fine.

1 Like

Hey Im getting the same error but im not sure I understand what your solution does to fix the problem. I copied and pasted your solution into my serverless yml and it didnt work.
can you please possibly explain to me how your solution fixed the issue?

@jayair I have the same issue! “Access to XMLHttpRequest at ‘https://bv3ee5cw5b.execute-api.us-east-2.amazonaws.com/prod/Jobs/75cabd20-e9ee-11e9-86e6-e1ff79f4a41b’ from origin ‘http://localhost:3000’ has been blocked by CORS policy: Response to preflight request doesn’t pass access control check: It does not have HTTP ok status.”

Please help! Idk what params or paths or requests to make in my yml to make this work.

I would ensure that cors: true is set in your serverless.yml - https://github.com/AnomalyInnovations/serverless-stack-demo-api/blob/master/serverless.yml#L71