Merge branch 'master' into antonpirker/python-getting-started-falcon

LICENSE

@@ -16,7 +16,7 @@ Additional Use Grant: You may make use of the Licensed Work, provided that you d
  error-reporting or application monitoring features of the
  Licensed Work.
 
-Change Date: 2026-08-15
+Change Date: 2026-09-19
 
 Change License: Apache License, Version 2.0
 

gatsby-browser.tsx

@@ -1,12 +1,16 @@
 import React from 'react';
 import {GatsbyBrowser} from 'gatsby';
 
+import {FeedbackWidgetLoader} from 'sentry-docs/components/feedback/feedbackWidgetLoader';
 import PageContext from 'sentry-docs/components/pageContext';
 
 export const wrapPageElement: GatsbyBrowser['wrapPageElement'] = ({
  element,
  props: {pageContext},
-}) => <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>;
+}) => <PageContext.Provider value={pageContext}>
+ <FeedbackWidgetLoader />
+ {element}
+ </PageContext.Provider>
 
 // Disable prefetching altogether so our bw is not destroyed.
 // If this turns out to hurt performance significantly, we can

gatsby-ssr.tsx

@@ -4,6 +4,7 @@
 import React from 'react';
 import {GatsbySSR} from 'gatsby';
 
+import {FeedbackWidgetLoader} from 'sentry-docs/components/feedback/feedbackWidgetLoader';
 import {PageContext} from 'sentry-docs/components/pageContext';
 
 const sentryEnvironment = process.env.GATSBY_ENV || process.env.NODE_ENV || 'development';
@@ -12,7 +13,12 @@ const sentryLoaderUrl = process.env.SENTRY_LOADER_URL;
 export const wrapPageElement: GatsbySSR['wrapPageElement'] = ({
  element,
  props: {pageContext},
-}) => <PageContext.Provider value={pageContext}>{element}</PageContext.Provider>;
+}) => (
+ <PageContext.Provider value={pageContext}>
+ <FeedbackWidgetLoader />
+ {element}
+ </PageContext.Provider>
+);
 
 export const onPreRenderHTML: GatsbySSR['onPreRenderHTML'] = ({getHeadComponents}) => {
  if (process.env.NODE_ENV !== 'production') {

package.json

@@ -18,7 +18,8 @@
  "@mdx-js/mdx": "^1.6.18",
  "@mdx-js/react": "^1.6.18",
  "@sentry-internal/global-search": "^0.5.7",
- "@sentry/browser": "7.55.2",
+ "@sentry/browser": "7.69.0",
+ "@sentry/core": "7.69.0",
  "@sentry/webpack-plugin": "2.2.2",
  "@types/dompurify": "^3.0.2",
  "@types/js-cookie": "^3.0.3",

src/components/feedback/feedbackButton.tsx

@@ -0,0 +1,31 @@
+import React from 'react';
+import styled from '@emotion/styled';
+
+const Button = styled.button`
+ position: fixed;
+ right: 0px;
+ bottom: 50%;
+ transform: translate(25%, 50%) rotate(-90deg);
+ background-color: #fff;
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ color: #231c3d;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+ padding: 6px 16px;
+ text-align: center;
+ text-decoration: none;
+ z-index: 9000;
+ &:hover {
+ background-color: #eee;
+ }
+ &:focus-visible {
+ outline: 1px solid #79628c;
+ background-color: #eee;
+ }
+`;
+
+export function FeedbackButton(props) {
+ return <Button {...props}>Feedback</Button>;
+}

src/components/feedback/feedbackForm.tsx

@@ -0,0 +1,166 @@
+import React, {FormEvent, useRef} from 'react';
+import {css} from '@emotion/react';
+import styled from '@emotion/styled';
+
+interface FeedbackFormProps {
+ onClose: () => void;
+ onSubmit: (data: {comment: string; email: string; name: string}) => void;
+}
+
+const retrieveStringValue = (formData: FormData, key: string) => {
+ const value = formData.get(key);
+ if (typeof value === 'string') {
+ return value.trim();
+ }
+ return '';
+};
+
+export function FeedbackForm({onClose, onSubmit}: FeedbackFormProps) {
+ const formRef = useRef<HTMLFormElement>(null);
+
+ const handleSubmit = (e: FormEvent<HTMLFormElement>) => {
+ e.preventDefault();
+ const formData = new FormData(e.target as HTMLFormElement);
+ onSubmit({
+ name: retrieveStringValue(formData, 'name'),
+ email: retrieveStringValue(formData, 'email'),
+ comment: retrieveStringValue(formData, 'comment'),
+ });
+ };
+
+ const user = window.Sentry?.getCurrentHub().getScope()?.getUser();
+
+ return (
+ <Form ref={formRef} onSubmit={handleSubmit}>
+ <FlexColumns>
+ <Label htmlFor="sentry-feedback-name">
+ Your Name
+ <Input
+ type="text"
+ id="sentry-feedback-name"
+ name="name"
+ placeholder="Anonymous"
+ defaultValue={user?.username}
+ />
+ </Label>
+ <Label htmlFor="sentry-feedback-email">
+ Your Email
+ <Input
+ type="text"
+ id="sentry-feedback-email"
+ name="email"
+ placeholder="you@test.com"
+ defaultValue={user?.email}
+ />
+ </Label>
+ </FlexColumns>
+ <Label htmlFor="sentry-feedback-comment">
+ Comment
+ <TextArea
+ onKeyDown={event => {
+ if (event.key === 'Enter' && event.ctrlKey) {
+ formRef.current.requestSubmit();
+ }
+ }}
+ id="sentry-feedback-comment"
+ name="comment"
+ placeholder="Explain what bothers you"
+ />
+ </Label>
+ <ModalFooter>
+ <CancelButton type="button" onClick={onClose}>
+ Cancel
+ </CancelButton>
+ <SubmitButton type="submit">Submit</SubmitButton>
+ </ModalFooter>
+ </Form>
+ );
+}
+
+const Form = styled.form`
+ display: flex;
+ overflow: auto;
+ flex-direction: column;
+ gap: 16px;
+ padding: 24px;
+`;
+
+const Label = styled.label`
+ display: flex;
+ flex-direction: column;
+ gap: 4px;
+ margin: 0px;
+`;
+
+const inputStyles = css`
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ font-size: 14px;
+ padding: 6px 8px;
+ &:focus {
+ outline: 1px solid rgba(108, 95, 199, 1);
+ border-color: rgba(108, 95, 199, 1);
+ }
+`;
+
+const Input = styled.input`
+ ${inputStyles}
+`;
+
+const TextArea = styled.textarea`
+ ${inputStyles}
+ min-height: 64px;
+ resize: vertical;
+`;
+
+const ModalFooter = styled.div`
+ display: flex;
+ justify-content: flex-end;
+ gap: 8px;
+ margin-top: 8px;
+`;
+
+const buttonStyles = css`
+ border: 1px solid #ccc;
+ border-radius: 4px;
+ cursor: pointer;
+ font-size: 14px;
+ font-weight: 600;
+ padding: 6px 16px;
+`;
+
+const SubmitButton = styled.button`
+ ${buttonStyles}
+ background-color: rgba(108, 95, 199, 1);
+ color: #fff;
+ &:hover {
+ background-color: rgba(88, 74, 192, 1);
+ }
+ &:focus-visible {
+ outline: 1px solid rgba(108, 95, 199, 1);
+ background-color: rgba(88, 74, 192, 1);
+ }
+`;
+
+const CancelButton = styled.button`
+ ${buttonStyles}
+ background-color: #fff;
+ color: #231c3d;
+ font-weight: 500;
+ &:hover {
+ background-color: #eee;
+ }
+ &:focus-visible {
+ outline: 1px solid rgba(108, 95, 199, 1);
+ background-color: #eee;
+ }
+`;
+
+const FlexColumns = styled.div`
+ display: flex;
+ flex-direction: row;
+ gap: 16px;
+ & > * {
+ flex: 1;
+ }
+`;