Skip to content

Commit

Permalink
🐝 collect session replays via Sentry
Browse files Browse the repository at this point in the history
  • Loading branch information
@bnjmacdonald
bnjmacdonald committed Nov 5, 2024
1 parent c4645f7 commit 701c71a
Show file tree
Hide file tree
Showing 8 changed files with 151 additions and 3 deletions.
1 change: 1 addition & 0 deletions package.json
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,6 +64,7 @@
"@ourworldindata/types": "workspace:^",
"@ourworldindata/utils": "workspace:^",
"@react-awesome-query-builder/antd": "^6.6.0",
"@sentry/react": "^8.36.0",
"@sinclair/typebox": "^0.28.5",
"@slack/web-api": "^7.1.0",
"@tippyjs/react": "^4.2.6",
Expand Down
1 change: 1 addition & 0 deletions settings/clientSettings.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -19,6 +19,7 @@ export const ENV: "development" | "production" =
process.env.ENV === "production" ? "production" : "development"

export const BUGSNAG_API_KEY: string | undefined = process.env.BUGSNAG_API_KEY
export const SENTRY_DSN: string | undefined = process.env.SENTRY_DSN
export const ADMIN_SERVER_PORT: number =
parseIntOrUndefined(process.env.ADMIN_SERVER_PORT) ?? 3030
export const ADMIN_SERVER_HOST: string =
Expand Down
2 changes: 1 addition & 1 deletion site/DonateForm.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -328,7 +328,7 @@ export class DonateForm extends React.Component {
<input
id="donation-name__input"
type="text"
className="donation-name__input"
className="donation-name__input sentry-mask"
value={this.name}
onChange={(event) =>
this.setName(event.target.value)
Expand Down
3 changes: 3 additions & 0 deletions site/Feedback.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -229,6 +229,7 @@ export class FeedbackForm extends React.Component<{
<label htmlFor="feedback.message">Message</label>
<textarea
id="feedback.message"
className="sentry-mask"
onChange={this.onMessage}
rows={5}
minLength={30}
Expand All @@ -246,6 +247,7 @@ export class FeedbackForm extends React.Component<{
<label htmlFor="feedback.name">Your name</label>
<input
id="feedback.name"
className="sentry-mask"
onChange={this.onName}
autoFocus={autofocus}
disabled={loading}
Expand All @@ -255,6 +257,7 @@ export class FeedbackForm extends React.Component<{
<label htmlFor="feedback.email">Email address</label>
<input
id="feedback.email"
className="sentry-mask"
onChange={this.onEmail}
type="email"
disabled={loading}
Expand Down
2 changes: 1 addition & 1 deletion site/NewsletterSubscription.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -141,7 +141,7 @@ export const NewsletterSubscriptionForm = ({
<TextInput
placeholder="Your email address"
type="email"
className="NewsletterSubscription__email"
className="NewsletterSubscription__email sentry-mask"
name="EMAIL"
required={true}
/>
Expand Down
2 changes: 1 addition & 1 deletion site/gdocs/components/DataInsightsNewsletter.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -64,7 +64,7 @@ export default function DataInsightsNewsletter({
}
>
<TextInput
className="data-insights-newsletter__email-input"
className="data-insights-newsletter__email-input sentry-mask"
type="email"
name="EMAIL"
required={true}
Expand Down
40 changes: 40 additions & 0 deletions site/owid.entry.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -16,13 +16,16 @@ import {
ENV,
BUGSNAG_API_KEY,
ADMIN_BASE_URL,
SENTRY_DSN,
} from "../settings/clientSettings.js"
import { Grapher, CookieKey } from "@ourworldindata/grapher"
import { MultiEmbedderSingleton } from "../site/multiembedder/MultiEmbedder.js"
import { CoreTable } from "@ourworldindata/core-table"
import { isInIFrame } from "@ourworldindata/utils"
import { SiteAnalytics } from "./SiteAnalytics.js"
import Bugsnag, { BrowserConfig } from "@bugsnag/js"
import BugsnagPluginReact from "@bugsnag/plugin-react"
import * as Sentry from "@sentry/react"
import { runMonkeyPatchForGoogleTranslate } from "./hacks.js"
import { runSiteFooterScripts } from "./runSiteFooterScripts.js"
import {
Expand Down Expand Up @@ -82,6 +85,43 @@ if (BUGSNAG_API_KEY) {
}
}

if (SENTRY_DSN) {
try {
const analyticsConsent = getPreferenceValue(PreferenceType.Analytics)

let sentryOpts: Sentry.BrowserOptions
if (analyticsConsent && !isInIFrame()) {
// only collect session replays from: users that have consented to analytics
// AND where page isn't embedded in an iframe
sentryOpts = {
integrations: [
Sentry.replayIntegration({
maskAllText: false,
maskAllInputs: false,
blockAllMedia: false,
mask: [".sentry-mask"],
}),
],
replaysSessionSampleRate: ENV === "development" ? 1 : 0.01,
replaysOnErrorSampleRate: 0,
}
} else {
sentryOpts = {
replaysSessionSampleRate: 0,
replaysOnErrorSampleRate: 0,
}
}
Sentry.init({
dsn: SENTRY_DSN,
debug: ENV === "development",
environment: ENV,
...sentryOpts,
})
} catch {
console.error("Failed to initialize Sentry")
}
}

const analytics = new SiteAnalytics(ENV)

document.documentElement?.classList.add("js-loaded")
Expand Down
103 changes: 103 additions & 0 deletions yarn.lock
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3755,6 +3755,108 @@ __metadata:
languageName: node
linkType: hard

"@sentry-internal/browser-utils@npm:8.36.0":
version: 8.36.0
resolution: "@sentry-internal/browser-utils@npm:8.36.0"
dependencies:
"@sentry/core": "npm:8.36.0"
"@sentry/types": "npm:8.36.0"
"@sentry/utils": "npm:8.36.0"
checksum: 10/f886260292e22dd936fbd7d2f4bb1325e3197a418a88b352f064517286677b68e26a993a9cac908faac344f4ea460074578b73fff91746a9f65e18b7c44e0dc6
languageName: node
linkType: hard

"@sentry-internal/feedback@npm:8.36.0":
version: 8.36.0
resolution: "@sentry-internal/feedback@npm:8.36.0"
dependencies:
"@sentry/core": "npm:8.36.0"
"@sentry/types": "npm:8.36.0"
"@sentry/utils": "npm:8.36.0"
checksum: 10/72cb38adae9939ce90963044cfc39051de0f2c8e037efb6c416299afd7ce66d63374f63c549ed054c245bb93ff337bb2a3eaba532dbad2a712b5a9910af3e4a5
languageName: node
linkType: hard

"@sentry-internal/replay-canvas@npm:8.36.0":
version: 8.36.0
resolution: "@sentry-internal/replay-canvas@npm:8.36.0"
dependencies:
"@sentry-internal/replay": "npm:8.36.0"
"@sentry/core": "npm:8.36.0"
"@sentry/types": "npm:8.36.0"
"@sentry/utils": "npm:8.36.0"
checksum: 10/f7725523339dfadadd55a2c025de82d73b2035b65b1bf34395997204bbd69e4665fcf94e90fb53b279c2bb1c005729f0ef9fb4d9946a20fa542b6cd9d2d2e9ea
languageName: node
linkType: hard

"@sentry-internal/replay@npm:8.36.0":
version: 8.36.0
resolution: "@sentry-internal/replay@npm:8.36.0"
dependencies:
"@sentry-internal/browser-utils": "npm:8.36.0"
"@sentry/core": "npm:8.36.0"
"@sentry/types": "npm:8.36.0"
"@sentry/utils": "npm:8.36.0"
checksum: 10/558f9f277aef5232c43ce0711d85aa8ca8ed584435c9bbe7e08e59c3af2ed1da137d104b47e6f5c32b69b5b78ed516e627ec096ee4a950f2492c43fcf4a78170
languageName: node
linkType: hard

"@sentry/browser@npm:8.36.0":
version: 8.36.0
resolution: "@sentry/browser@npm:8.36.0"
dependencies:
"@sentry-internal/browser-utils": "npm:8.36.0"
"@sentry-internal/feedback": "npm:8.36.0"
"@sentry-internal/replay": "npm:8.36.0"
"@sentry-internal/replay-canvas": "npm:8.36.0"
"@sentry/core": "npm:8.36.0"
"@sentry/types": "npm:8.36.0"
"@sentry/utils": "npm:8.36.0"
checksum: 10/46af4ade98628d93dd184b42deb5bec267407ebdd4a42c5803ca97cbb25f96c03db06c1c724438238fe0ae89d84ea64b686cae63b156d5aefe7e6c07b7c6ebaa
languageName: node
linkType: hard

"@sentry/core@npm:8.36.0":
version: 8.36.0
resolution: "@sentry/core@npm:8.36.0"
dependencies:
"@sentry/types": "npm:8.36.0"
"@sentry/utils": "npm:8.36.0"
checksum: 10/26d9a926c6a76526cc3ed895370604c88a7fb9f152866362cb0eef348fcada9ae78706a678f081ed26b0bb29fd0293627d458dbc598b630962550ce4924c584d
languageName: node
linkType: hard

"@sentry/react@npm:^8.36.0":
version: 8.36.0
resolution: "@sentry/react@npm:8.36.0"
dependencies:
"@sentry/browser": "npm:8.36.0"
"@sentry/core": "npm:8.36.0"
"@sentry/types": "npm:8.36.0"
"@sentry/utils": "npm:8.36.0"
hoist-non-react-statics: "npm:^3.3.2"
peerDependencies:
react: ^16.14.0 || 17.x || 18.x || 19.x
checksum: 10/c5edf3f4cb53e7fcecd3aa11512e125b90531ae41f04c2ade26f052e3138f217b3e254433eb28776d5b845f98fe7678e7961dc7770c063e62f8eda61868bc191
languageName: node
linkType: hard

"@sentry/types@npm:8.36.0":
version: 8.36.0
resolution: "@sentry/types@npm:8.36.0"
checksum: 10/6c91218f5355e5d9396cf863d66c21edd305075ea5408e31ca52dbc0eae5e39a1247882d515856f9ad05fb7c5f0509c184c048a26086f23dfd41ef4a4eeeb38b
languageName: node
linkType: hard

"@sentry/utils@npm:8.36.0":
version: 8.36.0
resolution: "@sentry/utils@npm:8.36.0"
dependencies:
"@sentry/types": "npm:8.36.0"
checksum: 10/5b58bb34ed4e13b71f322a4455702ae5dab7b597410ac7774abce0dd67dcc84ee088be05e1c8d694ec795b8a84baad0467e31afd0c8026aaacac93f8b5a3701f
languageName: node
linkType: hard

"@sigstore/bundle@npm:^2.3.2":
version: 2.3.2
resolution: "@sigstore/bundle@npm:2.3.2"
Expand Down Expand Up @@ -10904,6 +11006,7 @@ __metadata:
"@ourworldindata/utils": "workspace:^"
"@react-awesome-query-builder/antd": "npm:^6.6.0"
"@rmp135/sql-ts": "npm:^2.1.0"
"@sentry/react": "npm:^8.36.0"
"@sinclair/typebox": "npm:^0.28.5"
"@slack/web-api": "npm:^7.1.0"
"@testing-library/jest-dom": "npm:^6.1.3"
Expand Down

0 comments on commit 701c71a

Please sign in to comment.