feat(react-native): Wrap root app component

[antonis]

Fixes #280

Wraps root app component with Sentry.wrap in the following cases:

1. Simple named exports like export default App;
2. Named function exports like:

  export default function RootLayout() {
    // function body
  }

3. Anonymous function exports like:

  export default () => {
    // function body
  }

4. Simple wrapped exports like export default Another.wrapper(App);

Another approach tested which works for the cases above (and covered by the tests) and may cover even more since it is more generic is the replacing the addSentryWrap method with the following:

function addSentryWrap(js: string): string {
  // Replace export default with export default Sentry.wrap(
  let wrappedJs = js.replace(/export default\s+/g, 'export default Sentry.wrap(');

  // If the file ends with `}`, replace the last `}` with `});`
  if (wrappedJs.trim().endsWith('}')) {
    wrappedJs = wrappedJs.replace(/\}\s*$/, '});');
  }
  // If the file ends with `;`, replace the last `;` with `);`
  else if (wrappedJs.trim().endsWith(';')) {
    wrappedJs = wrappedJs.replace(/;\s*$/, ');');
  }

  return wrappedJs;
}

I chose the more complicated "regex" approach to be more in control of the cases covered, but happy to discuss if this or any other suggestion makes more sense🙏

Success	Failure

[github-actions]

	Messages
📖	Do not forget to update Sentry-docs with your feature once the pull request gets approved.

Generated by 🚫 dangerJS against f30cfee

[codecov]

Codecov Report

Attention: Patch coverage is 51.25000% with 39 lines in your changes missing coverage. Please review.

Project coverage is 51.22%. Comparing base (2d006c9) to head (f30cfee).

Files with missing lines	Patch %	Lines
src/react-native/javascript.ts	51.28%	38 Missing ⚠️
src/react-native/react-native-wizard.ts	50.00%	1 Missing ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##           master     #835      +/-   ##
==========================================
+ Coverage   51.15%   51.22%   +0.07%     
==========================================
  Files          53       53              
  Lines        3517     3590      +73     
  Branches      825      831       +6     
==========================================
+ Hits         1799     1839      +40     
- Misses       1591     1750     +159     
+ Partials      127        1     -126     

Flag	Coverage Δ
e2e-tests	80.85% <ø> (ø)
unit-tests	50.01% <51.25%> (+0.10%)	⬆️

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

[krystofwoldrich]

The traceStep function creates a span, and since those have parent-child relations we can reuse the same name. No need to pass unique for different steps.

[krystofwoldrich]

The Sentry.init used regex mainly because it was written before we started using AST manipulation.

Checkout

sentry-wizard/src/react-native/metro.ts

Line 114 in fe849fe

export async function patchMetroConfigWithSentrySerializer() {

or/and

sentry-wizard/src/utils/ast-utils.ts

Line 85 in f30cfee

export function getOrSetObjectProperty(

Using the AST manipulation will be more safe to adjust the code.