Add documentation for Hermes sampling profiler

[jessieAnhNguyen]

Summary:

---

This PR adds a new doc for Hermes sampling profiler. This is built as part of the goal to visualize the performance of JavaScript running on Hermes in a React Native app. @saphal1998 and I worked on this under @axemclion and @jevakallio guidance.

• This new documentation profile-hermes.md instructs the user on:

  • How to profile their React Native app running on Hermes.
  • How to use the command to download Hermes profile (this feature will land soon once this PR feat: add a command to download the Hermes Sampling Profiler to a local machine react-native-community/cli#1246 is approved)
  • How to visualize the profile using Chrome DevTools
  • Understanding how the Hermes Profile Transformer works

• The doc is added to the sidebar in the Performance session, right after Profiling

Test Plan:

---

• We followed the instruction on Making a change
• The new doc looks like this
  

[facebook-github-bot]

Hi @jessieAnhNguyen!

Thank you for your pull request and welcome to our community. We require contributors to sign our Contributor License Agreement, and we don't seem to have you on file.

In order for us to review and merge your code, please sign at https://code.facebook.com/cla. If you are contributing on behalf of someone else (eg your employer), the individual CLA may not be sufficient and your employer may need to sign the corporate CLA.

If you have received this in error or have any questions, please contact us at [email protected]. Thanks!

[react-native-bot]

Deploy preview for react-native ready!

Built with commit c1c0fc2

https://deploy-preview-2159--react-native.netlify.app

Changes to docs/ are reflected in the next "master" version.

Thank you for your contributions.

_{How to Contribute • Documentation Sources}

[Simek]

Hi @jessieAnhNguyen, thank you so much for this article, it is a great addition! 👍

Unfortunately there are some minor display issues on the newly added page (due to Markdown parsing by Docususaurus):

Let me know if you will have any problems fixing it, I can try to help, preview:
https://deploy-preview-2159--react-native.netlify.app/docs/next/profile-hermes

[saphal1998]

@Simek, thank you so much for getting back to us so soon. We have resolved the markdown parsing issue, the PR should be ready for review! 🎉

[Simek]

@saphal1998 After the tweaks, from the technical stand point this PR LGTM, but since it is a bigger addition I have asked @rachelnabors to review it too 🙂

[rachelnabors]

I made a PR of a few changes—great stuff! I would like to go through one more time, but first, please check that the step-by-step instructions conform to our menu/command styleguides. Thank you!

[jessieAnhNguyen]

Hi @rachelnabors, thank you a lot for giving the feedback! @saphal1998 and I have merged your PR and worked to edit the wording more based on the menu/command guidelines. Please review our changes and let us know if we should change anything else 🎉

[Simek]

@jessieAnhNguyen According to the latest changes in #2157: Can you move the added images to website/static/docs/assets/?

[jessieAnhNguyen]

Hi @Simek I've moved the images to the new directory 😄 Thanks for pointing that out!

[rachelnabors]

Hey there, I PRed some changes to this PR. Could you merge them so we can merge this? Thanks!

[saphal1998]

Thanks for the review! We have merged the changes @rachelnabors

[rachelnabors]

Looks good. One last thing: Remove the first image under "enable sampling profiler"—it doesn't really explain anything.

[davelyon]

Thanks so much for documenting this, it's been immensely helpful for me! I wanted to share some feedback around the "Open the downloaded profile in Chrome DevTools" step. I haven't been able to get the regular devtools to correctly open the file, but I have been consistently able to get them open and viewable by using the tracing view at chrome://tracing and loading there.

I may have misunderstood how to get to the right state with the Chrome DevTools, so it might be that some clarification is needed on that step, otherwise I would suggest that the documentation direct users to the chrome://tracing page.

Thanks again for documenting this! 👍

[jessieAnhNguyen]

Hi @rachelnabors, I've deleted the image. Thanks for reviewing!

[saphal1998]

Hi @davelyon, so chrome://tracing opens the profile even without transforming it (i.e. the raw .cpuprofile file), however in that case, we cannot interpret much from the visualisation. This is why we opted for the visualisation in the Performance tab. So, can you, if possible, post the image of your performance profile on chrome://tracing and Chrome DevTools so that we can compare the two? Or even validate if they look identical?

I just want to check if the transformation took place. If the transformation did take place, then the visualisation on both of these should be identical according to us.

[rachelnabors]

Hey hey! Since @davelyon hasn't responded, I'm going to merge your PR. (If future edits are necessary, you can always edit the doc or file an issue!)

Thank you for your patience and hard work on this! Your contribution has made the docs more useful to more people :)