Make Sentry DSN configurable

app/soapbox/actions/soapbox.js

@@ -59,6 +59,7 @@ export const makeDefaultConfig = features => {
     }),
     aboutPages: ImmutableMap(),
     authenticatedProfile: true,
+    sentryDsn: '',
   });
 };
 

app/soapbox/features/soapbox_config/index.js

@@ -38,6 +38,8 @@ const messages = defineMessages({
   heading: { id: 'column.soapbox_config', defaultMessage: 'Soapbox config' },
   saved: { id: 'soapbox_config.saved', defaultMessage: 'Soapbox config saved!' },
   copyrightFooterLabel: { id: 'soapbox_config.copyright_footer.meta_fields.label_placeholder', defaultMessage: 'Copyright footer' },
+  sentryDsnLabel: { id: 'soapbox_config.sentry_dsn_label', defaultMessage: 'Sentry DSN' },
+  sentryDsnHint: { id: 'soapbox_config.sentry_dsn_hint', defaultMessage: 'Enable error monitoring with a Sentry-compatible DSN.' },
   promoItemIcon: { id: 'soapbox_config.promo_panel.meta_fields.icon_placeholder', defaultMessage: 'Icon' },
   promoItemLabel: { id: 'soapbox_config.promo_panel.meta_fields.label_placeholder', defaultMessage: 'Label' },
   promoItemURL: { id: 'soapbox_config.promo_panel.meta_fields.url_placeholder', defaultMessage: 'URL' },
@@ -264,6 +266,14 @@ class SoapboxConfig extends ImmutablePureComponent {
                 value={soapbox.get('copyright')}
                 onChange={this.handleChange(['copyright'], (e) => e.target.value)}
               />
+              <TextInput
+                name='sentryDsn'
+                label={intl.formatMessage(messages.sentryDsnLabel)}
+                placeholder='https://...'
+                hint={intl.formatMessage(messages.sentryDsnHint)}
+                value={soapbox.get('sentryDsn')}
+                onChange={this.handleChange(['sentryDsn'], (e) => e.target.value)}
+              />
             </FieldsGroup>
             <FieldsGroup>
               <Checkbox

app/soapbox/main.js

@@ -5,7 +5,7 @@ import * as OfflinePluginRuntime from '@lcdp/offline-plugin/runtime';
 import React from 'react';
 import ReactDOM from 'react-dom';
 
-import { NODE_ENV } from 'soapbox/build_config';
+import { NODE_ENV, SENTRY_DSN } from 'soapbox/build_config';
 
 import { default as Soapbox } from './containers/soapbox';
 import * as monitoring from './monitoring';
@@ -16,7 +16,9 @@ function main() {
   perf.start('main()');
 
   // Sentry
-  monitoring.start();
+  if (SENTRY_DSN) {
+    monitoring.start(SENTRY_DSN);
+  }
 
   ready(() => {
     const mountNode = document.getElementById('soapbox');

app/soapbox/monitoring.js

@@ -1,12 +1,12 @@
-import { NODE_ENV, SENTRY_DSN } from 'soapbox/build_config';
+import { NODE_ENV } from 'soapbox/build_config';
 
-export const start = () => {
+export const start = (dsn) => {
   Promise.all([
     import(/* webpackChunkName: "error" */'@sentry/react'),
     import(/* webpackChunkName: "error" */'@sentry/tracing'),
   ]).then(([Sentry, { Integrations: Integrations }]) => {
     Sentry.init({
-      dsn: SENTRY_DSN,
+      dsn,
       environment: NODE_ENV,
       debug: false,
       integrations: [new Integrations.BrowserTracing()],

app/soapbox/reducers/soapbox.js

@@ -1,6 +1,7 @@
 import { Map as ImmutableMap, fromJS } from 'immutable';
 
 import { PLEROMA_PRELOAD_IMPORT } from 'soapbox/actions/preload';
+import * as monitoring from 'soapbox/monitoring';
 import KVStore from 'soapbox/storage/kv_store';
 import { ConfigDB } from 'soapbox/utils/config_db';
 
@@ -46,7 +47,14 @@ const persistSoapboxConfig = (soapboxConfig, host) => {
 };
 
 const importSoapboxConfig = (state, soapboxConfig, host) => {
+  const sentryDsn = soapboxConfig.get('sentryDsn');
+
   persistSoapboxConfig(soapboxConfig, host);
+
+  if (sentryDsn) {
+    monitoring.start(sentryDsn);
+  }
+
   return soapboxConfig;
 };