diff --git a/.github/workflows/pipeline.yml b/.github/workflows/pipeline.yml index 5f47d07c6..f8ba7e2d1 100644 --- a/.github/workflows/pipeline.yml +++ b/.github/workflows/pipeline.yml @@ -13,6 +13,9 @@ concurrency: env: SKIP_ENV_VALIDATION: "true" + NEXT_PUBLIC_BASE_URL: "" + # TODO do we need to add this to the next build (.env.local) + SENTRY_LOG_LEVEL: "debug" jobs: # Disabled because it broke, and no idea why. @@ -42,6 +45,7 @@ jobs: pnpm lint --filter=admin-ui... pnpm lint:css --filter=admin-ui... + build-admin-ui: name: Build admin ui runs-on: ubuntu-latest @@ -50,8 +54,6 @@ jobs: steps: - name: Checkout code uses: actions/checkout@v4 - - name: "Set up Docker Buildx" - uses: docker/setup-buildx-action@v3 - uses: pnpm/action-setup@v4 - uses: actions/setup-node@v4 with: @@ -62,6 +64,8 @@ jobs: - uses: dtinth/setup-github-actions-caching-for-turbo@v1 - name: Build ui run: pnpm build --filter admin-ui... + env: + SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }} test-admin-ui: name: Test admin ui @@ -98,7 +102,6 @@ jobs: - name: Install dependencies run: pnpm install --frozen-lockfile - uses: dtinth/setup-github-actions-caching-for-turbo@v1 - - name: Lint ui run: | pnpm tsc:check --filter=ui... @@ -110,8 +113,6 @@ jobs: runs-on: ubuntu-latest # needs: [changed-packages] # if: needs.changed-packages.outputs.ui_changed == 'true' - env: - SKIP_ENV_VALIDATION: 'true' steps: - name: Checkout code uses: actions/checkout@v4 @@ -122,17 +123,24 @@ jobs: cache: 'pnpm' - name: Install dependencies run: pnpm install --frozen-lockfile - - uses: dtinth/setup-github-actions-caching-for-turbo@v1 + # FIXME enable cache after we are done with the source maps + #- uses: dtinth/setup-github-actions-caching-for-turbo@v1 + # FIXME sourcemap upload fails with 413 Request Entity Too Large + # have to copy the build envs to file otherwise nextjs can't find them + # TODO make the app base path configurable `apps/ui` (from monorepo root) - name: Build ui - run: pnpm build --filter ui... + run: | + touch apps/ui/.env.local + echo SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }} >> apps/ui/.env.local + pnpm build --filter ui... + env: + SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_AUTH_TOKEN }} test-ui: name: Unit tests ui runs-on: ubuntu-latest # needs: [changed-packages] # if: needs.changed-packages.outputs.ui_changed == 'true' - env: - SKIP_ENV_VALIDATION: 'true' steps: - name: Checkout code uses: actions/checkout@v4 diff --git a/apps/ui/.gitignore b/apps/ui/.gitignore index 29edb397f..3598f6a6a 100644 --- a/apps/ui/.gitignore +++ b/apps/ui/.gitignore @@ -14,3 +14,6 @@ # cypress cypress/screenshots cypress/videos + +# Sentry Config File +.env.sentry-build-plugin diff --git a/apps/ui/next.config.mjs b/apps/ui/next.config.mjs index 0aa9c943c..268547a27 100644 --- a/apps/ui/next.config.mjs +++ b/apps/ui/next.config.mjs @@ -38,12 +38,20 @@ const nextConfig = { // NOTE webpack.experimental.topLevelAwait breaks middleware (it hangs forever) }; +// Testing stuff +// eslint-disable-next-line no-console +console.log("env: ", env); +// eslint-disable-next-line no-console +console.log("process.env: ", process.env); + export default withSentryConfig(nextConfig, { // For all available options, see: // https://github.com/getsentry/sentry-webpack-plugin#options org: "city-of-helsinki", project: "tilavaraus-ui", - sentryUrl: "https://sentry.test.hel.ninja/", + // TODO make configurable using env because we have different urls for different environments + // no that doesn't work, we need to upload to both urls when building docker + sentryUrl: "https://sentry.test.hel.ninja", authToken: env.SENTRY_AUTH_TOKEN, // Only print logs for uploading source maps in CI silent: !process.env.CI, @@ -55,4 +63,29 @@ export default withSentryConfig(nextConfig, { // Automatically tree-shake Sentry logger statements to reduce bundle size disableLogger: true, + // For all available options, see: + // https://github.com/getsentry/sentry-webpack-plugin#options + + // For all available options, see: + // https://docs.sentry.io/platforms/javascript/guides/nextjs/manual-setup/ + + // Upload a larger set of source maps for prettier stack traces (increases build time) + widenClientFileUpload: true, + + // Automatically annotate React components to show their full name in breadcrumbs and session replay + reactComponentAnnotation: { + enabled: false, + }, + + // Route browser requests to Sentry through a Next.js rewrite to circumvent ad-blockers. + // This can increase your server load as well as your hosting bill. + // Note: Check that the configured route will not match with your Next.js middleware, otherwise reporting of client- + // side errors will fail. + tunnelRoute: "/monitoring", + + // Enables automatic instrumentation of Vercel Cron Monitors. (Does not yet work with App Router route handlers.) + // See the following for more information: + // https://docs.sentry.io/product/crons/ + // https://vercel.com/docs/cron-jobs + // automaticVercelMonitors: true, }); diff --git a/apps/ui/pages/api/sentry-example-api.ts b/apps/ui/pages/api/sentry-example-api.ts new file mode 100644 index 000000000..69037b9b5 --- /dev/null +++ b/apps/ui/pages/api/sentry-example-api.ts @@ -0,0 +1,4 @@ +// A faulty API route to test Sentry's error monitoring +export default function handler(_req: unknown, _res: unknown) { + throw new Error("Sentry Example API Route Error"); +} diff --git a/apps/ui/pages/sentry-example-page.tsx b/apps/ui/pages/sentry-example-page.tsx new file mode 100644 index 000000000..868dc5b4b --- /dev/null +++ b/apps/ui/pages/sentry-example-page.tsx @@ -0,0 +1,95 @@ +import Head from "next/head"; +import * as Sentry from "@sentry/nextjs"; +import { getCommonServerSideProps } from "@/modules/serverUtils"; + +type Props = Awaited>["props"]; + +export function getServerSideProps() { + const commonProps = getCommonServerSideProps(); + return { + props: { + ...commonProps, + }, + }; +} + +export default function Page(_props: Props) { + return ( +
+ + Sentry Onboarding + + + +
+

+ + + +

+ +

Get started by sending us a sample error:

+ + +

+ Next, look for the error on the{" "} + + Issues Page + + . +

+

+ For more information, see{" "} + + https://docs.sentry.io/platforms/javascript/guides/nextjs/ + +

+
+
+ ); +}