|
| 1 | +--- |
| 2 | +title: Upload Snapshots |
| 3 | +sidebar_order: 10 |
| 4 | +description: Structure your snapshot directory and upload from CI with sentry-cli. |
| 5 | +--- |
| 6 | + |
| 7 | +<Include name="feature-available-for-user-group-early-adopter" /> |
| 8 | + |
| 9 | +Each snapshot consists of two files: a `.png` image and a `.json` metadata sidecar with the same base name. You can organize snapshots into subdirectories — the CLI reads the entire directory tree. |
| 10 | + |
| 11 | +``` |
| 12 | +snapshots/ |
| 13 | +├── homepage.png |
| 14 | +├── homepage.json |
| 15 | +├── settings/ |
| 16 | +│ ├── profile.png |
| 17 | +│ ├── profile.json |
| 18 | +│ ├── billing.png |
| 19 | +│ └── billing.json |
| 20 | +``` |
| 21 | + |
| 22 | +Filenames are the identity key for each snapshot. Keep them stable across runs so Sentry can accurately diff head against base. |
| 23 | + |
| 24 | +## Metadata |
| 25 | + |
| 26 | +The `.json` sidecar describes its paired `.png`: |
| 27 | + |
| 28 | +```json |
| 29 | +{ |
| 30 | + "display_name": "Billing Page", |
| 31 | + "group": "Settings" |
| 32 | +} |
| 33 | +``` |
| 34 | + |
| 35 | +| Field | Type | Description | |
| 36 | +| --- | --- | --- | |
| 37 | +| `display_name` | string | Human-readable label shown in the comparison viewer. | |
| 38 | +| `group` | string | Groups related snapshots in the comparison viewer sidebar. | |
| 39 | + |
| 40 | +You can add arbitrary custom key-value pairs to the JSON file — they are preserved as metadata. |
| 41 | + |
| 42 | +The CLI automatically computes and adds `content_hash`, `width`, and `height` at upload time. Do not set these yourself. |
| 43 | + |
| 44 | +## Upload With CI |
| 45 | + |
| 46 | +To see the workflow Sentry uses on its own codebase, view the [frontend snapshots workflow](https://github.com/getsentry/sentry/blob/master/.github/workflows/frontend-snapshots.yml). |
| 47 | + |
| 48 | +Below is a complete GitHub Actions workflow you can copy into your repository. Replace the placeholder values with your own snapshot generation command, app ID, and Sentry project slug. |
| 49 | + |
| 50 | +```yml {filename:.github/workflows/snapshots.yml} |
| 51 | +name: Snapshots |
| 52 | + |
| 53 | +on: |
| 54 | + push: |
| 55 | + branches: [main] |
| 56 | + pull_request: |
| 57 | + |
| 58 | +concurrency: |
| 59 | + group: ${{ github.workflow }}-${{ github.head_ref || github.run_id }} |
| 60 | + cancel-in-progress: true |
| 61 | + |
| 62 | +env: |
| 63 | + SNAPSHOT_OUTPUT_DIR: .artifacts/snapshots |
| 64 | + |
| 65 | +jobs: |
| 66 | + snapshots: |
| 67 | + runs-on: ubuntu-24.04 |
| 68 | + timeout-minutes: 20 |
| 69 | + steps: |
| 70 | + - uses: actions/checkout@v4 |
| 71 | + with: |
| 72 | + # Use PR head SHA, not the merge commit — avoids phantom diffs |
| 73 | + ref: ${{ github.event.pull_request.head.sha || github.sha }} |
| 74 | + |
| 75 | + # ------------------------------------------------------- |
| 76 | + # YOUR SNAPSHOT GENERATION STEP(S) HERE |
| 77 | + # ------------------------------------------------------- |
| 78 | + # Generate PNG + JSON pairs into $SNAPSHOT_OUTPUT_DIR. |
| 79 | + # Examples: |
| 80 | + # - Playwright screenshots |
| 81 | + # - Storybook captures |
| 82 | + # - iOS/Android simulator screenshots |
| 83 | + # - Any tool that produces PNGs |
| 84 | + # ------------------------------------------------------- |
| 85 | + - name: Generate snapshots |
| 86 | + run: <your-snapshot-command> |
| 87 | + |
| 88 | + - name: Install sentry-cli |
| 89 | + if: ${{ !cancelled() }} |
| 90 | + run: curl -sL https://sentry.io/get-cli/ | SENTRY_CLI_VERSION=3.3.4 sh |
| 91 | + |
| 92 | + - name: Upload snapshots |
| 93 | + if: ${{ !cancelled() }} |
| 94 | + env: |
| 95 | + SENTRY_AUTH_TOKEN: ${{ secrets.SENTRY_SNAPSHOTS_AUTH_TOKEN }} |
| 96 | + run: | |
| 97 | + ARGS=( |
| 98 | + --auth-token "$SENTRY_AUTH_TOKEN" |
| 99 | + build snapshots "${{ env.SNAPSHOT_OUTPUT_DIR }}" |
| 100 | + --app-id <your-app-id> |
| 101 | + --project <your-sentry-project> |
| 102 | + --head-sha "${{ github.event.pull_request.head.sha || github.sha }}" |
| 103 | + --vcs-provider github |
| 104 | + --head-repo-name "${{ github.repository }}" |
| 105 | + ) |
| 106 | +
|
| 107 | + if [[ "${{ github.event_name }}" == "pull_request" ]]; then |
| 108 | + ARGS+=( |
| 109 | + --base-sha "${{ github.event.pull_request.base.sha }}" |
| 110 | + --base-repo-name "${{ github.repository }}" |
| 111 | + --head-ref "${{ github.head_ref }}" |
| 112 | + --base-ref "${{ github.base_ref }}" |
| 113 | + --pr-number "${{ github.event.number }}" |
| 114 | + ) |
| 115 | + fi |
| 116 | +
|
| 117 | + sentry-cli "${ARGS[@]}" |
| 118 | +``` |
| 119 | +
|
| 120 | +A few things to note about this workflow: |
| 121 | +
|
| 122 | +- **Checkout at PR head SHA** — Using `ref: ${{ github.event.pull_request.head.sha || github.sha }}` avoids phantom diffs caused by the merge commit GitHub generates by default. |
| 123 | +- **Upload even on partial failure** — The `if: ${{ !cancelled() }}` condition ensures partial results still get uploaded if some snapshot tests fail. |
| 124 | +- **Keep `--app-id` consistent** — The `app_id` ties head and base uploads together. Sentry finds the baseline by matching the same `app_id` at the `base_sha`. Use one `app_id` per logical app or bundle. |
| 125 | + |
| 126 | +Other CI systems work by passing the same flags to `sentry-cli build snapshots` explicitly. |
0 commit comments