Add @sentry/react-native/playground (#4916)

* feat(wizard): Add Wizard component and integrate into Expo sample app

* add mock data, fix visuals

* Add light style and open in browser button

* add better error examples, animate sentaur

* use playground naming, add hoc for easy access

* fix lint

* update assets to avoid inclusion when playground is not in use

* move examples to a standalone file

* Add sentry/react-native/playground export and tests

* fix lint and snaps

* add changelog

* fix message

* removed comment

---------

Co-authored-by: lucas <[email protected]>

Author: krystofwoldrich

CHANGELOG.md

@@ -8,6 +8,26 @@
 
 ## Unreleased
 
+### Features
+
+- Introducing `@sentry/react-native/playground` ([#4916](https://github.com/getsentry/sentry-react-native/pull/4916))
+
+  The new `withSentryPlayground` component allows developers to verify
+  that the SDK is properly configured and reports errors as expected.
+
+  ```jsx
+  import * as Sentry from '@sentry/react-native';
+  import { withSentryPlayground } from '@sentry/react-native/playground';
+
+  function App() {
+    return <View>...</View>;
+  }
+
+  export default withSentryPlayground(
+    Sentry.wrap(App)
+  );
+  ```
+
 ### Fixes
 
 - User set by `Sentry.setUser` is prefilled in Feedback Widget ([#4901](https://github.com/getsentry/sentry-react-native/pull/4901))

packages/core/.eslintrc.js

@@ -19,6 +19,8 @@ module.exports = {
     'metro.d.ts',
     'plugin/build/**/*',
     'expo.d.ts',
+    'playground.js',
+    'playground.d.ts',
   ],
   overrides: [
     {

packages/core/playground.d.ts

@@ -0,0 +1 @@
+export * from './dist/js/playground';

packages/core/playground.js

@@ -0,0 +1 @@
+export * from './dist/js/playground';

packages/core/playground_animations/bug.gif

@@ -4,8 +4,8 @@ module.exports = {
       ios: {},
       android: {
         packageInstance: 'new RNSentryPackage()',
-        packageImportPath: 'import io.sentry.react.RNSentryPackage;'
-      }
-    }
-  }
+        packageImportPath: 'import io.sentry.react.RNSentryPackage;',
+      },
+    },
+  },
 };

packages/core/playground_animations/hi.gif

@@ -0,0 +1,38 @@
+import { captureException } from '@sentry/core';
+
+import { NATIVE } from '../wrapper';
+
+// This is a placeholder to match the example code with what Sentry SDK users would see.
+const Sentry = {
+  captureException,
+  nativeCrash: (): void => {
+    NATIVE.nativeCrash();
+  },
+};
+
+/**
+ * Example of error handling with Sentry integration.
+ */
+export const tryCatchExample = (): void => {
+  try {
+    // If you see the line below highlighted the source maps are working correctly.
+    throw new Error('This is a test caught error.');
+  } catch (e) {
+    Sentry.captureException(e);
+  }
+};
+
+/**
+ * Example of an uncaught error causing a crash from JS.
+ */
+export const uncaughtErrorExample = (): void => {
+  // If you see the line below highlighted the source maps are working correctly.
+  throw new Error('This is a test uncaught error.');
+};
+
+/**
+ * Example of a native crash.
+ */
+export const nativeCrashExample = (): void => {
+  Sentry.nativeCrash();
+};