Refactor Ionic/Capacitor/Cordova Wizards (#5093)

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

Author: lucas-zimerman

src/includes/getting-started-install/javascript.capacitor.mdx

@@ -16,7 +16,13 @@ npm install --save @sentry/capacitor
 yarn add @sentry/capacitor
 ```
 
-### Android Specifics
+### Capacitor 2 - Android Specifics
+
+<Note>
+
+ This step is not needed if you are using Capacitor 3
+ 
+</Note>
 
 Add the plugin declaration to your `MainActivity.java` file
 

src/platforms/javascript/guides/capacitor/troubleshooting.mdx

@@ -27,3 +27,28 @@ Then update your iOS settings:
 ```bash
 npx cap sync
 ```
+
+## Capacitor on Android
+
+### No events sent
+
+Check if you added `SentryCapacitor` to the bridge. This step is required for Capacitor 2 and optional on Capacitor 3. (It's only required if you are initializing other plugins using the old method. If so, we recommend you use `registerPlugin` instead of the deprecated code for initializing plugins.)
+
+```java
+import io.sentry.capacitor.SentryCapacitor;
+
+public class MainActivity extends BridgeActivity {
+  @Override
+  public void onCreate(Bundle savedInstanceState) {
+    super.onCreate(savedInstanceState);
+
+    // Capacitor 3
+    registerPlugin(SentryCapacitor.class);
+
+    // Capacitor 2
+    this.init(savedInstanceState, new ArrayList<Class<? extends Plugin>>() {{
+      add(SentryCapacitor.class);
+    }});
+  }
+}
+```

src/wizard/capacitor/index.md

@@ -25,7 +25,13 @@ npm install --save @sentry/capacitor @sentry/tracing
 yarn add @sentry/capacitor
 ```
 
-## Android Installation
+## Capacitor 2 - Android Installation
+
+<Note>
+
+ This step is not needed if you are using Capacitor 3
+ 
+</Note>
 
 Then, add the `SentryCapacitor` plugin class inside the `onCreate` method of your `MainActivity` file.
 
@@ -59,7 +65,7 @@ import com.getcapacitor.Plugin
 import io.sentry.capacitor.SentryCapacitor
 
 class MainActivity : BridgeActivity() {
-  fun onCreate(savedInstanceState: Bundle?) {
+  override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     // Initializes the Bridge
     this.init(
@@ -78,26 +84,26 @@ With Ionic/Angular:
 
 ```typescript
 // app.module.ts
-import * as Sentry from "@sentry/capacitor";
-import * as SentryAngular from "@sentry/angular";
+import * as Sentry from '@sentry/capacitor';
+import * as SentryAngular from '@sentry/angular';
 // If taking advantage of automatic instrumentation (highly recommended)
-import { BrowserTracing } from "@sentry/tracing";
+import { BrowserTracing } from '@sentry/tracing';
 // Or, if only manually tracing
 // import "@sentry/tracing";
 // Note: You MUST import the package in some way for tracing to work
 
 Sentry.init(
   {
-    dsn: "___PUBLIC_DSN___",
+    dsn: '___PUBLIC_DSN___',
     // To set your release and dist versions
-    release: "my-project-name@" + process.env.npm_package_version,
-    dist: "1",
+    release: 'my-project-name@' + process.env.npm_package_version,
+    dist: '1',
     // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
     // We recommend adjusting this value in production.
     tracesSampleRate: 1.0,
     integrations: [
       new BrowserTracing({
-        tracingOrigins: ["localhost", "https://yourserver.io/api"],
+        tracingOrigins: ['localhost', 'https://yourserver.io/api'],
       }),
     ]
   },
@@ -120,15 +126,15 @@ Standalone:
 
 ```javascript
 // App.js
-import * as Sentry from "@sentry/capacitor";
+import * as Sentry from '@sentry/capacitor';
 
 Sentry.init({
-  dsn: "___PUBLIC_DSN___",
+  dsn: '___PUBLIC_DSN___',
 
-  // Set your release version, such as "[email protected]"
-  release: "my-project-name@<release-name>",
+  // Set your release version, such as '[email protected]'
+  release: 'my-project-name@<release-name>',
   // Set your dist version, such as "1"
-  dist: "<dist>",
+  dist: '<dist>',
 });
 ```
 
@@ -137,22 +143,22 @@ Sentry.init({
 This snippet includes an intentional error, so you can test that everything is working as soon as you set it up:
 
 ```javascript
-import * as Sentry from "@sentry/capacitor";
+import * as Sentry from '@sentry/capacitor';
 
-Sentry.captureException("Test Captured Exception");
+Sentry.captureException('Test Captured Exception');
 ```
 
 You can also throw an error anywhere in your application:
 
 ```javascript
 // Must be thrown after Sentry.init is called to be captured.
-throw new Error(`Test Thrown Error`);
+throw new Error('Test Thrown Error');
 ```
 
 Or trigger a native crash:
 
 ```javascript
-import * as Sentry from "@sentry/capacitor";
+import * as Sentry from '@sentry/capacitor';
 
 Sentry.nativeCrash();
 ```

src/wizard/cordova/index.md

@@ -15,7 +15,7 @@ You should `init` the SDK in the `deviceReady` function, to make sure the native
 
 ```javascript
 onDeviceReady: function() {
-  var Sentry = cordova.require("sentry-cordova.Sentry");
+  var Sentry = cordova.require('sentry-cordova.Sentry');
   Sentry.init({ dsn: '___PUBLIC_DSN___' });
 }
 ```

src/wizard/ionic/index.md

@@ -18,7 +18,13 @@ yarn add @sentry/capacitor @sentry/angular
 ```
 The same installation process applies to the other siblings, all you need to do is to replace `@sentry/angular` by the desired sibling.
 
-## Android Installation
+## Capacitor 2 - Android Installation
+
+<Note>
+
+ This step is not needed if you are using Capacitor 3
+ 
+</Note>
 
 Then, add the `SentryCapacitor` plugin class inside the `onCreate` method of your `MainActivity` file.
 
@@ -52,7 +58,7 @@ import com.getcapacitor.Plugin
 import io.sentry.capacitor.SentryCapacitor
 
 class MainActivity : BridgeActivity() {
-  fun onCreate(savedInstanceState: Bundle?) {
+  override fun onCreate(savedInstanceState: Bundle?) {
     super.onCreate(savedInstanceState)
     // Initializes the Bridge
     this.init(
@@ -68,24 +74,24 @@ class MainActivity : BridgeActivity() {
 You must initialize the Sentry SDK as early as you can:
 
 ```javascript
-import * as Sentry from "@sentry/capacitor";
-// The example is using Angular, Import "@sentry/vue" or "@sentry/react" when using a Sibling different than Angular.
-import * as SentrySibling from "@sentry/angular";
+import * as Sentry from '@sentry/capacitor';
+// The example is using Angular, Import '@sentry/vue' or '@sentry/react' when using a Sibling different than Angular.
+import * as SentrySibling from '@sentry/angular';
 // For automatic instrumentation (highly recommended)
-import { BrowserTracing } from "@sentry/tracing";
+import { BrowserTracing } from '@sentry/tracing';
 
 Sentry.init(
   {
-    dsn: "___PUBLIC_DSN___",
+    dsn: '___PUBLIC_DSN___',
     // To set your release and dist versions
-    release: "my-project-name@" + process.env.npm_package_version,
-    dist: "1",
+    release: 'my-project-name@' + process.env.npm_package_version,
+    dist: '1',
     // Set tracesSampleRate to 1.0 to capture 100% of transactions for performance monitoring.
     // We recommend adjusting this value in production.
     tracesSampleRate: 1.0,
     integrations: [
       new BrowserTracing({
-        tracingOrigins: ["localhost", "https://yourserver.io/api"],
+        tracingOrigins: ['localhost', 'https://yourserver.io/api'],
       }),
     ]
   },
@@ -113,22 +119,22 @@ Additionally for Angular, you will also need to alter NgModule (same code doesn'
 This snippet includes an intentional error, so you can test that everything is working as soon as you set it up:
 
 ```javascript
-import * as Sentry from "@sentry/capacitor";
+import * as Sentry from '@sentry/capacitor';
 
-Sentry.captureException("Test Captured Exception");
+Sentry.captureException('Test Captured Exception');
 ```
 
 You can also throw an error anywhere in your application:
 
 ```javascript
 // Must be thrown after Sentry.init is called to be captured.
-throw new Error(`Test Thrown Error`);
+throw new Error('Test Thrown Error');
 ```
 
 Or trigger a native crash:
 
 ```javascript
-import * as Sentry from "@sentry/capacitor";
+import * as Sentry from '@sentry/capacitor';
 
 Sentry.nativeCrash();
 ```