diff --git a/packages/e2e-tests/test-applications/create-react-app/.gitignore b/packages/e2e-tests/test-applications/create-react-app/.gitignore new file mode 100644 index 000000000000..a8c4a72a614d --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/.gitignore @@ -0,0 +1,26 @@ +# See https://help.github.com/articles/ignoring-files/ for more about ignoring files. + +# dependencies +/node_modules +/.pnp +.pnp.js + +# testing +/coverage + +# production +/build + +# misc +.DS_Store +.env.local +.env.development.local +.env.test.local +.env.production.local + +npm-debug.log* +yarn-debug.log* +yarn-error.log* + +!*.d.ts +yarn.lock diff --git a/packages/e2e-tests/test-applications/temporary-app-1/.npmrc b/packages/e2e-tests/test-applications/create-react-app/.npmrc similarity index 100% rename from packages/e2e-tests/test-applications/temporary-app-1/.npmrc rename to packages/e2e-tests/test-applications/create-react-app/.npmrc diff --git a/packages/e2e-tests/test-applications/create-react-app/package.json b/packages/e2e-tests/test-applications/create-react-app/package.json new file mode 100644 index 000000000000..201f636468ad --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/package.json @@ -0,0 +1,45 @@ +{ + "name": "create-react-app-test", + "version": "0.1.0", + "private": true, + "dependencies": { + "@sentry/react": "*", + "@sentry/tracing": "*", + "@testing-library/jest-dom": "5.14.1", + "@testing-library/react": "13.0.0", + "@testing-library/user-event": "13.2.1", + "@types/jest": "27.0.1", + "@types/node": "16.7.13", + "@types/react": "18.0.0", + "@types/react-dom": "18.0.0", + "react": "18.2.0", + "react-dom": "18.2.0", + "react-scripts": "5.0.1", + "typescript": "4.4.2", + "web-vitals": "2.1.0" + }, + "scripts": { + "start": "react-scripts start", + "build": "react-scripts build", + "test": "react-scripts test", + "eject": "react-scripts eject" + }, + "eslintConfig": { + "extends": [ + "react-app", + "react-app/jest" + ] + }, + "browserslist": { + "production": [ + ">0.2%", + "not dead", + "not op_mini all" + ], + "development": [ + "last 1 chrome version", + "last 1 firefox version", + "last 1 safari version" + ] + } +} diff --git a/packages/e2e-tests/test-applications/create-react-app/public/favicon.ico b/packages/e2e-tests/test-applications/create-react-app/public/favicon.ico new file mode 100644 index 000000000000..a11777cc471a Binary files /dev/null and b/packages/e2e-tests/test-applications/create-react-app/public/favicon.ico differ diff --git a/packages/e2e-tests/test-applications/create-react-app/public/index.html b/packages/e2e-tests/test-applications/create-react-app/public/index.html new file mode 100644 index 000000000000..6a9f8c26bb7b --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/public/index.html @@ -0,0 +1,40 @@ + + + + + + + + + + + + + React App + + + +
+ + + diff --git a/packages/e2e-tests/test-applications/create-react-app/public/logo192.png b/packages/e2e-tests/test-applications/create-react-app/public/logo192.png new file mode 100644 index 000000000000..fc44b0a3796c Binary files /dev/null and b/packages/e2e-tests/test-applications/create-react-app/public/logo192.png differ diff --git a/packages/e2e-tests/test-applications/create-react-app/public/logo512.png b/packages/e2e-tests/test-applications/create-react-app/public/logo512.png new file mode 100644 index 000000000000..a4e47a6545bc Binary files /dev/null and b/packages/e2e-tests/test-applications/create-react-app/public/logo512.png differ diff --git a/packages/e2e-tests/test-applications/create-react-app/public/manifest.json b/packages/e2e-tests/test-applications/create-react-app/public/manifest.json new file mode 100644 index 000000000000..080d6c77ac21 --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/public/manifest.json @@ -0,0 +1,25 @@ +{ + "short_name": "React App", + "name": "Create React App Sample", + "icons": [ + { + "src": "favicon.ico", + "sizes": "64x64 32x32 24x24 16x16", + "type": "image/x-icon" + }, + { + "src": "logo192.png", + "type": "image/png", + "sizes": "192x192" + }, + { + "src": "logo512.png", + "type": "image/png", + "sizes": "512x512" + } + ], + "start_url": ".", + "display": "standalone", + "theme_color": "#000000", + "background_color": "#ffffff" +} diff --git a/packages/e2e-tests/test-applications/create-react-app/public/robots.txt b/packages/e2e-tests/test-applications/create-react-app/public/robots.txt new file mode 100644 index 000000000000..e9e57dc4d41b --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/public/robots.txt @@ -0,0 +1,3 @@ +# https://www.robotstxt.org/robotstxt.html +User-agent: * +Disallow: diff --git a/packages/e2e-tests/test-applications/create-react-app/src/App.css b/packages/e2e-tests/test-applications/create-react-app/src/App.css new file mode 100644 index 000000000000..74b5e053450a --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/App.css @@ -0,0 +1,38 @@ +.App { + text-align: center; +} + +.App-logo { + height: 40vmin; + pointer-events: none; +} + +@media (prefers-reduced-motion: no-preference) { + .App-logo { + animation: App-logo-spin infinite 20s linear; + } +} + +.App-header { + background-color: #282c34; + min-height: 100vh; + display: flex; + flex-direction: column; + align-items: center; + justify-content: center; + font-size: calc(10px + 2vmin); + color: white; +} + +.App-link { + color: #61dafb; +} + +@keyframes App-logo-spin { + from { + transform: rotate(0deg); + } + to { + transform: rotate(360deg); + } +} diff --git a/packages/e2e-tests/test-applications/create-react-app/src/App.test.tsx b/packages/e2e-tests/test-applications/create-react-app/src/App.test.tsx new file mode 100644 index 000000000000..2a68616d9846 --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/App.test.tsx @@ -0,0 +1,9 @@ +import React from 'react'; +import { render, screen } from '@testing-library/react'; +import App from './App'; + +test('renders learn react link', () => { + render(); + const linkElement = screen.getByText(/learn react/i); + expect(linkElement).toBeInTheDocument(); +}); diff --git a/packages/e2e-tests/test-applications/create-react-app/src/App.tsx b/packages/e2e-tests/test-applications/create-react-app/src/App.tsx new file mode 100644 index 000000000000..aa2efcf44946 --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/App.tsx @@ -0,0 +1,48 @@ +import React from 'react'; +import logo from './logo.svg'; +import * as Sentry from '@sentry/react'; +import './App.css'; + +function App() { + return ( + ( + +
You have encountered an error
+
{error.toString()}
+
{componentStack}
+ + + )} + > +
+
+ logo +

+ Edit src/App.tsx and save to reload. +

+ + Learn React + +
+ +
+ + ); +} + +export default Sentry.withProfiler(App); diff --git a/packages/e2e-tests/test-applications/create-react-app/src/index.css b/packages/e2e-tests/test-applications/create-react-app/src/index.css new file mode 100644 index 000000000000..7323ae85c542 --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/index.css @@ -0,0 +1,11 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', + 'Droid Sans', 'Helvetica Neue', sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; +} diff --git a/packages/e2e-tests/test-applications/create-react-app/src/index.tsx b/packages/e2e-tests/test-applications/create-react-app/src/index.tsx new file mode 100644 index 000000000000..7c86235dad55 --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/index.tsx @@ -0,0 +1,28 @@ +import React from 'react'; +import ReactDOM from 'react-dom/client'; +import './index.css'; +import App from './App'; +import reportWebVitals from './reportWebVitals'; +import * as Sentry from '@sentry/react'; +import { BrowserTracing } from '@sentry/tracing'; + +Sentry.init({ + dsn: 'https://public@dsn.ingest.sentry.io/1337', + integrations: [new BrowserTracing()], + + // We recommend adjusting this value in production, or using tracesSampler + // for finer control + tracesSampleRate: 1.0, +}); + +const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement); +root.render( + + + , +); + +// If you want to start measuring performance in your app, pass a function +// to log results (for example: reportWebVitals(console.log)) +// or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals +reportWebVitals(); diff --git a/packages/e2e-tests/test-applications/create-react-app/src/logo.svg b/packages/e2e-tests/test-applications/create-react-app/src/logo.svg new file mode 100644 index 000000000000..9dfc1c058ceb --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/logo.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/packages/e2e-tests/test-applications/create-react-app/src/react-app-env.d.ts b/packages/e2e-tests/test-applications/create-react-app/src/react-app-env.d.ts new file mode 100644 index 000000000000..6431bc5fc6b2 --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/react-app-env.d.ts @@ -0,0 +1 @@ +/// diff --git a/packages/e2e-tests/test-applications/create-react-app/src/reportWebVitals.ts b/packages/e2e-tests/test-applications/create-react-app/src/reportWebVitals.ts new file mode 100644 index 000000000000..49a2a16e0fbc --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/reportWebVitals.ts @@ -0,0 +1,15 @@ +import { ReportHandler } from 'web-vitals'; + +const reportWebVitals = (onPerfEntry?: ReportHandler) => { + if (onPerfEntry && onPerfEntry instanceof Function) { + import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => { + getCLS(onPerfEntry); + getFID(onPerfEntry); + getFCP(onPerfEntry); + getLCP(onPerfEntry); + getTTFB(onPerfEntry); + }); + } +}; + +export default reportWebVitals; diff --git a/packages/e2e-tests/test-applications/create-react-app/src/setupTests.ts b/packages/e2e-tests/test-applications/create-react-app/src/setupTests.ts new file mode 100644 index 000000000000..8f2609b7b3e0 --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/src/setupTests.ts @@ -0,0 +1,5 @@ +// jest-dom adds custom jest matchers for asserting on DOM nodes. +// allows you to do things like: +// expect(element).toHaveTextContent(/react/i) +// learn more: https://github.com/testing-library/jest-dom +import '@testing-library/jest-dom'; diff --git a/packages/e2e-tests/test-applications/create-react-app/test-recipe.json b/packages/e2e-tests/test-applications/create-react-app/test-recipe.json new file mode 100644 index 000000000000..ee9c8e1dc40c --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/test-recipe.json @@ -0,0 +1,6 @@ +{ + "$schema": "../../test-recipe-schema.json", + "testApplicationName": "create-react-app", + "buildCommand": "yarn install && yarn build", + "tests": [] +} diff --git a/packages/e2e-tests/test-applications/create-react-app/tsconfig.json b/packages/e2e-tests/test-applications/create-react-app/tsconfig.json new file mode 100644 index 000000000000..1d693b2b06ac --- /dev/null +++ b/packages/e2e-tests/test-applications/create-react-app/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "esModuleInterop": true, + "allowSyntheticDefaultImports": true, + "strict": true, + "forceConsistentCasingInFileNames": true, + "noFallthroughCasesInSwitch": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "noEmit": true, + "jsx": "react" + }, + "include": ["src"] +} diff --git a/packages/e2e-tests/test-applications/temporary-app-1/.gitignore b/packages/e2e-tests/test-applications/temporary-app-1/.gitignore deleted file mode 100644 index 8ee01d321b72..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-1/.gitignore +++ /dev/null @@ -1 +0,0 @@ -yarn.lock diff --git a/packages/e2e-tests/test-applications/temporary-app-1/good.js b/packages/e2e-tests/test-applications/temporary-app-1/good.js deleted file mode 100644 index 8da91c072fb8..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-1/good.js +++ /dev/null @@ -1 +0,0 @@ -console.log('Happy :)'); diff --git a/packages/e2e-tests/test-applications/temporary-app-1/package.json b/packages/e2e-tests/test-applications/temporary-app-1/package.json deleted file mode 100644 index 6adffeacc75f..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-1/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "temporary-app-1", - "version": "1.0.0", - "private": true, - "scripts": { - "start:good": "node good.js" - }, - "dependencies": { - "@sentry/node": "*" - } -} diff --git a/packages/e2e-tests/test-applications/temporary-app-1/test-recipe.json b/packages/e2e-tests/test-applications/temporary-app-1/test-recipe.json deleted file mode 100644 index c00b1ff55a7e..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-1/test-recipe.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "$schema": "../../test-recipe-schema.json", - "testApplicationName": "Temporary Application 1", - "buildCommand": "yarn install --no-lockfile", - "tests": [ - { - "testName": "Example Test (Should Succeed)", - "testCommand": "yarn start:good" - } - ] -} diff --git a/packages/e2e-tests/test-applications/temporary-app-2/.gitignore b/packages/e2e-tests/test-applications/temporary-app-2/.gitignore deleted file mode 100644 index 8ee01d321b72..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-2/.gitignore +++ /dev/null @@ -1 +0,0 @@ -yarn.lock diff --git a/packages/e2e-tests/test-applications/temporary-app-2/.npmrc b/packages/e2e-tests/test-applications/temporary-app-2/.npmrc deleted file mode 100644 index c6b3ef9b3eaa..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-2/.npmrc +++ /dev/null @@ -1,2 +0,0 @@ -@sentry:registry=http://localhost:4873 -@sentry-internal:registry=http://localhost:4873 diff --git a/packages/e2e-tests/test-applications/temporary-app-2/good.js b/packages/e2e-tests/test-applications/temporary-app-2/good.js deleted file mode 100644 index 8da91c072fb8..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-2/good.js +++ /dev/null @@ -1 +0,0 @@ -console.log('Happy :)'); diff --git a/packages/e2e-tests/test-applications/temporary-app-2/package.json b/packages/e2e-tests/test-applications/temporary-app-2/package.json deleted file mode 100644 index a01456cb2f2e..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-2/package.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "name": "temporary-app-2", - "version": "1.0.0", - "private": true, - "scripts": { - "start:good": "node good.js" - }, - "dependencies": { - "@sentry/node": "*" - } -} diff --git a/packages/e2e-tests/test-applications/temporary-app-2/test-recipe.json b/packages/e2e-tests/test-applications/temporary-app-2/test-recipe.json deleted file mode 100644 index 2ccdd52d62fb..000000000000 --- a/packages/e2e-tests/test-applications/temporary-app-2/test-recipe.json +++ /dev/null @@ -1,11 +0,0 @@ -{ - "$schema": "../../test-recipe-schema.json", - "testApplicationName": "Temporary Application 2", - "buildCommand": "yarn install --no-lockfile", - "tests": [ - { - "testName": "Example Test (Should Succeed)", - "testCommand": "yarn start:good" - } - ] -}