Stats failing to load on the first run

[VianaSamuel]

Describe the bug

When I enter on my profile, the stats fails to load on the first run.
They only load successfully when I reload the page.
Tested it, and this is happening both on my own and on other computers.

Expected behaviour

The stats should load on the first run.

Screenshots / Live demo link

Additional context

I'm using the feature as a Vercel instance.
I'm using the feature as a HTML image.

[rickstaa]

@VianaSamuel Thanks for your bug report. This is a known issue. It is caused by a timeout in the GitHub CDN and therefore something that is very hard to debug (see #2446 (comment)). I think we will switch to a GitHub action in the future to see if that solves the issue (see #2179). Otherwise, we might have to improve the card generation code (see #1633).

[VianaSamuel]

@rickstaa Got it! Thanks for the feedback.

[YanbingJiang]

Hi there @VianaSamuel @rickstaa,

Hinted by @Zo-Bro-23's #2537, we can also create a GitHub action in .github/workflows to cache the svg from your own vercel instance to avoid this to happen by using actions-download-file.

name: Cache Action
on:
  workflow_dispatch:
  schedule:
    - cron: 0 */4 * * * # Every 4 hours, change it accordingly

jobs:
  stats:
    permissions: write-all
    runs-on: ubuntu-latest
    name: Stats Card
    steps:
      - uses: actions/checkout@v3
        name: Check out current commit
      - uses: suisei-cn/[email protected]
        id: stats
        name: Download the stats file
        with:
          url: "https://github-readme-stats.vercel.app/api?username=username" # Put your own vercel instance URL here
          target: grs
          filename: stats.svg # Need to have the file name prepared as svg
      - uses: actions/upload-artifact@master
        with:
          name: stats
          path: grs

  push:
    permissions: write-all
    runs-on: ubuntu-latest
    name: Push
    needs: [stats] # Put any jobs (card) needed here before we push
    steps:
      - uses: actions/download-artifact@master
        with:
          name: stats
          path: grs
      - name: Push
        uses: crazy-max/ghaction-github-pages@v3
        with:
          target_branch: resource/grs # May change to your desired branch name, the final URL need to be updated if you change this
          build_dir: grs
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Just replace the URL with your own vercel instance URL.
Then, you can update the final URL of the source in read.me to be https://github.com/USERNAME/USERNAME/raw/resource/grs/stats.svg

Similar issue: #2446

[rickstaa]

Hi there @VianaSamuel @rickstaa,

Hinted by @Zo-Bro-23's #2537, we can also create a GitHub action in .github/workflows to cache the svg from your own vercel instance to avoid this to happen by using actions-download-file.

name: Cache Action
on:
  workflow_dispatch:
  schedule:
    - cron: 0 */4 * * * # Every 4 hours, change it accordingly

jobs:
  stats:
    permissions: write-all
    runs-on: ubuntu-latest
    name: Stats Card
    steps:
      - uses: actions/checkout@v3
        name: Check out current commit
      - uses: suisei-cn/[email protected]
        id: stats
        name: Download the stats file
        with:
          url: "https://github-readme-stats.vercel.app/api?username=username" # Put your own vercel instance URL here
          target: grs
          filename: stats.svg # Need to have the file name prepared as svg
      - uses: actions/upload-artifact@master
        with:
          name: stats
          path: grs

  push:
    permissions: write-all
    runs-on: ubuntu-latest
    name: Push
    needs: [stats] # Put any jobs (card) needed here before we push
    steps:
      - uses: actions/download-artifact@master
        with:
          name: stats
          path: grs
      - name: Push
        uses: crazy-max/ghaction-github-pages@v3
        with:
          target_branch: resource/grs # May change to your desired branch name, the final URL need to be updated if you change this
          build_dir: grs
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}

Just replace the URL with your own vercel instance URL. Then, you can update the final URL of the source in read.me to be https://github.com/USERNAME/USERNAME/raw/resource/grs/stats.svg

Similar issue: #2446

@YanbingJiang, thanks a lot for sharing your workaround ❤️‍🔥. Although it still requires users to deploy a Vercel instance, it is a good workaround until #2537 is released!

[wonrax]

I'm experiencing this issue as well; it could be due to the cold start of the functions.

[rickstaa]

I'm experiencing this issue as well; it could be due to the cold start of the functions.

@wonrax This could also be the reason if the issue only happens on private instances 🤔. For the public instance since so many users use it, I wouldn't expect the cold start to be a problem. To solve this, we could switch to edge functions. Our priority is releasing the GitHub action so that users have another option for using GRS (see #2179). This problem should not exist for the GitHub action.

[wonrax]

I've just spun up a val.town function for some testing, and it seems like it confirmed my suspicion. The GitHub readme preview seems to start timing out requests that take around 4 seconds or longer.

Also in Vercel docs:

If you have large dependencies, parsing and evaluating JavaScript code can take 3-5 seconds or longer.

This lines up with my test results too.

export const testGitHubReadmeImageTimeout = async () => {
  function sleep(ms) {
    return new Promise((resolve) => setTimeout(resolve, ms));
  }

  await sleep(4000);

  return new Response(
    '<svg xmlns="http://www.w3.org/2000/svg" width="800px" height="800px" viewBox="0 0 24 24" fill="none"><path d="M7 12H17M8 8.5C8 8.5 9 9 10 9C11.5 9 12.5 8 14 8C15 8 16 8.5 16 8.5M8 15.5C8 15.5 9 16 10 16C11.5 16 12.5 15 14 15C15 15 16 15.5 16 15.5M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"></path></svg>',
    {
      headers: {
        "Content-Type": "image/svg+xml",
        "Cache-Control": "max-age=0, no-cache, no-store, must-revalidate",
      },
    },
  );
};

[sheerlox]

Thank you so much @YanbingJiang for the GitHub Action you shared! I'm posting my modified version if it can be useful to anyone.

The main differences are:

• uses a simple curl command instead of a GitHub action to download the SVG files
• commits the SVG files to a Git directory instead of GitHub Pages
• use pinned versions for GitHub Actions
• also downloads the top languages card

Note: I'm using a GitHub PAT instead of permissions since I was already using that for muesli/readme-scribe, but you can easily revert to the permission model used in the original solution!

name: Cache GitHub README Stats

on:
  workflow_dispatch:
  push:
    branches:
      - main
  schedule:
    - cron: "0 0 * * *"

jobs:
  download-assets:
    runs-on: ubuntu-latest
    name: Download assets

    steps:
      - name: Download the stats file
        run: curl 'https://github-readme-stats.vercel.app/api?username=username' -o stats.svg

      - name: Download the top languages file
        run: curl 'https://github-readme-stats.vercel.app/api/top-langs/?username=username' -o top-langs.svg

      - name: Upload artifacts
        uses: actions/upload-artifact@v3
        with:
          name: assets
          path: |
            stats.svg
            top-langs.svg

  push-assets:
    runs-on: ubuntu-latest
    name: Push assets
    needs: [download-assets]
    steps:
      - uses: actions/checkout@v3
      - uses: actions/download-artifact@v3
        with:
          name: assets
          path: assets
      - uses: stefanzweifel/git-auto-commit-action@v4
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
        with:
          commit_message: "chore(assets): update cached GRS files"
          branch: main
          commit_user_name: github-readme-stats 🤖
          commit_user_email: [email protected]
          commit_author: github-readme-stats 🤖 <[email protected]>

Source: my own .github/workflows/github-readme-stats.yml file

Images URLs used in my README.md are then simply "assets/stats.svg" and "assets/top-langs.svg".

[swiftyfinch]

Thanks you everyone to share your solutions! ❤️
I also would like to share an another solution w/o additional GitHub actions:

name: Update assets

on:
  schedule:
  - cron: 0 0 * * * # Every day at 00:00
  push:
    branches: [main]
  workflow_dispatch:

jobs:
  update-assets:
    runs-on: ubuntu-latest
    steps:
    # Checkout with custom token for push to protected branch
    - uses: actions/checkout@v3
      with:
        token: ${{ secrets.CUSTOM_GITHUB_TOKEN }}

    - name: Download stats.svg
      run: |
        mkdir -p assets
        curl 'https://github-readme-stats-eiuc4b0pc-swiftyfinchs-projects.vercel.app/api?username=swiftyfinch&theme=github_dark_dimmed&show_icons=true&hide_title=true&hide_border=true&include_all_commits=true&rank_icon=github&card_width=250&show=discussions_started&cache_seconds=86400' -o assets/stats.svg

    - name: Push stats.svg
      run: |
        git config user.name "swiftyfinch"
        git config user.email "[email protected]"
        git add assets/stats.svg
        git commit -i assets/stats.svg -m "[skip ci] Update assets"
        git push origin