Gatsby: /에 대한 리소스 누락

https://github.com/gatsbyjs/gatsby/issues/11453 과 관련이있을 수 있습니다.

여기에 관련된 404 항목은 없지만 아마도.

죄송합니다, @Jivings

가능하다면 최소한의 복제물에 연결해 주시겠습니까?

현지에서 재현 할 수 없었습니다 🙁 더 많은 정보를 얻을 수 있습니까? 아니면 보초 보고서가 전혀 도움이되지 않습니까? 범위를 좁힐 수 있도록 어떤 상황에서 발생할 수 있습니까?

나도 이것을보고 있지만 배포 한 후에야 로컬로 재현 할 수 없습니다.

Uncaught Error: Missing resources for /store/
    at t.n.render (ensure-resources.js:135)
    at Xo (react-dom.production.min.js:156)
    at Qo (react-dom.production.min.js:155)
    at ti (react-dom.production.min.js:162)
    at Oi (react-dom.production.min.js:192)
    at ji (react-dom.production.min.js:193)
    at fa (react-dom.production.min.js:205)
    at sa (react-dom.production.min.js:204)
    at Mi (react-dom.production.min.js:200)
    at ya (react-dom.production.min.js:218)

내 코드에서 ThemeProvider (스타일 구성 요소)를 제거하려고 시도한 지점에서만이 오류가 발생하고 패키지가 추가 / 업데이트 / 제거되지 않았기 때문에 파일 구조에서 어딘가가 엉망이 된 것으로 추측하고 있습니다. 원인을 찾아 내면 업데이트되지만 갈 것이 많지 않습니다.

여기서도 같은 문제가 생겼어요 ... 먼저, 영어 죄송 해요, 저는 스페인어를 해요 ¯_ (ツ) _ / ¯

Error: Missing resources for /...
    at t.n.render (ensure-resources.js:135)
    at Ri (react-dom.production.min.js:169)
    at Ci (react-dom.production.min.js:168)
    at Li (react-dom.production.min.js:176)
    at Ba (react-dom.production.min.js:221)
    at Ha (react-dom.production.min.js:222)
    at Pl (react-dom.production.min.js:238)
    at Tl (react-dom.production.min.js:237)
    at wl (react-dom.production.min.js:234)
    at Qa (react-dom.production.min.js:232)

우선 약간의 맥락에서 window 사용하는 캐 러셀 패키지 Tiny Slider 와 관련된 문제가있어서 SSR이 구현 된 다른 캐 러셀을 검색하고 react-responsive-carousel을 찾았습니다. 나는 내가 필요한 것을 훌륭하게 작동하지만 develop 에서만 가능합니다.

언급 된 오류는 두 가지 관련 시나리오에서 발생합니다.

시나리오 1
스타일 구성 요소를 사용하여 슬라이드 스타일을 지정했지만 믹스 인을 추가하면 빌드가 gatsby-plugin-styled-components 를 추가하면 문제가 해결되는 것으로 나타났습니다. 작동하지만 ... 시나리오 2가 발생했습니다.

시나리오 2
이제 빌드가 작동하고 스타일이있는 페이지를 볼 수 있습니다. 그러나 내 회전 목마가 작동하지 않고 아무것도하지 않습니다! 😱 ... 스타일이 좋아 보이지만 ... 😅
그래서 gatsby-plugin-styled-components 만 제거하면 스크립트가 다시 작동하지만 내 스타일은 작동하지 않습니다 .🙃

이것이 문제를 찾고 해결하는 데 도움이되기를 바랍니다.

안녕 여러분.

이것이 도움이되는지 확실하지 않지만 비슷한 문제가 있었지만 누락 된 리소스가 firebase의 누락 된 (프로덕션) 환경 변수 인 것으로 나타났습니다. 이것은 차례로 내 이미지에 영향을 미치는 것처럼 보였습니다. 이것은 빌드 단계에 영향을 미쳤을 것입니다.

필요한 경우 추가 정보를 제공 할 수 있습니다 ...

@Jivings 는 gatsby 및 gatsby-plugin-offline 패키지를 업데이트 할 수 있습니까? 이것은 새 빌드를 만들었지 만 이전의 리소스를 더 이상 사용할 수 없을 때 발생합니다 (따라서 오프라인 플러그인에 의해 캐시 된 html은 사용할 수없는 리소스를 사용하려고합니다). 최신 개츠비 / 오프라인 패키지 버전에서 서비스 워커 업데이트 후 다시로드를 추가하여 사이트를 사용할 수없는 상태로 떠나지 않도록했습니다.

제 경우에는 가져 오기를 import { Link } from './' 에서 import { Link } from './Link' (내 파일 /components/footer.js )로 변경했으며 "/에 대한 리소스 누락"오류를 수정했습니다. 내가 생각하기에 순환 의존성이었다. 하지만 그것이 당신의 것을 고칠 지 모르겠습니다.
편집 : 오류가 주기적으로 발생하면 위의 @pieh 솔루션이 문제를 해결할 가능성이 더

이 오류가 발생하지만 IE11에서만 발생합니다. 내가 알 수있는 한 한 브라우저에서만 발생하기 때문에 어떤 리소스가 실패하는지 정확히 모르겠지만 react-dom에서 오류가 발생합니다 (아래 스크린 샷 참조). 모든 Gatsby 종속성을 최신 버전으로 업데이트하고 Symbol이나 너무 현대적인 것에 질식하는 경우를 대비하여 polyfill 을 추가했지만 오류가 여전히 발생합니다. IE11에서도 이미지 로딩 문제가 있습니다. # 4021에서 논의 된 것과 같은 것 같습니다. 모든 이미지와 오프라인 플러그인을 제거하면 페이지로드시 오류가 발생하지 않지만 이미지가 포함되지 않은 다른 페이지로 이동하면 오류가 발생합니다. 일부 JS가로드되지 않고 IE가 대신 HTML 404 페이지를 표시하는 것 같습니다. 그래서 여기서 뭔가 이상한 일이 벌어지고 있습니다.

Netlify에 배포 된 개발 브랜치에서 다양한 장치의 수정 사항을 테스트하고 있습니다.
테스트하려는 경우 최신 디버그 빌드는 다음과 같습니다. https://5c6ee3b943e6c400080a5a8b--marcysutton.netlify.com/about/
다음은 IE11의 모든 손상이있는 라이브 사이트입니다. https://marcysutton.com
그리고 여기 내 사이트 소스 : https://github.com/marcysutton/gatsby-site

다음은 내 VM의 스크린 샷입니다.

@marcysutton 이것으로 진전을 이루셨습니까? IE11에서만 똑같은 것을보고 있습니다. 다른 브라우저에서는 문제가 없습니다.

아직! @sidharthachatterjee 또는 @pieh , 디버깅하기에 충분한 정보입니까? 현재 IE11의 꽤 차단 문제입니다.

@Undistraction 좋은 소식이 있습니다. 팀이이 문제를 디버그하는 데 도움을 gatsby-background-image )에서 컴파일되지 않은 화살표 기능에 문제가 있다고 지적했습니다. 그들은이를 설명하기 위해 Gatsby 코어의 변경 사항에 대해 논의하고 있지만 그 동안 문제를 일으키는 플러그인을 컴파일하여 문제를 해결할 수 있어야합니다 : https://www.gatsbyjs.org/packages/gatsby-plugin- compile-es6-packages /? = 컴파일

내 사이트에서 사용한 곳 : https://github.com/marcysutton/gatsby-site/blob/develop/gatsby-config.js#L107

여전히 문제가 있으면 알려주세요!

여기에서도 같은 문제인데, 내가 며칠 동안 방문하지 않은 웹 사이트 (Gatsby 웹 사이트도 마찬가지)에서 주기적으로이 문제를 봅니다. IE11이 아니라 Chrome입니다. 빈 페이지가 몇 초 후에 새로 고쳐지고 모든 것이 다시 작동합니다.

한 가지 예의 버전 :
gatsby : 2.0.118
gatsby-plugin-offline : 2.0.23

IE (에지 모드)에서이 오류가 발생합니다.

줄 1 char 195183의 react-dom.production.min.js 파일을 가리키고 있습니다.

IE에서 오류를 클릭하면 다음 코드를 가리 킵니다.

if(pi)throw a=qi,qi=null,pi=!1,a;}

@marcysutton 업데이트 주셔서 감사합니다. 콘솔에서 구문 오류를 발견하지 못했습니다. 우리에게는 오류가 전혀 없습니다. IE11에서는 페이지 탐색이 완전히 중단되고 페이지가 수화되지 않습니다. 페이지 새로 고침에서 누락 된 리소스 오류가 발생합니다. 더 이상 진행할 것이 없기 때문에 IE11 지원을 중단해야했습니다. 다른 브라우저에는 문제가 없습니다. 내 직감은 이것이 polyfill 문제이지만 오류가 어딘가에 삼켜지고 있다는 것입니다. 콘솔에서 오류없이 페이지 수화가 어떻게 충돌 할 수 있는지 이해할 수 없습니다.

(첫 번째)로드시이 오류가 발생합니다. 재 장전 후 지워지는 것 같습니다. 프로덕션 / Firebase 호스팅.
Error: Missing resources for /

@rkhayat URL에 링크하거나 더 나은 재생산을 제공 할

감사!

FWIW이 문제에 대한 경험을 https://github.com/gatsbyjs/gatsby/issues/12399에 썼습니다. Missing resources for / 오류를 치는 사람에게 도움이 될 수 있습니다.

비슷한 문제가있는 것 같습니다. 사이트를 잘 탐색 할 수 있지만 페이지를 새로 고치면 페이지가 비어 있고 Error: Missing resources for /<path> 됩니다. 하드 새로 고침 또는 캐시 지우기는 페이지를 다시로드하지만 다시 일반 새로 고침은 빈 페이지를 표시합니다.

gatsby server 하여 로컬에서이를 재현 할 수 없어서 CDN 문제라고 생각했기 때문에이 문제를 해결 한 것으로 보이는 CloudFront 배포의 루트 디렉터리를 무효화했습니다. 나는 아직도 정확히 무슨 일이 일어나고 있는지 확실하지 않지만 일부 참조가 구식이 된 것으로 의심됩니다. 이것이 다른 사람에게 도움이되기를 바랍니다.

히야!

이 문제는 조용해졌습니다. 무시 무시한 조용함. 👻

많은 문제가 발생하므로 현재 30 일 동안 활동이 없으면 문제를 해결합니다. 여기서 마지막으로 업데이트 한 지 20 일이 지났습니다.

이 문제를 놓쳤거나 계속 열려고 싶다면 여기에서 답장 해주세요. 이 문제를 계속 열어두기 위해 "부실하지 않음"이라는 레이블을 추가 할 수도 있습니다.

Gatsby 커뮤니티의 일원이되어 주셔서 감사합니다! 💪💜

@ gatsbyjs-read-only-user 부실하지 않음 😬

@Undistraction 좋은 소식이 있습니다. 팀이이 문제를 디버그하는 데 도움을 gatsby-background-image )에서 컴파일되지 않은 화살표 기능에 문제가 있다고 지적했습니다. 그들은이를 설명하기 위해 Gatsby 코어의 변경 사항에 대해 논의하고 있지만 그 동안 문제를 일으키는 플러그인을 컴파일하여 문제를 해결할 수 있어야합니다 : https://www.gatsbyjs.org/packages/gatsby-plugin- compile-es6-packages /? = 컴파일

내 사이트에서 사용한 곳 : https://github.com/marcysutton/gatsby-site/blob/develop/gatsby-config.js#L107

여전히 문제가 있으면 알려주세요!

@marcysutton 컴파일되지 않은 화살표 함수를 포함하는 플러그인 / 모듈을 어떻게 식별 했습니까?

@onetwothreebutter 는 브라우저에서 컴파일 된 JavaScript 파일을 열고 => 검색합니다. IE는 그들이 어디에서 왔는지 쉽게 알 수 없었기 때문에 "Ctrl + F"를 사용하여 수동으로 검색했습니다.

이것은 시간이 지남에 따라 핵심적으로 개선 될 것이지만 그동안 확인할 수있는 방법입니다!

이 문제는 IE뿐만 아니라 모든 브라우저와 버전에서 지속되며 Gatsby에서 서비스 워커를 사용하여 트리거되는 것으로 보입니다. 관련 : # 12399

나는 또한 같은 문제에 직면했습니다.

• 서비스 워커가 사용 설정된 경우 페이지를 새로 고침하면 위에서 언급 한 오류가 발생합니다. 이 문제는 주로 Chrome에서 발생했습니다. Edge 브라우저가 제대로 작동하는 것 같습니다 (아마도 서비스 워커가 작동하지 않기 때문일 수 있음)
• 서비스 워커를 제거하고 플러그인 gatsby-plugin-remove-serviceworker 하면이 문제는 사라집니다.
  사용 된 해상도 :
• 그러나 서버 작업자 기능의 중요성을 감안할 때 PWA 플러그인 gatsby-plugin-offline 과 함께 gatsby-plugin-remove-trailing-slashes 플러그인을 사용해 보았고 이것이 문제를 해결하는 것 같습니다.

이 오류가 발생하고 서비스 워커를 사용하고 있지 않습니다.
페이지가 특정 버전의 사이트로로드 된 다음 배포가 완료되고 자산 이름이 변경되어 열린 버전에서 찾을 수없는 경우 발생할 수 있다고 생각했습니다.
게다가 센트리에서 오류를 일으키는 버전은 오류가 발생한 시점에 라이브 버전이 아닙니다.

@antoinerousseau 예, 문제를 해결하려고 몇 번 시도한 후에도 SW가 없어도 여전히 문제가 발생합니다. 몇 가지 Gatsby 플러그인을 최신 버전으로 업그레이드했고 오류 수를 줄 였지만 0은 아니 었습니다. (우연 일 수도 있습니다)

@KyleAMathews 이것을 본 적이 있거나 어떤 정보가 있습니까?

@jackhair 재생산없이 무슨 일이 일어나고 있는지 말하기가 어렵습니다. http://gatsby.dev/reproduction

해결 방법 : https://github.com/gatsbyjs/gatsby/issues/13410#issuecomment -486306784

@smakosh 나는 서비스 워커를 사용하지 않습니다.

오프라인 플러그인이 사용 중입니다.

좋아,하지만 내 말은 그 플러그인 없이도 버그가 발생한다는 것입니다.

이전에 사용한 적이있는 소프트웨어 등록을 성공적으로 취소했는지 확인하고 public 및 .cache 폴더를 삭제하여 Gatsby 캐시를 삭제 해보십시오.

해당 프로젝트에서 SW를 사용하지 않았습니다. (그리고 방금 확인)
public 및 .cache 는 항상 Netlify에 의해 다시 생성됩니다.
Sentry는 생산 과정에서 오류를보고하고 있습니다.
https://sentry.io/share/issue/738b234836814442b7702866c6814fdf/

프로젝트가 오픈 소스입니까? 아래 링크를 할 수 있다면 그것을 확인하고 어떻게 고칠 수 있는지보고 싶습니다.

죄송하지만 기본적으로 Netlify에서 제공하는 Gatsby 사이트입니다.

  "dependencies": {
    "@sentry/browser": "^5.1.1",
    "@types/algoliasearch": "^3.30.8",
    "@types/dotenv": "^6.1.0",
    "@types/he": "^1.1.0",
    "@types/jump.js": "^1.0.2",
    "@types/node": "^11.13.7",
    "@types/node-fetch": "^2.3.3",
    "@types/react": "^16.8.14",
    "@types/react-dom": "^16.8.4",
    "@types/source-map-support": "^0.5.0",
    "@types/standard-http-error": "^2.0.0",
    "@types/styled-components": "^4.1.14",
    "algoliasearch": "^3.32.0",
    "aws-sdk": "^2.443.0",
    "babel-plugin-styled-components": "^1.10.0",
    "date-fns": "^2.0.0-alpha.27",
    "gatsby": "^2.3.31",
    "gatsby-image": "^2.0.40",
    "gatsby-plugin-google-analytics": "^2.0.18",
    "gatsby-plugin-manifest": "^2.0.29",
    "gatsby-plugin-netlify": "^2.0.15",
    "gatsby-plugin-offline": "^2.0.24",
    "gatsby-plugin-react-helmet": "^3.0.12",
    "gatsby-plugin-sharp": "^2.0.35",
    "gatsby-plugin-styled-components": "^3.0.6",
    "gatsby-plugin-typescript": "^2.0.13",
    "gatsby-source-filesystem": "^2.0.32",
    "gatsby-transformer-sharp": "^2.1.18",
    "he": "^1.2.0",
    "hyphenslug": "^1.0.0",
    "intersection-observer": "^0.6.0",
    "jump.js": "^1.0.2",
    "mkdirp2": "^1.0.4",
    "mustache": "^3.0.1",
    "node-fetch": "^2.3.0",
    "nodemailer": "^6.1.1",
    "prop-types": "^15.7.2",
    "react": "^16.8.3",
    "react-dom": "^16.8.3",
    "react-helmet": "^5.2.0",
    "sitemap": "^2.1.0",
    "source-map-support": "^0.5.12",
    "standard-http-error": "^2.0.1",
    "strip": "^3.0.0",
    "styled-components": "^4.1.3",
    "ts-node": "^8.1.0",
    "typescript": "^3.4.5",
    "whatwg-fetch": "^3.0.0"
  },

오프라인 플러그인이 설치되어 있습니다. gatsby-config 파일에 포함되어 있지 않은지 확인해 주시겠습니까?

예, 미안하지만 사용되지 않았습니다. 여기 내 Gatsby 구성이 있습니다.

module.exports = {
  siteMetadata: {/*...*/},
  plugins: [
    `gatsby-plugin-typescript`,
    `gatsby-plugin-styled-components`,
    `gatsby-plugin-react-helmet`,
    {
      resolve: `gatsby-source-filesystem`,
      options: {
        name: `images`,
        path: `${__dirname}/src/images`,
      },
    },
    {
      resolve: `gatsby-plugin-sharp`,
      options: {
        defaultQuality: 80,
      },
    },
    `gatsby-transformer-sharp`,
    {
      resolve: `gatsby-plugin-manifest`,
      options: {
        name: `Le Bikini`,
        short_name: `Le Bikini`,
        start_url: `/`,
        background_color: `#000000`,
        theme_color: `#000000`,
        display: `minimal-ui`,
        icon: `src/images/favicon.png`,
      },
    },
    `gatsby-plugin-netlify`,
    {
      resolve: `gatsby-plugin-google-analytics`,
      options: {
        trackingId: process.env.GOOGLE_ANALYTICS,
        head: false,
        anonymize: true,
        respectDNT: true,
      },
    },

    // this (optional) plugin enables Progressive Web App + Offline functionality
    // 'gatsby-plugin-offline',
    // To learn more, visit: https://gatsby.app/offline
  ],
}

https://lebikini.netlify.com 에서 실시간으로 볼 수 있습니다.

디버깅을 위해 더 많은 항목을 확인해야하므로 복제 저장소 없이는 도울 수 없습니다.

조심하세요 @antoinerousseau
gatsby-plugin-netlify 플러그인은 플러그인 문서에 따라 플러그인 배열에서 마지막 플러그인이어야합니다.
https://www.npmjs.com/package/gatsby-plugin-netlify

@abumalick @antoinerousseau 우리는 플러그인 배열의 끝으로 gatsby-plugin-netlify 을 이동했지만 아무것도 변경하지 않았습니다.

아마도 이것이 그것과 관련이있을 수 있습니까? https://github.com/gatsbyjs/gatsby/issues/11982

내가 직접 문제를 발견했을 때 (순수한 기회), 항상 페이지 매니페스트 누락과 관련된 일종의 오류가 있습니다.

관련 문제의 모든 경우에서 작동하는 유일한 수정 사항을 여기에 설명했습니다. https://github.com/gatsbyjs/gatsby/issues/12399#issuecomment -488247566

나는 같은 문제가 있었다. 내 경우는 @ efd1 과 import { Module } from "." 형식으로 가져 오기로 인해 프로덕션 빌드가 중단되었습니다 (개발이 문제없이 작동 중임). 불행히도 디버그하고 찾는 것은 그리 쉽지 않았습니다.

위의 제안은 나를 위해 작동하지 않는 것 같습니다. iOS 사용자에게만이 문제가 산발적으로 나타납니다. 나는 그것을 복제 할 수 없어서 무엇이 잘못되었는지 알아 내기가 어렵습니다. 근본적인 문제가 무엇인지 알아내는 방법에 대한 팁이 있습니까?

위의 Kyle의 진술을 반영하려면 재현 가능한 데모 사이트가 필요합니다. http://gatsby.dev/reproduction

재생산없이 무슨 일이 일어나고 있는지 말하기는 어렵습니다. http://gatsby.dev/reproduction

@KyleAMathews 솔직히 이것은 여러 페이지 인 Netlify에 배포 된 모든 Gatsby 사이트에서 발생한다고 생각합니다. 센트리를 하나에 던지고 직접 확인하십시오.

예를 들어 모든 Gatsby 프로젝트가 Netlify에 배포되고 지난 몇 달 동안 오류를 본 적이 없기 때문에이 진술은 약간 시기상조라고 말하고 싶습니다. 복제는 정말 도움이 될 것입니다.

@LekoArts @marcysutton Sentry 추적은 여기에서 여전히 공개적으로 사용할 수

도움이 되나요?

프로덕션 사이트에서 약 하루에 한 번 오류가 발생합니다.

예를 들어 모든 Gatsby 프로젝트가 Netlify에 배포되고 지난 몇 달 동안 오류를 본 적이 없기 때문에이 진술은 약간 시기상조라고 말하고 싶습니다. 복제는 정말 도움이 될 것입니다.

@lekoarts Sentry 설정이 있습니까? 얼마나 많은 트래픽?

프로덕션 사이트에서 약 하루에 한 번 오류가 발생합니다.

@Jivings 얼마나 많은 트래픽? 나는 주파수에 대한 아이디어를 얻으려고 노력하고 있습니다.

내가 알 수있는 한, 3 월 1 일 이후로 내가 관리하는 웹 사이트에서 16 만 페이지 뷰 (47k 세션)에 걸쳐이 오류의 541 개 인스턴스를 발견했습니다. 이는 페이지 뷰가 행동을 촉발 할 확률이 0.3 %이고 세션이이를 경험할 확률은 1.2 %입니다. 복제물에 관한 한 크지 않습니다. 이 문제를 해결하려면 구식 추적, 조사 및 기타 디버깅이 필요할 것입니다.

모바일 기기에서 더 흔하지 만 더 많은 방문이 모바일에서 이루어지며 데스크톱에서도 발생합니다. 제조사 / 모델 / 브라우저가 관련이없는 것 같습니다. 그만한 가치가있는 것은 스트리밍 오디오 플랫폼이므로 마케팅에 중점을 두거나 많은 트래픽이 발생하는 웹 사이트보다 세션 시간이 훨씬 더 긴 경향이 있습니다.

Sentry를 사용하여 _without_ 프로덕션에서이 오류를 보는 사람이 있습니까? Honeybadger, Raygun, Rollbar, Airbrake 등을 사용하는 사람이 있습니까?

@coreyward 또한 Raygun으로 간헐적으로보고 있습니다. 하나의 특정 페이지에만 있으며 모바일 Safari 및 Chrome에만 영향을 미칩니다.

@coreyward 우리는

@coreyward 아마도 이것이 도움이 될 것입니다 :

(https://github.com/gatsbyjs/gatsby/issues/12399#issuecomment-480082161에서)

우리는 Bugsnag를 사용하고 있으며 트래픽의 약 1 %에 대해 이것이 나타나는 것을보고 있습니다. 브라우저는 전체 트래픽 분포와 거의 일치하는 것으로 보이며 명확한 패턴이 보이지 않습니다.

@coreyward 트래픽의 약 1 %에 영향을 미치는

@KyleAMathews 안녕하세요 저는 프로덕션 GatsbyJS 웹 사이트에서이 오류를 만났습니다. 몇 번 새로 고친 후 문제가 사라졌습니다.

오프라인 플러그인을 사용하고 Azure Blob Storage와 CDN에 배포 할 때이 문제가 발생했습니다. 서비스 워커 js는 CDN에서 서비스되지 않아야하며 서버 도메인에서 직접 제공되어야한다는 것을 읽었습니다. 그것이 근본 원인 일 수 있습니다.

오프라인 플러그인과 서비스 워커가 ghpages에서 활성화 된 상태로 배포 된 ers-hcl.github.io가 있습니다.

이 문제는 오프라인 플러그인과 관련이 없습니다. 오프라인 플러그인을 사용하는 경우 새 콘텐츠를 SW 업데이트에 사용할 수 있음을 사용자에게 다시로드하거나 푸시 알림을 표시해야합니다.

@smakosh 오프라인 플러그인을 비활성화 할 때

우리는 그것을보고 있으며 오프라인 플러그인을 사용하지 않습니다.

• 내가 틀렸을 수 있습니다- ensure-resources.js 파일에서 한 가지 관찰은이 오류를 발생시키는 구성 요소이지만 만일을 대비하여 언급 할 것이라고 생각했습니다.
• 위한 코드를 찾고 ensure-resources.js , 그것을 사용하는 것 window.location 특성을 존재하는 한 줄 없음 81에 location 이 요소에서 사용되고있는 모든 다른 장소들.

우리의 특별한 상황이 다른 많은 사람들에게 도움이 될 것 같지는 않지만, 만일을 대비하여 여기서 공유하고 싶었습니다.

이것은 CORS 문제로 인해 DataCamp.com에 영향을 미쳤습니다. 우리는 Cloudfront를 통해 제공되는 S3에서 자산 접두사 및 호스팅 자산을 사용하고 있습니다. 자산 접두사를 사용하여 처음 배포하는 동안 도메인에서 자산에 액세스 할 수 있도록 S3에서 CORS 헤더를 설정하는 것을 잊었습니다 (죄송합니다). 우리는 1 ~ 2 분 후에 CORS 헤더를 업데이트했지만 자산이 이미 호출 된 에지 노드는 자산 콘텐츠뿐만 아니라 CORS 헤더도 캐시 된 것 같습니다! 이로 인해 일부 이상한 버그가 소수의 사용자에게만 영향을 미친다는 착각을 불러 일으켰습니다. 실제로 문제는 작은 비율의 에지 노드에 이전 헤더가 캐시되어 있다는 것이 었습니다. 모든 자산에 대해 Cloudfront에서 무효화를 생성하여이 문제를 해결했습니다.

보다 일반적으로 : 사용자 중 특정 자산 이름을 잠재적으로 광고 또는 추적 관련으로 선택하는 adblocker가있는 경우, 자산 서버와 최종 사용자 사이의 어느 시점에서든 소규모의 헤더를 수정하는 중개인이있는 경우 사용자의 비율 (예 : 콘텐츠를 필터링하는 회사 네트워크) 또는 다른 이상한 네트워크 문제가 발생하는 경우 이러한 모든 것이이 오류의 원인이 될 수 있습니다.

우리는 이와 똑같은 문제가 있었고 그 뒤에있는 주된 이유는 순환 종속성 이었습니다.

@bigfanjs 좀 더 자세히 설명해 주시겠습니까?

@DSchau 최근에 팀원이 기능을 추가하고 배포했고 브라우저가 비슷한 문제로 불평하기 시작했습니다. 우리는 아이디어가 없었고 팀원이 페이지와 재사용 가능한 큰 구성 요소를 만들었습니다. 그래서 우리는 페이지와 구성 요소 모두에 코드를 주석 처리하고 <div /> 태그를 렌더링했습니다. 그리고 서버 프로덕션 빌드를 로컬로 만들기 위해 gatsby build 를 실행 한 다음 gatsby serve 를 실행했습니다. 그리고 우리는 몇 가지 코드를 주석으로 좁히기 시작했고 매번 위의 추천을 실행했습니다. 처럼:

import {Button} from "components/kit"

// comment the rest to see if `Button` is causing the issue
// import {Box} from "components/kit"
// import {Form} from "components/kit" 

다음에 우리는 Box 등등에 댓글을 달면 ...

결국 오류는 간단합니다.

몇 가지 구성 요소를 가져 오는 kit 라는 공통 구성 요소가 있습니다.

구성 요소 / 키트

| --- Box.js
| --- Button.js
| --- Form.js
| --- index.js

index.js

export { default as Box } from "./Box"
export { default as Button } from "./Button"
export { default as Form } from "./Form"

내 예를 들어 Form 우리가 수입하려고했던 Box 이런 식으로 :
import {Box} from "components/kit"

그러나 그로 인해 문제가 발생했으며 다음과 같이 변경했습니다.
import {Box} from "./Box"

그리고 그것은 작동했습니다.

도움이 되길 바랍니다.

여기에서도 같은 문제인데, 내가 며칠 동안 방문하지 않은 웹 사이트 (Gatsby 웹 사이트도 마찬가지)에서 주기적으로이 문제를 봅니다. IE11이 아니라 Chrome입니다. 빈 페이지가 몇 초 후에 새로 고쳐지고 모든 것이 다시 작동합니다.

한 가지 예의 버전 :
gatsby : 2.0.118
gatsby-plugin-offline : 2.0.23

나는 이것과 비슷한 오류가 있었다. 프로덕션 빌드에서 netlify cms 관리 페이지에 액세스 할 수 없습니다.
그리고 이것이 마침내 gatsby와 gatbsy-plugin-offline 버전이 일치하지 않기 때문이라는 것을 알았습니다.
엄지 손가락 !!!

이 오류가 가끔 발생하는 사람들의 경우 (실제로 예상 할 수 있음) 사이트의 새 버전을 배포 할 때마다 대부분의 호스트는 사이트의 이전 버전을 삭제합니다. 즉, 사이트에서 이미 페이지를 탐색하려는 사람은 모두 삭제하지 않습니다. 이 페이지에 대한 리소스를 찾을 수 있으므로이 오류가 발생하고 페이지에 대한 HTML을 다시 가져 와서 전체 새로 고침을 트리거합니다.

이에 대한 테스트는 https://github.com/gatsbyjs/gatsby/blob/cbbed1dde8a4fd25080e9ab65d7661dfa8fbf327/e2e-tests/production-runtime/cypress/integration/resource-loading-resilience.js#L57

@KyleAMathews 이 누락 된 리소스 오류로 인해 새로 고침이 트리거되지 않는 것 같습니다. 따라서 사용자가 깨진 페이지 또는 흰색 페이지에 갇혀 있습니다. 새로 고침을하려면 오프라인 플러그인이 필요합니까?

아뇨 ... 그게 일어나면 개츠비의 버그입니다. 당신이 설명하고있는 시나리오에 대한 복제물이 있습니까?

-
카일 매튜스

블로그 : http://bricolage.io
트위터 : http://twitter.com/kylemathews

2019 년 6 월 4 일 화요일 오후 3:05, Jack <[email protected]>은 다음과 같이 썼습니다.

@ KyleAMathews (https://github.com/KyleAMathews) 새로 고침이 나타납니다.
이 리소스 누락 오류로 인해 트리거되지 않으므로 사용자가 멈췄습니다.
깨지거나 하얀 페이지에. 오프라인 플러그인이 필요합니까?
새로 고침이 발생하는지 확인 하시겠습니까?

—
당신이 언급 되었기 때문에 이것을 받고 있습니다.
이 이메일에 직접 답장하고 GitHub (
https://github.com/gatsbyjs/gatsby/issues/11524?email_source=notifications&email_token=AAARLB6OVB47GMB5K2242M3PY3RLFA5CNFSM4GUAYCZKYY3PNVWWK3TUL52HS4DFWSVREXG43Z610AHJLOPWSVREXG43VMVBW63LNMVXHW63
) 또는 대화 목록 음소거 (
https://github.com/notifications/unsubscribe-auth/AAARLB7QKXUL3AZF4MXCO33PY3RLFANCNFSM4GUAYCZA
).

@KyleAMathews 프로덕션 사이트에서 뺑소니를 잡는 것 외에는 로컬에서 재현 할 수 없었습니다. 복제하려면 Netlify 통합을 사용하여 완전히 새로운 리포지토리를 설정 한 다음 결국 발견 할 때까지 업데이트를 계속 푸시해야합니다.

@coreyward 가 Gatsby 사이트의 댓글에서 더 보입니다 .

또한이 토론과 관련하여 @Moocar 는 런타임 https://github.com/gatsbyjs/gatsby/pull/13004 에서 데이터를로드하는 방법에 대한 대규모 리팩터링 작업을 수행했습니다

지금은 복제품이 없지만, 저절로 새로 고쳐지지 않은 상태에서 적어도 6 번은 본 적이 있음을 확인할 수 있습니다.

@KyleAMathews 배포시기와는 완전히 독립적 인 모든 브라우저의 요청 중 1 %에서 이러한 현상이 발생하는 것을 확인했습니다. 마지막 배포가 금요일에 있었던 경우에도 일요일에도 같은 비율로 발생하는 것을 볼 수 있습니다. 다음은 시간 경과에 따른 상대적 일관성을 보여주는 버그 스내그 스크린 샷입니다 (물론 정상적인 트래픽 변동으로 인한 약간의 덩어리 짐).

@gwlortscher는 매우 흥미 롭습니다. 따라서 배포와 관련이없는 것 같습니다. 이 차트는 오류 수를 보여주는 차트 인 것 같습니다. 요청 비율에 대한 차트를 공유 할 수 있습니까? 트래픽에 따라 다르지 않다고 생각합니까?

가능한 원인을 추가하기 위해 :
제 경우에는 SSR에서 atob 대신 new Buffer(val, 'base64').toString(); .
(기본적으로 atob 를 사용할 수없는 경우 node-js 버전을 사용하십시오.)
개발에서 작업하고 올바르게 컴파일했으며 제품 페이지 시작시 충돌이 발생했습니다. 또한 포함으로 충분했고 코드는 실행되지 않았으며 시작시로드 될 청크에만 존재했습니다.

@KyleAMathews Bugsnag는 % 요청 차트를 가지고 있지 않지만 분석에서 계산하기에는 충분히 쉽습니다. 다음은 지난 8 일 (요청 비율로 표시된 오류)입니다.

6/1 2.4 %
6/2 2.3 %
6/3 2.2 %
6/4 2.4 %
6/5 2.4 %
6/6 2.1 %
6/7 2.4 %
6/8 2.4 %

처음에 Gatsby v2.9.4로 업그레이드 할 때 이런 일이 발생하는 것을 보았습니다. 2.8.5로 되 돌리면 문제가 해결되었습니다. 여전히 원인을 분석하려고합니다.

우리는 이와 동일한 문제가 있었으며 2.8.5로 다운 그레이드하여 해결되는 것을 확인했습니다. 그렇게하기 전에 "/"에 대한 리소스 누락 오류가 계속 발생했습니다.

@bmatzner @wilcoxmd 우리는 한동안 2.8.x를 사용했으며 v1에서 v2로 처음 이동 한 이후 모든 Gatsby 업그레이드에서 리소스가 누락되었습니다. 일관되게 v2 이후로 업그레이드 할 때 급증하거나 변경되지 않습니다.

2.8.5 이전에 우리는 확실히 오랫동안 보았습니다. 이 문제에는 다양한 원인이 있다고 생각합니다. v2.94는 또 다른 것을 도입 한 것 같습니다.

@bmatzner @wilcoxmd 우리는 한동안 2.8.x를 사용했으며 v1에서 v2로 처음 이동 한 이후 모든 Gatsby 업그레이드에서 리소스가 누락되었습니다. 일관되게 v2 이후로 업그레이드 할 때 급증하거나 변경되지 않습니다.

같은

@ jackhair 알겠습니다 . 아직 Gatsby 사이트를 시작하지 않았으므로 트래픽의 일부가이 문제를 볼 수 있을지 모르겠습니다. 스테이징 버전을 배포 할 때이 문제가 발생했습니다. 우리는 2.9.2를 사용했고 로컬에서 빌드를 제공하는 데는 문제가 없었지만 배포하자마자 모든 브라우저에서 영구적 인 리소스 누락 오류가 발생했습니다. 2.8.5로 다운 그레이드하면 사이트를 배포하고 작업을 시작할 수있었습니다.

@ jackhair 알겠습니다 . 아직 Gatsby 사이트를 시작하지 않았으므로 트래픽의 일부가이 문제를 볼 수 있을지 모르겠습니다. 스테이징 버전을 배포 할 때이 문제가 발생했습니다. 우리는 2.9.2를 사용했고 로컬에서 빌드를 제공하는 데는 문제가 없었지만 배포하자마자 모든 브라우저에서 영구적 인 리소스 누락 오류가 발생했습니다. 2.8.5로 다운 그레이드하면 사이트를 배포하고 작업을 시작할 수있었습니다.

흥미 롭군. 그만한 가치가있는 것은 문제를 로컬로 복제 할 수 없었습니다 (개츠비 개발). 프로덕션 환경에서 빌드 된 경우에만 문제를 볼 수 있습니다.

2.9.2에는 유망 해 보이는 prod 브랜치가 있지만 지금까지는 문제가 없지만 주요 프로덕션에 비해 트래픽이 적습니다. 배포가 완료되면 지난주 Gatsby에 대한 페이지 매니페스트 업데이트가 많은 도움이되기를 바라며 결과를 게시 할 것입니다.

우리는 2.9.0을 생산 중이며 안타깝게도 모든 브라우저에서 트래픽의 1-2 %라는 이전과 동일한 비율로 여전히 문제가 발생하고 있습니다.

에 버전 롤백 아래로 2.8.5 에서 2.9.4 우리를 위해 문제를 해결 한 것으로 보인다.
우리의 경우에는 누락 된 pages-manifest-{hash}.js[.map] 파일과 관련된 것으로 보입니다.
2.9.3 및 2.9.4 버전에는 잠재적 인 주요 변경 사항이 있습니다. https://github.com/gatsbyjs/gatsby/pull/14732 참조 (Gatsby 패키지 변경 로그 : https://github.com /gatsbyjs/gatsby/blob/master/packages/gatsby/CHANGELOG.md).
이를 확인하기위한 마지막 테스트는 Gatsby를 2.9.2 까지 업그레이드하는 것입니다.

참고로 @moocar 는 리소스 로딩을 더욱 강력하게 만들기위한 PR이 있습니다. 예를 들어 재시도 실패 또는 부분적으로로드 된 리소스 https://github.com/gatsbyjs/gatsby/pull/14889

당신 중 누구라도 그것을 검토 / 시도 할 시간이 있다면, 대단히 감사하겠습니다. 이 문제를 일찍 파악하지 못해 죄송합니다. 최근 @Moocar를 통해이 문제가 얼마나 널리 퍼 졌는지 또는 원인이 무엇인지 확실하지

더 많은 도움이 될지는 모르겠지만 몇 분 전에 https://gatsbyjs.org/contributing 했습니다.

재 장전 후 수정되었지만 여기에 넣을 가치가있는 것 같았습니다 @KyleAMathews

페이지 매니페스트 파일의 변경 사항을 올바르게 확인하지 않아 이전 파일을 유지하지 않을 수 있기 때문에 오프라인 플러그인 구성에 문제가 될 수 있다고 생각합니다.

오프라인 플러그인을 많이 작성 했기 때문에 다음 주에 시도해 보려고합니다. 슬프게도 최근에는 시험으로 정말 바쁘고 이사 할 계획

@ davidbailey00 디버깅에 너무 깊이 있든 없든 이것을 경험합니다.

@ davidbailey00 우리는 오프라인 플러그인 없이도 문제가 발생했습니다. 내 노드 모듈에 있지만 여전히 내 구성 파일에서 주석 처리되었습니다.

오프라인 플러그인이 설치되지 않은 상태에서도이 문제가 발생합니다.

@ davidbailey00 예 우리는 주요 수정 사항이 ajax 요청에 대한 비정상적인 오류 사례를 올바르게 처리하고 재시도 논리를 추가한다고 생각합니다 https://github.com/gatsbyjs/gatsby/pull/14889

지난 4 ~ 5 일 동안 gatsbyjs.org에 PR을 배포했으며 상황이 정말 좋아 보입니다! 배포 이후 새로운 "자원 누락"이벤트가 없습니다.

https://github.com/gatsbyjs/gatsby/pull/14889#issuecomment -505872897

@wardpeet 은 네트워크 문제를 시뮬레이션하기 위해 몇 가지 테스트를 진행 중이지만 앞으로 24 시간

@KyleAMathews 감사합니다.이 실행을 기다릴 수 없습니다!

@KyleAMathews 업데이트에 대한 귀하와 귀하의 팀에게 감사드립니다!

@KyleAMathews 내 사이트에서이 문제가 계속 발생하고 있습니다. 로컬에서는 잘 작동하지만 찌르는 것은 그렇지 않습니다. 또한 위의 의견 중 일부처럼 산발적으로는 아니지만 100 % 항상보고 있습니다. 즉, 대부분의 솔루션을 살펴 봤지만이를 활용해도 문제가 해결되지 않았습니다. 내가 뭔가 다른 것을 치고 있는지 확인할 수 있도록 수정 된 Gatsby의 특정 버전이 있습니까?

Gatsby 팀의 누군가가 살펴보고 싶다면 비공개로 URL을 공유하고 비공개 저장소에 contrib 액세스를 추가 할 의향이 있습니다 (DM me on twitter ). 팁 / 제안을 보내 주셔서 감사합니다. 테스트 한 내용을 명확히하기 위해 :

• gatsby-browser.js에 서비스 워커 다시로드 추가
• 오프라인 플러그인 제거
• 모든 노드 모듈 업데이트
• . 사용하여 가져 오기가 참조되지 않는지 확인

이 문제는 최신 개츠비 릴리스 [email protected] 에서 수정해야합니다. gatsbyjs.org에서 실행했고 오류는 사라졌습니다.

업그레이드하고 더 이상 문제가 있으면 알려주십시오! 지금은 이것을 닫습니다.

@KyleAMathews 감사합니다-불행히도 리소스 누락 오류가

@KyleAMathews 감사합니다-불행히도 리소스 누락 오류가

리소스가 삭제되고 다른 오류로 대체 되었기 때문에 누락 된 리소스가 표시되지 않습니다. https://github.com/gatsbyjs/gatsby/pull/14889/files#diff -3182dbe2979ea0744c50242668edc572L173

최근에이 수정 사항을 배포하여 새로운 / 다른 오류에 대한 버그 로그를 확인합니다.

편집 : 예 this.loadPageDataJson(...).then(...).finally is not a function 가 새로운 missing resources 것처럼 보입니다.

@jackhair 어떤 브라우저에서 테스트하고 있습니까? 나는 우리가 마침내 polyfill을 추가했다고 확신합니다. 그래도 틀릴 수 있습니다.

당신의 repo를 공유 할 마음이 있습니까? 또는 작은 복제?

@jackhair 어떤 브라우저에서 테스트하고 있습니까? 나는 우리가 마침내 polyfill을 추가했다고 확신합니다. 그래도 틀릴 수 있습니다.

당신의 repo를 공유 할 마음이 있습니까? 또는 작은 복제?

프로덕션 환경의 여러 브라우저에서이를 확인하고 있습니다.

웹 사이트 URL을 공유해 주시고 조금이라도 디버그 할 수 있도록 해주시겠습니까?

웹 사이트 URL을 공유해 주시고 조금이라도 디버그 할 수 있도록 해주시겠습니까?

확실한! https://ritual.com

@jackhair 버그를 확인할 수 있습니다. 위에 제공된 정보로 새로운 문제를 만들 수 있습니까?

@wardpeet @jackhair 우리는 또한이 finally polyfill 문제를 받고 있습니다. 새로운 문제가 추가 되었습니까? 제발 이걸 심판 할 수 있나요?

@eknowles @wardpeet 아직 버그 티켓을 쓸 시간이 없었습니다. 여유 시간이 있고 생성하고 싶다면 내 데이터로도 백업 할 수 있습니다.

@wardpeet @jackhair 드디어 polyfill로 문제를 추적했습니다.

우리는 의존성 중 하나가 항목 대신 useBuiltins : 사용에 babel-polyfill을 포함하고 있다는 것을 발견했습니다.

어느 쪽이든 우리는 redux-api-middleware를 다운 그레이드해야했습니다 (gatbsy와 관련이 없음).
https://github.com/agraboso/redux-api-middleware/compare/v2.3.0...v3.0.0

이것은 우리의 finally 버그를 해결했습니다. 나는 스택 추적을 따라 체인을 따라 가고 Promise polyfill이 재정의되었지만 불쾌한 lib가 될 수 있으므로 어떤 lib가 범인인지 확인하는 것이 좋습니다.

감사합니다, 우리는 이전에 node_modules와 babel-runtime에서 이것을 보았습니다. 앞으로이 문제를 어떻게 해결할 수 있는지 다시 생각하거나 최소한 적절한 오류 메시지를 제공해야합니다.