Stats failing to load on the first run

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.

@VianaSamuel

@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).

@rickstaa

@rickstaa Got it! Thanks for the feedback.

@VianaSamuel

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/actions-download-file@v1.3.0
        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

@VianaSamuel

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/actions-download-file@v1.3.0
        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!

Update README.md, introduced Github caching to solve stats images not…

Create cache-stat-image.yml for GIthub Action to cache stat image.

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

@wonrax

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.

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",
      },
    },
  );
};

@YanbingJiang

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: actions@github.com
          commit_author: github-readme-stats 🤖 <actions@github.com>

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".

Fix stats failing to load on the first run

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 "swiftyfinch@yandex.com"
        git add assets/stats.svg
        git commit -i assets/stats.svg -m "[skip ci] Update assets"
        git push origin

Update grs.yml

Navigation Menu

Repository navigation

Stats failing to load on the first run #2603

Describe the bug

Expected behaviour

Screenshots / Live demo link

Additional context

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Stats failing to load on the first run #2603

Description

Describe the bug

Expected behaviour

Screenshots / Live demo link

Additional context

Activity

rickstaa commented on Apr 8, 2023

VianaSamuel commented on Apr 12, 2023

YanbingJiang commented on Aug 19, 2023

rickstaa commented on Sep 11, 2023

wonrax commented on Sep 18, 2023

rickstaa commented on Sep 18, 2023

wonrax commented on Sep 18, 2023

sheerlox commented on Sep 29, 2023

swiftyfinch commented on Nov 28, 2023

Metadata

Metadata

Assignees

Labels

Projects

Milestone

Relationships

Development

Issue actions