From ab86e0d901272d4b60ee3d26c6296e0941294ce5 Mon Sep 17 00:00:00 2001 From: Simon Backx Date: Thu, 22 Jun 2023 13:53:06 +0200 Subject: [PATCH] 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 | 1 - apps/comments-ui/src/App.js | 34 ++++---------------- apps/comments-ui/src/App.test.js | 3 +- apps/comments-ui/src/index.js | 14 ++++---- apps/comments-ui/src/utils/helpers.js | 7 ---- ghost/core/core/frontend/helpers/comments.js | 4 +-- 6 files changed, 17 insertions(+), 46 deletions(-) diff --git a/apps/comments-ui/package.json b/apps/comments-ui/package.json index 4e73348c32..5eaf92e243 100644 --- a/apps/comments-ui/package.json +++ b/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", diff --git a/apps/comments-ui/src/App.js b/apps/comments-ui/src/App.js index e7e6c0fa86..630e7022d0 100644 --- a/apps/comments-ui/src/App.js +++ b/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 ( - - - - - - - - - + + + + + + + ); } } diff --git a/apps/comments-ui/src/App.test.js b/apps/comments-ui/src/App.test.js index a69c4fad74..26b4b59b59 100644 --- a/apps/comments-ui/src/App.test.js +++ b/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(
); + const {container} = render(
); const iframeElement = container.querySelector('iframe[title="comments-frame"]'); expect(iframeElement).toBeInTheDocument(); const iframeDocument = iframeElement.contentDocument; diff --git a/apps/comments-ui/src/index.js b/apps/comments-ui/src/index.js index 4d6d86928d..207da9fc4d 100644 --- a/apps/comments-ui/src/index.js +++ b/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() { diff --git a/apps/comments-ui/src/utils/helpers.js b/apps/comments-ui/src/utils/helpers.js index b1827fe413..bf1b748440 100644 --- a/apps/comments-ui/src/utils/helpers.js +++ b/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 ''; diff --git a/ghost/core/core/frontend/helpers/comments.js b/ghost/core/core/frontend/helpers/comments.js index 4c80db2701..c6ccd69aee 100644 --- a/ghost/core/core/frontend/helpers/comments.js +++ b/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') };