Merge branch 'sentry-async' into 'develop'

Webpack: chunk Sentry to reduce entrypoint size

See merge request soapbox-pub/soapbox-fe!750

app/soapbox/components/error_boundary.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import PropTypes from 'prop-types';
 import { FormattedMessage } from 'react-intl';
-import * as Sentry from '@sentry/browser';
+import { captureException } from 'soapbox/monitoring';
 
 export default class ErrorBoundary extends React.PureComponent {
 
@@ -15,7 +15,7 @@ export default class ErrorBoundary extends React.PureComponent {
   }
 
   componentDidCatch(error, info) {
-    Sentry.captureException(error);
+    captureException(error);
 
     this.setState({
       hasError: true,

app/soapbox/monitoring.js

@@ -1,16 +1,27 @@
-import * as Sentry from '@sentry/react';
-import { Integrations } from '@sentry/tracing';
 import { NODE_ENV, SENTRY_DSN } from 'soapbox/build_config';
 
-export function start() {
-  Sentry.init({
-    dsn: SENTRY_DSN,
-    environment: NODE_ENV,
-    debug: false,
-    integrations: [new Integrations.BrowserTracing()],
+export const start = () => {
+  Promise.all([
+    import(/* webpackChunkName: "error" */'@sentry/react'),
+    import(/* webpackChunkName: "error" */'@sentry/tracing'),
+  ]).then(([Sentry, { Integrations: Integrations }]) => {
+    Sentry.init({
+      dsn: SENTRY_DSN,
+      environment: NODE_ENV,
+      debug: false,
+      integrations: [new Integrations.BrowserTracing()],
 
-    // We recommend adjusting this value in production, or using tracesSampler
-    // for finer control
-    tracesSampleRate: 1.0,
-  });
-}
+      // We recommend adjusting this value in production, or using tracesSampler
+      // for finer control
+      tracesSampleRate: 1.0,
+    });
+  }).catch(console.error);
+};
+
+export const captureException = error => {
+  import(/* webpackChunkName: "error" */'@sentry/react')
+    .then(Sentry => {
+      Sentry.captureException(error);
+    })
+    .catch(console.error);
+};