Bring in the vite-sentry plugin (#660)

* Sentry changes

* Update documentation

* Changes to include sentry-vite plugin

* Docker secret

* Disable if mode not production

* Remove formatting change

* Update docs/monitoring.md

Co-authored-by: Kent C. Dodds <[email protected]>

* Uncomment plugin

* Uncomment commit sha vars

* Formatting

* Dockerfile

* Replace maps

* Replace ternary

* Vite config update

---------

Co-authored-by: Kent C. Dodds <[email protected]>

Author: devlinmorrow

.github/workflows/deploy.yml

@@ -141,8 +141,7 @@ jobs:
     runs-on: ubuntu-22.04
     needs: [lint, typecheck, vitest, playwright]
     # only build/deploy branches on pushes
-    if:
-      ${{ github.event_name == 'push' }}
+    if: ${{ github.event_name == 'push' }}
 
     steps:
       - name: ⬇️ Checkout repo
@@ -176,5 +175,6 @@ jobs:
         if: ${{ github.ref == 'refs/heads/main' }}
         run:
           flyctl deploy --remote-only --build-arg COMMIT_SHA=${{ github.sha }}
+          --build-secret SENTRY_AUTH_TOKEN=${{ secrets.SENTRY_AUTH_TOKEN }}
         env:
           FLY_API_TOKEN: ${{ secrets.FLY_API_TOKEN }}

docs/monitoring.md

@@ -20,22 +20,41 @@ You can sign up for Sentry and create a Remix project from visiting
 [this url](https://sentry.io/signup/?project_platform=javascript-remix) and
 filling out the signup form.
 
-## Onboarding
+## Setting up the sentry-vite plugin
 
 Once you see the onboarding page which has the DSN, copy that somewhere (this
-becomes `SENTRY_DSN`). Then click
-[this](https://sentry.io/orgredirect/settings/:orgslug/developer-settings/new-internal/)
-to create an internal integration. Give it a name and add the scope for
-`Releases:Admin`. Press Save, find the auth token at the bottom of the page
-under "Tokens", and copy that to secure location (this becomes
-`SENTRY_AUTH_TOKEN`). Then visit the organization settings page and copy that
-organization slug (`SENTRY_ORG_SLUG`).
-
-Now, set the secrets in Fly.io:
+becomes `SENTRY_DSN`). Now, set the sentry dsn secret in Fly.io to be used as an
+env var during runtime:
 
 ```sh
-fly secrets set SENTRY_DSN=<your_dsn> SENTRY_AUTH_TOKEN=<your_auth_token> SENTRY_ORG=<your_org_slug> SENTRY_PROJECT=javascript-remix
+fly secrets set SENTRY_DSN=<your_dsn>
 ```
 
-Note that `javascript-remix` is the name of the default Remix project in Sentry
-and if you use a different project name you'll need to update that value here.
+See the guide for the remix
+[here](https://docs.sentry.io/platforms/javascript/guides/remix/). Run the
+installation wizard but note that some of the steps included already exist in
+this codebase so be sure to remove any duplication.
+
+To generate the auth token, click
+[this](https://sentry.io/orgredirect/settings/:orgslug/developer-settings/new-internal/)
+to create an internal integration (which grants the selected capabilities to the
+recipient, similar to how RBAC works). Give it a name and add the scope for
+`Releases:Admin`. Press Save, find the auth token at the bottom of the page
+under "Tokens", and copy that to secure location (this becomes
+`SENTRY_AUTH_TOKEN`). Then visit the organization settings page and copy that
+organization slug (`SENTRY_ORG`), and the slug name for your project too
+(`SENTRY_PROJECT`).
+
+Uncomment the sentry-vite plugin in `vite.config` and the build command in the
+'build' section of the Dockerfile, which shows how to pass the
+`SENTRY_AUTH_TOKEN` (below) as a docker secret, so it is available to the vite
+config when `npm run build` is run (you will need to do the same for
+`SENTRY_ORG` and `SENTRY_PROJECT`). Note that these do not need to be added to
+the `env.server` env vars schema, as they are only used during the build and not
+the runtime.
+
+The plugin will create sentry releases for you and automatically associate
+commits during the vite build once you set the `SENTRY_AUTH_TOKEN` in
+[your GitHub action secrets](https://docs.github.com/en/actions/security-guides/using-secrets-in-github-actions).
+In this setup we have utilized a simple strategy for naming releases of using
+the commit sha, passed in as a build arg via the GitHub action workflow.

fly.toml

@@ -12,9 +12,6 @@ auto_rollback = true
 source = "data"
 destination = "/data"
 
-[deploy]
-release_command = "node ./other/sentry-create-release"
-
 [[services]]
 internal_port = 8080
 processes = [ "app" ]

other/Dockerfile

@@ -29,6 +29,9 @@ RUN npm prune --omit=dev
 # Build the app
 FROM base as build
 
+ARG COMMIT_SHA
+ENV COMMIT_SHA=$COMMIT_SHA
+
 WORKDIR /myapp
 
 COPY --from=deps /myapp/node_modules /myapp/node_modules
@@ -37,7 +40,11 @@ ADD prisma .
 RUN npx prisma generate
 
 ADD . .
-RUN npm run build
+
+# Mount the secret and set it as an environment variable and run the build
+RUN --mount=type=secret,id=SENTRY_AUTH_TOKEN \
+    export SENTRY_AUTH_TOKEN=$(cat /run/secrets/SENTRY_AUTH_TOKEN) && \
+    npm run build
 
 # Finally, build the production image with minimal footprint
 FROM base