Removed Sentry and unused data options from comments-ui

refs https://github.com/TryGhost/Team/issues/3504

- Sentry was never setup and we don't use it
- Styles have been moved to inline JS styles (no separate css file generated)
- App version was never used
- Improved current script tag detection

apps/comments-ui/package.json

@@ -42,7 +42,6 @@
   },
   "dependencies": {
     "@headlessui/react": "1.6.6",
-    "@sentry/react": "7.11.1",
     "@tiptap/core": "2.0.0-beta.182",
     "@tiptap/extension-blockquote": "2.0.0-beta.29",
     "@tiptap/extension-document": "2.0.0-beta.17",

apps/comments-ui/src/App.js

@@ -22,15 +22,6 @@ function AuthFrame({adminUrl, onLoad}) {
     );
 }
 
-function SentryErrorBoundary({dsn, children}) {
-    // todo: add Sentry.ErrorBoundary wrapper if Sentry is enabled
-    return (
-        <>
-            {children}
-        </>
-    );
-}
-
 export default class App extends React.Component {
     constructor(props) {
         super(props);
@@ -165,8 +156,6 @@ export default class App extends React.Component {
         try {
             this.GhostApi = this.props.api || setupGhostApi({siteUrl, apiUrl, apiKey});
             const {member} = await this.GhostApi.init();
-
-            this.setupSentry();
             return {member};
         } catch (e) {
             if (hasMode(['dev', 'test'], {customSiteUrl})) {
@@ -261,11 +250,6 @@ export default class App extends React.Component {
         return api;
     }
 
-    /** Setup Sentry */
-    setupSentry() {
-        // Not implemented yet
-    }
-
     /**Get final App level context from App state*/
     getContextFromState() {
         const {action, popupNotification, customSiteUrl, member, comments, pagination, commentCount, postId, admin, popup, secundaryFormCount} = this.state;
@@ -285,8 +269,6 @@ export default class App extends React.Component {
             avatarSaturation: this.props.avatarSaturation,
             accentColor: this.props.accentColor,
             commentsEnabled: this.props.commentsEnabled,
-            appVersion: this.props.appVersion,
-            stylesUrl: this.props.stylesUrl,
             publication: this.props.publication,
             secundaryFormCount: secundaryFormCount,
             popup,
@@ -310,15 +292,13 @@ export default class App extends React.Component {
         const done = this.state.initStatus === 'success';
 
         return (
-            <SentryErrorBoundary dsn={this.props.sentryDsn}>
+            <AppContext.Provider value={this.getContextFromState()}>
-                <AppContext.Provider value={this.getContextFromState()}>
+                <CommentsFrame>
-                    <CommentsFrame>
+                    <ContentBox done={done} />
-                        <ContentBox done={done} />
+                </CommentsFrame>
-                    </CommentsFrame>
+                <AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initAdminAuth}/>
-                    <AuthFrame adminUrl={this.props.adminUrl} onLoad={this.initAdminAuth}/>
+                <PopupBox />
-                    <PopupBox />
+            </AppContext.Provider>
-                </AppContext.Provider>
-            </SentryErrorBoundary>
         );
     }
 }

apps/comments-ui/src/App.test.js

@@ -71,8 +71,7 @@ function renderApp({member = null, documentStyles = {}, props = {}} = {}) {
         }
     };
     // In tests, we currently don't wait for the styles to have loaded. In the app we check if the styles url is set or not.
-    const stylesUrl = '';
+    const {container} = render(<div style={documentStyles}><div id={ROOT_DIV_ID}><App adminUrl="https://admin.example/" api={api} {...props}/></div></div>);
-    const {container} = render(<div style={documentStyles}><div id={ROOT_DIV_ID}><App adminUrl="https://admin.example/" api={api} stylesUrl={stylesUrl} {...props}/></div></div>);
     const iframeElement = container.querySelector('iframe[title="comments-frame"]');
     expect(iframeElement).toBeInTheDocument();
     const iframeDocument = iframeElement.contentDocument;

apps/comments-ui/src/index.js

@@ -4,14 +4,19 @@ import ReactDOM from 'react-dom';
 import {ROOT_DIV_ID} from './utils/constants';
 
 function addRootDiv() {
-    const scriptTag = document.querySelector('script[data-ghost-comments]');
+    let scriptTag = document.currentScript;
+
+    if (!scriptTag && import.meta.env.DEV) {
+        // In development mode, use any script tag (because in ESM mode, document.currentScript is not set)
+        scriptTag = document.querySelector('script[data-ghost-comments]');
+    }
 
     // We need to inject the comment box at the same place as the script tag
     if (scriptTag) {
         const elem = document.createElement('div');
         elem.id = ROOT_DIV_ID;
         scriptTag.parentElement.insertBefore(elem, scriptTag);
-    } else if (process.env.NODE_ENV === 'development') {
+    } else if (import.meta.env.DEV) {
         const elem = document.createElement('div');
         elem.id = ROOT_DIV_ID;
         document.body.appendChild(elem);
@@ -39,19 +44,16 @@ function getSiteData() {
     const apiKey = dataset.key;
     const apiUrl = dataset.api;
     const adminUrl = dataset.admin;
-    const sentryDsn = dataset.sentryDsn;
     const postId = dataset.postId;
     const colorScheme = dataset.colorScheme;
     const avatarSaturation = dataset.avatarSaturation;
     const accentColor = dataset.accentColor;
-    const appVersion = dataset.appVersion;
     const commentsEnabled = dataset.commentsEnabled;
-    const stylesUrl = dataset.styles;
     const title = dataset.title === 'null' ? null : dataset.title;
     const showCount = dataset.count === 'true';
     const publication = dataset.publication ?? ''; // TODO: replace with dynamic data from script
 
-    return {siteUrl, stylesUrl, apiKey, apiUrl, sentryDsn, postId, adminUrl, colorScheme, avatarSaturation, accentColor, appVersion, commentsEnabled, title, showCount, publication};
+    return {siteUrl, apiKey, apiUrl, postId, adminUrl, colorScheme, avatarSaturation, accentColor, commentsEnabled, title, showCount, publication};
 }
 
 function handleTokenUrl() {

apps/comments-ui/src/utils/helpers.js

@@ -15,13 +15,6 @@ export const createPopupNotification = ({type, status, autoHide, duration = 2600
     };
 };
 
-export function isSentryEventAllowed({event: sentryEvent}) {
-    const frames = sentryEvent?.exception?.values?.[0]?.stacktrace?.frames || [];
-    const fileNames = frames.map(frame => frame.filename).filter(filename => !!filename);
-    const lastFileName = fileNames[fileNames.length - 1] || '';
-    return lastFileName.includes('@tryghost/comments');
-}
-
 export function formatNumber(number) {
     if (number !== 0 && !number) {
         return '';

ghost/core/core/frontend/helpers/comments.js

@@ -50,7 +50,7 @@ module.exports = async function comments(options) {
     }
 
     const frontendKey = await getFrontendKey();
-    const {scriptUrl, stylesUrl, appVersion} = getFrontendAppConfig('comments');
+    const {scriptUrl, stylesUrl} = getFrontendAppConfig('comments');
 
     const data = {
         'ghost-comments': urlUtils.getSiteUrl(),
@@ -61,11 +61,9 @@ module.exports = async function comments(options) {
         title: title,
         count: count,
         'post-id': this.id,
-        'sentry-dsn': '', /* todo: insert sentry dsn key here */
         'color-scheme': colorScheme,
         'avatar-saturation': avatarSaturation,
         'accent-color': accentColor,
-        'app-version': appVersion,
         'comments-enabled': commentsEnabled,
         publication: settingsCache.get('title')
     };