diff --git a/examples/with-sentry-simple/.gitignore b/examples/with-sentry-simple/.gitignore index 8f322f0d8f495..4cafb788d92d3 100644 --- a/examples/with-sentry-simple/.gitignore +++ b/examples/with-sentry-simple/.gitignore @@ -23,6 +23,7 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.pnpm-debug.log* # local env files .env*.local @@ -30,6 +31,10 @@ yarn-error.log* # vercel .vercel -# typescript -*.tsbuildinfo -next-env.d.ts +# Sentry +.sentryclirc + +# Sentry +next.config.original.js +sentry.properties + diff --git a/examples/with-sentry/.gitignore b/examples/with-sentry/.gitignore index 8f322f0d8f495..4cafb788d92d3 100644 --- a/examples/with-sentry/.gitignore +++ b/examples/with-sentry/.gitignore @@ -23,6 +23,7 @@ npm-debug.log* yarn-debug.log* yarn-error.log* +.pnpm-debug.log* # local env files .env*.local @@ -30,6 +31,10 @@ yarn-error.log* # vercel .vercel -# typescript -*.tsbuildinfo -next-env.d.ts +# Sentry +.sentryclirc + +# Sentry +next.config.original.js +sentry.properties + diff --git a/examples/with-sentry/README.md b/examples/with-sentry/README.md index 100ffa8eab572..78d1c307ad626 100644 --- a/examples/with-sentry/README.md +++ b/examples/with-sentry/README.md @@ -14,7 +14,7 @@ Preview the example live on [StackBlitz](http://stackblitz.com/): ## Deploy your own -It only takes a few steps to create and deploy your own version of this example app. Before you begin, make sure you have [linked your Vercel account to GitHub](https://vercel.com/docs/personal-accounts/login-connections), and [set up a project in Sentry](https://docs.sentry.io/product/sentry-basics/guides/integrate-frontend/create-new-project/). +It only takes a few steps to create and deploy your own version of this example app. Before you begin, make sure you have [linked your Vercel account to GitHub](https://vercel.com/docs/teams-and-accounts#existing-login-connection), and [set up a project in Sentry](https://docs.sentry.io/product/sentry-basics/guides/integrate-frontend/create-new-project/). ### Option 1: Deploy directly to Vercel diff --git a/examples/with-sentry/next-env.d.ts b/examples/with-sentry/next-env.d.ts new file mode 100644 index 0000000000000..4f11a03dc6cc3 --- /dev/null +++ b/examples/with-sentry/next-env.d.ts @@ -0,0 +1,5 @@ +/// +/// + +// NOTE: This file should not be edited +// see https://nextjs.org/docs/basic-features/typescript for more information. diff --git a/examples/with-sentry/next.config.js b/examples/with-sentry/next.config.js index ce5e7e3555d44..be28cd7ffd437 100644 --- a/examples/with-sentry/next.config.js +++ b/examples/with-sentry/next.config.js @@ -7,6 +7,7 @@ const { withSentryConfig } = require('@sentry/nextjs') const moduleExports = { // Your existing module.exports + reactStrictMode: true, sentry: { // Use `hidden-source-map` rather than `source-map` as the Webpack `devtool` diff --git a/examples/with-sentry/package.json b/examples/with-sentry/package.json index b52ef0bcdd01b..adc0a060991f2 100644 --- a/examples/with-sentry/package.json +++ b/examples/with-sentry/package.json @@ -3,12 +3,18 @@ "scripts": { "dev": "next", "build": "next build", - "start": "next start" + "start": "next start", + "lint": "next lint" }, "dependencies": { - "@sentry/nextjs": "^7.30.0", + "@sentry/nextjs": "^7.46.0", "next": "latest", "react": "^18.2.0", "react-dom": "^18.2.0" + }, + "devDependencies": { + "@types/node": "^18.15.11", + "@types/react": "^18.0.32", + "typescript": "^4.8.2" } } diff --git a/examples/with-sentry/pages/404.js b/examples/with-sentry/pages/404.tsx similarity index 100% rename from examples/with-sentry/pages/404.js rename to examples/with-sentry/pages/404.tsx diff --git a/examples/with-sentry/pages/_app.js b/examples/with-sentry/pages/_app.js deleted file mode 100644 index 2ff89fd9b6fab..0000000000000 --- a/examples/with-sentry/pages/_app.js +++ /dev/null @@ -1,4 +0,0 @@ -export default function App({ Component, pageProps, err }) { - // Workaround for https://github.com/vercel/next.js/issues/8592 - return -} diff --git a/examples/with-sentry/pages/_app.tsx b/examples/with-sentry/pages/_app.tsx new file mode 100644 index 0000000000000..048541e25b1dd --- /dev/null +++ b/examples/with-sentry/pages/_app.tsx @@ -0,0 +1,5 @@ +import '../styles/globals.css' + +export default function App({ Component, pageProps }) { + return +} diff --git a/examples/with-sentry/pages/_document.tsx b/examples/with-sentry/pages/_document.tsx new file mode 100644 index 0000000000000..54e8bf3e2a290 --- /dev/null +++ b/examples/with-sentry/pages/_document.tsx @@ -0,0 +1,13 @@ +import { Html, Head, Main, NextScript } from 'next/document' + +export default function Document() { + return ( + + + +
+ + + + ) +} diff --git a/examples/with-sentry/pages/_error.js b/examples/with-sentry/pages/_error.tsx similarity index 100% rename from examples/with-sentry/pages/_error.js rename to examples/with-sentry/pages/_error.tsx diff --git a/examples/with-sentry/pages/api/test1.js b/examples/with-sentry/pages/api/test1.ts similarity index 100% rename from examples/with-sentry/pages/api/test1.js rename to examples/with-sentry/pages/api/test1.ts diff --git a/examples/with-sentry/pages/api/test2.js b/examples/with-sentry/pages/api/test2.ts similarity index 100% rename from examples/with-sentry/pages/api/test2.js rename to examples/with-sentry/pages/api/test2.ts diff --git a/examples/with-sentry/pages/api/test3.js b/examples/with-sentry/pages/api/test3.ts similarity index 100% rename from examples/with-sentry/pages/api/test3.js rename to examples/with-sentry/pages/api/test3.ts diff --git a/examples/with-sentry/pages/api/test4.js b/examples/with-sentry/pages/api/test4.ts similarity index 100% rename from examples/with-sentry/pages/api/test4.js rename to examples/with-sentry/pages/api/test4.ts diff --git a/examples/with-sentry/pages/client/test1.js b/examples/with-sentry/pages/client/test1.tsx similarity index 100% rename from examples/with-sentry/pages/client/test1.js rename to examples/with-sentry/pages/client/test1.tsx diff --git a/examples/with-sentry/pages/client/test2.js b/examples/with-sentry/pages/client/test2.tsx similarity index 100% rename from examples/with-sentry/pages/client/test2.js rename to examples/with-sentry/pages/client/test2.tsx diff --git a/examples/with-sentry/pages/client/test3.js b/examples/with-sentry/pages/client/test3.tsx similarity index 100% rename from examples/with-sentry/pages/client/test3.js rename to examples/with-sentry/pages/client/test3.tsx diff --git a/examples/with-sentry/pages/client/test4.js b/examples/with-sentry/pages/client/test4.tsx similarity index 100% rename from examples/with-sentry/pages/client/test4.js rename to examples/with-sentry/pages/client/test4.tsx diff --git a/examples/with-sentry/pages/client/test5.js b/examples/with-sentry/pages/client/test5.tsx similarity index 100% rename from examples/with-sentry/pages/client/test5.js rename to examples/with-sentry/pages/client/test5.tsx diff --git a/examples/with-sentry/pages/index.js b/examples/with-sentry/pages/index.js deleted file mode 100644 index 8ef6127ca99fd..0000000000000 --- a/examples/with-sentry/pages/index.js +++ /dev/null @@ -1,163 +0,0 @@ -import Link from 'next/link' - -const Index = () => ( -
-

Sentry Simple Example 🚨

-

- This example demonstrates how to record unhandled exceptions in your code - with Sentry. There are several test pages below that result in various - kinds of unhandled exceptions. -

-

- It also demonstrates the performance monitoring the SDK is able to do: -

    -
  1. - A front-end transaction is recorded for each pageload or navigation. -
    2. -
  2. - A backend transaction is recorded for each API or page route. (Note - that currently only API routes are traced on Vercel.) -
    3. -
  3. - Errors which occur during transactions are linked to those - transactions in Sentry and can be found in the [trace - navigator](https://docs.sentry.io/product/sentry-basics/tracing/trace-view/). -
    4. -
  4. - Manual performance instrumentation is demonstrated in the final - example below (throwing an error from an event handler). -
    5. -
-

-

- Important: exceptions in development mode take a - different path than in production. These tests should be run on a - production build (i.e. 'next build').{' '} - - Read more - -

-
    -
  1. API route exceptions/transactions
    2. - Note that 1 and 2 are not expected to work if deployed to Vercel yet. -
      -
    1. - API has a top-of-module Promise that rejects, but its result is not - awaited. Sentry should record Error('API Test 1').{' '} - - Open in a new tab - -
      2. -
    2. - API has a top-of-module exception. Sentry should record Error('API - Test 2').{' '} - - Open in a new tab - -
      3. -
    3. - API has has an exception in its request handler. Sentry should record - Error('API Test 3').{' '} - - Open in a new tab - -
      4. -
    4. - API uses a try/catch to handle an exception and records it. Sentry - should record Error('API Test 4').{' '} - - Open in a new tab - -
      5. -
    -
  2. SSR exceptions/transactions
    3. - Note that there are currently two known bugs with respect to SSR - transactions: they don't get recorded on Vercel, and ones that are - recorded and have an error are grouped in the Sentry UI by the error page - name rather than the requested page name. -
      -
    1. - getServerSideProps throws an Error. This should cause _error.js to - render and record Error('SSR Test 1') in Sentry.{' '} - - Open in a new tab - {' '} - or Perform client side navigation -
      2. -
    2. - getServerSideProps returns a Promise that rejects. This should cause - _error.js to render and record Error('SSR Test 2') in Sentry.{' '} - - Open in a new tab - -
      3. -
    3. - getServerSideProps calls a Promise that rejects, but does not handle - the rejection or await its result (returning synchronously). Sentry - should record Error('SSR Test 3'), but will not when - deployed to Vercel because the serverless function will already have - exited.{' '} - - Open in a new tab - -
      4. -
    4. - getServerSideProps manually captures an exception from a try/catch. - This should record Error('SSR Test 4') in Sentry.{' '} - - Open in a new tab - -
      5. -
    -
  3. Client exceptions
    4. -
      -
    1. - There is a top-of-module Promise that rejects, but its result is not - awaited. Sentry should record Error('Client Test 1').{' '} - Perform client side navigation or{' '} - - Open in a new tab - -
      2. -
    2. - There is a top-of-module exception. _error.js should render and record - ReferenceError('process is not defined') in Sentry.{' '} - Perform client side navigation or{' '} - - Open in a new tab - -
      3. -
    3. - There is an exception during React lifecycle that is caught by - Next.js's React Error Boundary. In this case, when the component - mounts. This should cause _error.js to render and record Error('Client - Test 3') in Sentry.{' '} - Perform client side navigation or{' '} - - Open in a new tab - -
      4. -
    4. - There is an unhandled Promise rejection during React lifecycle. In - this case, when the component mounts. Sentry should record - Error('Client Test 4').{' '} - Perform client side navigation or{' '} - - Open in a new tab - -
      5. -
    5. - An Error is thrown from an event handler. Sentry should record - Error('Client Test 5'). (This page also demonstrates how to manually - instrument your code for performance monitoring.){' '} - Perform client side navigation or{' '} - - Open in a new tab - -
      6. -
    -
-
-) - -export default Index diff --git a/examples/with-sentry/pages/index.tsx b/examples/with-sentry/pages/index.tsx new file mode 100644 index 0000000000000..4a001d1088862 --- /dev/null +++ b/examples/with-sentry/pages/index.tsx @@ -0,0 +1,285 @@ +import Link from 'next/link' + +import Image from 'next/image' +import { Inter } from 'next/font/google' +import styles from '../styles/Home.module.css' + +const inter = Inter({ subsets: ['latin'] }) + +export default function Home() { + return ( +
+
+

+ New users instrument with:  + npx @sentry/wizard -s -i nextjs +

+ +
+ +
+ Next.js Logo +
+ 13 +
+
+ Sentry Logo +
+

+ See how Sentry records unhandled exceptions in your code. +

+
+

+ Important: exceptions in development mode take a + different path than in production. These tests should be run on a + production build (i.e.{' '} + next build + ).{' '} + + Read more + +

+
+
+
+
+
+

+ API routes -> +

+

+ The following examples are Sentry tests. Note that 1 and 2 are not + expected to work if deployed to Vercel yet. +

+

+ Top-of-module promise that rejects, but its result is not awaited. + {' '} + + + API Test 1 + + +

+

+ API has a top-of-module exception.{' '} + + + API Test 2 + + +

+

+ API with an exception in its request handler.{' '} + + + API Test 3 + + +

+

+ API uses a try/catch to handle an exception and records it.{' '} + + + API Test 4 + + +

+
+
+

+ SSR -> +

+

+ There are currently two known bugs with respect to SSR transactions: + they don't get recorded on Vercel, and ones that are recorded and + have an error are grouped in the Sentry UI by the error page name + rather than the requested page name. +

+ +

+ getServerSideProps +  throws an Error. This should cause _error.js to render and + record and Error in Sentry.{' '} + + + SSR Test 1 + + +

+

+ getServerSideProps + returns a Promise that rejects. This should cause _error.js to + render and record an Error in Sentry.{' '} + + + SSR Test 2 + + +

+

+ getServerSideProps + calls a Promise that rejects, but does not handle the rejection or + await its result (returning synchronously). Sentry records an Error + but will not when deployed to Vercel because the + serverless function will already have exited.{' '} + + + SSR Test 3 + + +

+

+ getServerSideProps + manually captures an exception from a try/catch. This should record + Error in Sentry.{' '} + + + SSR Test 4 + + +

+
+ +
+

+ Client exceptions -> +

+

+ There is a top-of-module Promise that rejects, but its result is not + awaited. Sentry records an Error.{' '} + + + Client Test 1 + + +

+

+ There is a top-of-module exception. _error.js should render and + record ReferenceError('process is not defined') in Sentry.{' '} + + + Client Test 2 + + +

+

+ There is an exception during React lifecycle that is caught by + Next.js's React Error Boundary. In this case, when the component + mounts. This causes _error.js to render and records Error in Sentry.{' '} + + + Client Test 3 + + +

+

+ There is an unhandled Promise rejection during React lifecycle. In + this case, when the component mounts. Sentry records an Error.{' '} + + + {' '} + Client Test 4 + + +

+

+ An Error is thrown from an event handler. Sentry records an Error. + (This page also demonstrates how to manually instrument your code + for performance monitoring.){' '} + + + Client Test 5 + + +

+
+
+

+ NextJS 13 Features -> +

+

+ NextJS 13 continues to bring many new features to developers, + especially those depoying on Vercel. We are trying to keep up, we + promise! +

+
+
+

+ Performance -> +

+

+ Why should I care about Performance? +

+

+ Front-end transactions are recorded for each pageload or navigation. +

+

+ Backend transactions are recorded for each API or page route. +

+

+ Sentry creates links between errors and transactions, and can be + seen in the{' '} + + + trace navigator docs + + + . +

+

+ Manual performance instrumentation is demonstrated in the final + example below (throwing an error from an event handler). +

+

+ Add Edge Function example +
+ + + Trigger Edge Function + + +

+
+
+
+ ) +} diff --git a/examples/with-sentry/pages/ssr/test1.js b/examples/with-sentry/pages/ssr/test1.tsx similarity index 100% rename from examples/with-sentry/pages/ssr/test1.js rename to examples/with-sentry/pages/ssr/test1.tsx diff --git a/examples/with-sentry/pages/ssr/test2.js b/examples/with-sentry/pages/ssr/test2.tsx similarity index 100% rename from examples/with-sentry/pages/ssr/test2.js rename to examples/with-sentry/pages/ssr/test2.tsx diff --git a/examples/with-sentry/pages/ssr/test3.js b/examples/with-sentry/pages/ssr/test3.tsx similarity index 100% rename from examples/with-sentry/pages/ssr/test3.js rename to examples/with-sentry/pages/ssr/test3.tsx diff --git a/examples/with-sentry/pages/ssr/test4.js b/examples/with-sentry/pages/ssr/test4.tsx similarity index 100% rename from examples/with-sentry/pages/ssr/test4.js rename to examples/with-sentry/pages/ssr/test4.tsx diff --git a/examples/with-sentry/public/favicon.ico b/examples/with-sentry/public/favicon.ico new file mode 100644 index 0000000000000..4570eb8d9269a Binary files /dev/null and b/examples/with-sentry/public/favicon.ico differ diff --git a/examples/with-sentry/public/next.svg b/examples/with-sentry/public/next.svg new file mode 100644 index 0000000000000..5174b28c565c2 --- /dev/null +++ b/examples/with-sentry/public/next.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-sentry/public/sentry.svg b/examples/with-sentry/public/sentry.svg new file mode 100644 index 0000000000000..4b0850ab3c074 --- /dev/null +++ b/examples/with-sentry/public/sentry.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-sentry/public/thirteen.svg b/examples/with-sentry/public/thirteen.svg new file mode 100644 index 0000000000000..8977c1bd123cb --- /dev/null +++ b/examples/with-sentry/public/thirteen.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-sentry/public/vercel.svg b/examples/with-sentry/public/vercel.svg new file mode 100644 index 0000000000000..d2f84222734f2 --- /dev/null +++ b/examples/with-sentry/public/vercel.svg @@ -0,0 +1 @@ + \ No newline at end of file diff --git a/examples/with-sentry/sentry.client.config.js b/examples/with-sentry/sentry.client.config.js index 2b45cac0071cd..263017bf30c52 100644 --- a/examples/with-sentry/sentry.client.config.js +++ b/examples/with-sentry/sentry.client.config.js @@ -8,8 +8,24 @@ const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN Sentry.init({ dsn: SENTRY_DSN, + // Adjust this value in production, or use tracesSampler for greater control tracesSampleRate: 1.0, + // ... // Note: if you want to override the automatic release value, do not set a // `release` value here - use the environment variable `SENTRY_RELEASE`, so // that it will also get attached to your source maps + // in development and sample at a lower rate in production + replaysSessionSampleRate: 0.1, + + // If the entire session is not sampled, use the below sample rate to sample + // sessions when an error occurs. + replaysOnErrorSampleRate: 1.0, + + integrations: [ + new Sentry.Replay({ + // Additional SDK configuration goes in here, for example: + maskAllText: true, + blockAllMedia: true, + }), + ], }) diff --git a/examples/with-sentry/sentry.edge.config.js b/examples/with-sentry/sentry.edge.config.js index 2b45cac0071cd..987ac85d72a7c 100644 --- a/examples/with-sentry/sentry.edge.config.js +++ b/examples/with-sentry/sentry.edge.config.js @@ -1,5 +1,5 @@ -// This file configures the initialization of Sentry on the browser. -// The config you add here will be used whenever a page is visited. +// This file configures the initialization of Sentry on the server. +// The config you add here will be used whenever middleware or an Edge route handles a request. // https://docs.sentry.io/platforms/javascript/guides/nextjs/ import * as Sentry from '@sentry/nextjs' @@ -8,7 +8,9 @@ const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN Sentry.init({ dsn: SENTRY_DSN, + // Adjust this value in production, or use tracesSampler for greater control tracesSampleRate: 1.0, + // ... // Note: if you want to override the automatic release value, do not set a // `release` value here - use the environment variable `SENTRY_RELEASE`, so // that it will also get attached to your source maps diff --git a/examples/with-sentry/sentry.server.config.js b/examples/with-sentry/sentry.server.config.js index 75d73dcf5b8e9..4b244f5b52eb2 100644 --- a/examples/with-sentry/sentry.server.config.js +++ b/examples/with-sentry/sentry.server.config.js @@ -8,7 +8,9 @@ const SENTRY_DSN = process.env.SENTRY_DSN || process.env.NEXT_PUBLIC_SENTRY_DSN Sentry.init({ dsn: SENTRY_DSN, + // Adjust this value in production, or use tracesSampler for greater control tracesSampleRate: 1.0, + // ... // Note: if you want to override the automatic release value, do not set a // `release` value here - use the environment variable `SENTRY_RELEASE`, so // that it will also get attached to your source maps diff --git a/examples/with-sentry/styles/Home.module.css b/examples/with-sentry/styles/Home.module.css new file mode 100644 index 0000000000000..90a41dcd5ee39 --- /dev/null +++ b/examples/with-sentry/styles/Home.module.css @@ -0,0 +1,301 @@ +.main { + display: flex; + flex-direction: column; + justify-content: space-between; + align-items: center; + padding: 6rem; + min-height: 100vh; +} + +.description { + display: inherit; + justify-content: inherit; + align-items: inherit; + font-size: 0.85rem; + max-width: var(--max-width); + width: 100%; + z-index: 2; + font-family: var(--font-mono); +} + +.description a { + display: flex; + justify-content: center; + align-items: center; + gap: 0.5rem; +} + +.description p { + position: relative; + margin: 0; + padding: 1rem; + background-color: rgba(var(--callout-rgb), 0.5); + border: 1px solid rgba(var(--callout-border-rgb), 0.3); + border-radius: var(--border-radius); +} + +.code { + font-weight: 700; + font-family: var(--font-mono); +} + +.link { + color: #8d5494; + text-decoration: none; + transition: color 200ms; +} + +.grid { + display: grid; + grid-template-columns: repeat(3, minmax(25%, auto)); + width: var(--max-width); + max-width: 100%; +} + +.card { + padding: 1rem 1.2rem; + border-radius: var(--border-radius); + background: rgba(var(--card-rgb), 0); + border: 1px solid rgba(var(--card-border-rgb), 0); + transition: background 200ms, border 200ms; +} + +.card span { + display: inline-block; + transition: transform 200ms; +} + +.card h2 { + font-weight: 600; + margin-bottom: 0.7rem; +} + +.card p { + margin: 0; + opacity: 1; + color: rgba(var(--text-rgb), 0.8); + font-size: 0.9rem; + line-height: 1.5; + margin-top: 16px; +} + +.justCenter { + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 4rem 0; + position: static; + z-index: 10; +} + +.center { + display: flex; + justify-content: center; + align-items: center; + position: relative; + padding: 4rem 0; +} + +.center::before { + background: var(--secondary-glow); + border-radius: 50%; + width: 480px; + height: 360px; + margin-left: -400px; + z-index: -1; +} + +.center::after { + background: var(--primary-glow); + width: 240px; + height: 180px; + z-index: -1; +} + +.center::before, +.center::after { + content: ''; + left: 50%; + position: absolute; + filter: blur(45px); + transform: translateZ(0); + pointer-events: none; +} + +.logo, +.thirteen { + position: relative; +} + +.thirteen { + display: flex; + justify-content: center; + align-items: center; + width: 75px; + height: 75px; + padding: 25px 10px; + margin-left: 16px; + transform: translateZ(0); + border-radius: var(--border-radius); + overflow: hidden; + box-shadow: 0px 2px 8px -1px #0000001a; +} + +.thirteen::before, +.thirteen::after { + content: ''; + position: absolute; + z-index: -1; +} + +/* Conic Gradient Animation */ +.thirteen::before { + animation: 6s rotate linear infinite; + width: 200%; + height: 200%; + background: var(--tile-border); +} + +/* Inner Square */ +.thirteen::after { + inset: 0; + padding: 1px; + border-radius: var(--border-radius); + background: linear-gradient( + to bottom right, + rgba(var(--tile-start-rgb), 1), + rgba(var(--tile-end-rgb), 1) + ); + background-clip: content-box; +} + +/* Enable hover only on non-touch devices */ +@media (hover: hover) and (pointer: fine) { + .card:hover { + background: rgba(var(--card-rgb), 0.1); + border: 1px solid rgba(var(--card-border-rgb), 0.15); + } + + .card:hover span { + transform: translateX(4px); + } +} + +@media (prefers-reduced-motion) { + .thirteen::before { + animation: none; + } + + .card:hover span { + transform: none; + } +} + +/* Mobile */ +@media (max-width: 700px) { + .content { + padding: 4rem; + } + + .grid { + grid-template-columns: 1fr; + margin-bottom: 120px; + max-width: 320px; + text-align: center; + } + + .card { + padding: 1rem 2.5rem; + } + + .card h2 { + margin-bottom: 0.5rem; + } + + .center { + padding: 8rem 0 6rem; + } + + .center::before { + transform: none; + height: 300px; + } + + .description { + font-size: 0.8rem; + } + + .description a { + padding: 1rem; + } + + .description p, + .description div { + display: flex; + justify-content: center; + position: fixed; + width: 100%; + } + + .description p { + align-items: center; + inset: 0 0 auto; + padding: 2rem 1rem 1.4rem; + border-radius: 0; + border: none; + border-bottom: 1px solid rgba(var(--callout-border-rgb), 0.25); + background: linear-gradient( + to bottom, + rgba(var(--background-start-rgb), 1), + rgba(var(--callout-rgb), 0.5) + ); + background-clip: padding-box; + backdrop-filter: blur(24px); + } + + .description div { + align-items: flex-end; + pointer-events: none; + inset: auto 0 0; + padding: 2rem; + height: 200px; + background: linear-gradient( + to bottom, + transparent 0%, + rgb(var(--background-end-rgb)) 40% + ); + z-index: 1; + } +} + +/* Tablet and Smaller Desktop */ +@media (min-width: 701px) and (max-width: 1120px) { + .grid { + grid-template-columns: repeat(2, 50%); + } +} + +@media (prefers-color-scheme: dark) { + .vercelLogo { + filter: invert(1); + } + + .link { + color: #ad6caa; + } + + .logo, + .thirteen img { + filter: invert(1) drop-shadow(0 0 0.3rem #ffffff70); + } +} + +@keyframes rotate { + from { + transform: rotate(360deg); + } + to { + transform: rotate(0deg); + } +} diff --git a/examples/with-sentry/styles/globals.css b/examples/with-sentry/styles/globals.css new file mode 100644 index 0000000000000..d4f491e152dd0 --- /dev/null +++ b/examples/with-sentry/styles/globals.css @@ -0,0 +1,107 @@ +:root { + --max-width: 1100px; + --border-radius: 12px; + --font-mono: ui-monospace, Menlo, Monaco, 'Cascadia Mono', 'Segoe UI Mono', + 'Roboto Mono', 'Oxygen Mono', 'Ubuntu Monospace', 'Source Code Pro', + 'Fira Mono', 'Droid Sans Mono', 'Courier New', monospace; + + --foreground-rgb: 0, 0, 0; + --background-start-rgb: 214, 219, 220; + --background-end-rgb: 255, 255, 255; + + --primary-glow: conic-gradient( + from 180deg at 50% 50%, + #16abff33 0deg, + #0885ff33 55deg, + #54d6ff33 120deg, + #0071ff33 160deg, + transparent 360deg + ); + --secondary-glow: radial-gradient( + rgba(255, 255, 255, 1), + rgba(255, 255, 255, 0) + ); + + --tile-start-rgb: 239, 245, 249; + --tile-end-rgb: 228, 232, 233; + --tile-border: conic-gradient( + #00000080, + #00000040, + #00000030, + #00000020, + #00000010, + #00000010, + #00000080 + ); + + --callout-rgb: 238, 240, 241; + --callout-border-rgb: 172, 175, 176; + --card-rgb: 180, 185, 188; + --card-border-rgb: 131, 134, 135; +} + +@media (prefers-color-scheme: dark) { + :root { + --foreground-rgb: 255, 255, 255; + --background-start-rgb: 0, 0, 0; + --background-end-rgb: 0, 0, 0; + + --primary-glow: radial-gradient(rgba(1, 65, 255, 0.4), rgba(1, 65, 255, 0)); + --secondary-glow: linear-gradient( + to bottom right, + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0), + rgba(1, 65, 255, 0.3) + ); + + --tile-start-rgb: 2, 13, 46; + --tile-end-rgb: 2, 5, 19; + --tile-border: conic-gradient( + #ffffff80, + #ffffff40, + #ffffff30, + #ffffff20, + #ffffff10, + #ffffff10, + #ffffff80 + ); + + --callout-rgb: 20, 20, 20; + --callout-border-rgb: 108, 108, 108; + --card-rgb: 100, 100, 100; + --card-border-rgb: 200, 200, 200; + } +} + +* { + box-sizing: border-box; + padding: 0; + margin: 0; +} + +html, +body { + max-width: 100vw; + overflow-x: hidden; +} + +body { + color: rgb(var(--foreground-rgb)); + background: linear-gradient( + to bottom, + transparent, + rgb(var(--background-end-rgb)) + ) + rgb(var(--background-start-rgb)); +} + +a { + color: inherit; + text-decoration: none; +} + +@media (prefers-color-scheme: dark) { + html { + color-scheme: dark; + } +} diff --git a/examples/with-sentry/tsconfig.json b/examples/with-sentry/tsconfig.json new file mode 100644 index 0000000000000..b8d597880a1ae --- /dev/null +++ b/examples/with-sentry/tsconfig.json @@ -0,0 +1,20 @@ +{ + "compilerOptions": { + "target": "es5", + "lib": ["dom", "dom.iterable", "esnext"], + "allowJs": true, + "skipLibCheck": true, + "strict": false, + "forceConsistentCasingInFileNames": true, + "noEmit": true, + "esModuleInterop": true, + "module": "esnext", + "moduleResolution": "node", + "resolveJsonModule": true, + "isolatedModules": true, + "jsx": "preserve", + "incremental": true + }, + "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"], + "exclude": ["node_modules"] +}