Respec: PR Preview / respecDocWriter reporting issues.

Created on 3 Aug 2017  ·  21Comments  ·  Source: w3c/respec

PR Preview is getting a bunch of issues building (certain) ReSpec-based specs.

PR Preview relies on the spec-generator web service, which itself relies on https://github.com/w3c/respec/blob/develop/tools/respecDocWriter.js.

Unfortunately, the only error spec-generator manages to surface is "😱 ReSpec error: null" which seems to relate to the following seemingly race-condition-induced error I sometimes get when seeing this spec in a browser:

respec-w3c-common:1 null "Script error."

(anonymous) @ respec-w3c-common:1
respec-w3c-common:1 Uncaught ReferenceError: respecConfig is not defined
    at Object.<anonymous> (respec-w3c-common:1)
    at Object.execCb (respec-w3c-common:1)
    at y.check (respec-w3c-common:1)
    at y.enable (respec-w3c-common:1)
    at Object.enable (respec-w3c-common:1)
    at y.<anonymous> (respec-w3c-common:1)
    at respec-w3c-common:1
    at each (respec-w3c-common:1)
    at y.enable (respec-w3c-common:1)
    at Object.enable (respec-w3c-common:1)



md5-9228da19c1575b5da617572928cadde2



Uncaught TypeError: Cannot set property 'hidden' of null
    at respec-w3c-common:1

This maybe comes from a missing async attribute when linking to ReSpec? See the source code: https://github.com/w3c/pwpub/blob/c4d7ea649dda01672d5e218cf97d6e1d28edcf2b/index.html.

What I don't know however, is whether all ReSpec specs that don't build have this issue, or if there are multiple issues.

For example, https://github.com/w3c/payment-handler/blob/gh-pages/index.html never seems to build either and is also missing the async attribute.

The only way to find out at scale would be to have better error reporting.

And it seems the trick here would be to maybe wait for a few more errors before aborting respecDocWriter (around here).

Thoughts? Ideas about what the underlying issue is, etc. welcomed.

/cc @deniak, @iherman

picture tobie

Most helpful comment

There was a new pull request[1] yesterday. This time both the master branch _and_ the branch to be merged use the defer attribute. And... it works! :-)

[1] https://github.com/w3c/wpub/pull/43

picture iherman on 21 Aug 2017
❤1 🎉1 👍1

All 21 comments

Actually, I have regenerated a new PR for the document and

https://github.com/w3c/pwpub/blob/c728570d629fa7cc408afa3065930feb7cbf95fd/index.html

has the async now. Ie, that may not be the problem.

iherman picture iherman on 3 Aug 2017

Okay, so when following the links manually, on the first navigation, I get a completely blank screen, dumping the content of the DOM tree (copy/paste from the console on Chrome) looks like this:


DOM tree dump

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" lang="en-US" xml:lang="en-US"><head><meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"><link rel="preconnect" crossorigin="anonymous" href="https://www.w3.org" class="removeOnSave"><link rel="preload" as="script" href="https://www.w3.org/scripts/TR/2016/fixup.js" class="removeOnSave"><link rel="preload" as="style" href="https://www.w3.org/StyleSheets/TR/2016/base.css" class="removeOnSave"><link rel="preload" as="image" href="https://www.w3.org/StyleSheets/TR/2016/logos/W3C" class="removeOnSave"><link rel="stylesheet" href="https://www.w3.org/StyleSheets/TR/2016/base.css" class="removeOnSave">
        <meta charset="utf-8">
        <title>Packaged Web Publications</title>
        <script src="https://www.w3.org/Tools/respec/respec-w3c-common" class="remove"></script>
        <script src="common/js/biblio.js" class="remove"></script>
        <link href="common/css/common.css" rel="stylesheet" type="text/css">
        <script class="remove">
            var respecConfig = {
                wg: "Publishing Working Group",
                specStatus: "ED",
                shortName: "pwpub",
                edDraftURI: "https://w3c.github.io/pwpub/",
                editors: [
                    /*
                    {
                        name: "Dave Cramer",
                        url: 'http://www.hbgusa.com',
                        company: "Hachette Livre",
                        companyURI: "http://www.hbgusa.com"//,
                        w3cid: ?
                    },
                    */
                    {
                        name: "Matt Garrish",
                        url: 'http://www.daisy.org',
                        company: "DAISY Consortium",
                        companyURI: "http://www.daisy.org",
                        w3cid: 51655
                    }
                ],
                processVersion:    2017,
                includePermalinks: true,
                permalinkEdge:     true,
                permalinkHide:     false,
                diffTool:          "http://www.aptest.com/standards/htmldiff/htmldiff.pl",
                wgURI:             "https://www.w3.org/publishing/groups/publ-wg/",
                wgPublicList:      "public-publ-wg",
                wgPatentURI:       "https://www.w3.org/2004/01/pp-impl/100074/status",
                otherLinks: [
                    {
                        key: "Repository",
                        data: [{
                            value: "Github Repository",
                            href: "https://github.com/w3c/pwpub"
                        }]
                    },
                    {
                        key: "Changes",
                        data: [
                        // {
                        //   value: "Diff to previous version",
                        //   href: "diff.html"
                        // },
                        {
                            value: "Commit history",
                            href: "https://github.com/w3c/pwpub/commits/master"
                        }]
                    }
                ],
                localBiblio: biblio
            };
        </script><style id="respec-ui-styles" class="removeOnSave">#respec-ui {
  position: fixed;
  display: flex;
  flex-direction: row-reverse;
  top: 20px;
  right: 20px;
  width: 202px;
  text-align: right;
  z-index: 9000;
}

#respec-pill,
.respec-info-button {
  background: #fff;
  height: 2.5em;
  color: rgb(120, 120, 120);
  border: 1px solid #ccc;
  box-shadow: 1px 1px 8px 0 rgba(100, 100, 100, .5);
}

.respec-info-button {
  border: none;
  opacity: .75;
  border-radius: 2em;
  margin-right: 1em;
  min-width: 3.5em;
}

.respec-info-button:focus, .respec-info-button:hover {
  opacity: 1;
  transition: opacity .2s;
}

#respec-pill:disabled {
  font-size: 2.8px;
  text-indent: -9999em;
  border-top: 1.1em solid rgba(40, 40, 40, 0.2);
  border-right: 1.1em solid rgba(40, 40, 40, 0.2);
  border-bottom: 1.1em solid rgba(40, 40, 40, 0.2);
  border-left: 1.1em solid #ffffff;
  transform: translateZ(0);
  animation: respec-spin .5s infinite linear;
  box-shadow: none;
}

#respec-pill:disabled,
#respec-pill:disabled:after {
  border-radius: 50%;
  width: 10em;
  height: 10em;
}

@keyframes respec-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

#respec-pill:hover,
#respec-pill:focus {
  color: rgb(0, 0, 0);
  background-color: rgb(245, 245, 245);
  transition: color .2s;
}

#respec-menu {
  position: absolute;
  margin: 0;
  padding: 0;
  font-family: sans-serif;
  background: #fff;
  box-shadow: 1px 1px 8px 0 rgba(100, 100, 100, .5);
  width: 200px;
  display: none;
  text-align: left;
  margin-top: 32px;
  font-size: .8em;
}

#respec-menu li {
  list-style-type: none;
  margin: 0;
  padding: 0;
}

.respec-save-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(47%, 2fr));
  grid-gap: .5cm;
  padding: .5cm;
}

.respec-save-button:link {
  padding-top: 16px;
  color: rgb(240, 240, 240);
  background: rgb(42, 90, 168);
  justify-self: stretch;
  height: 1cm;
  text-decoration: none;
  text-align: center;
  font-size: inherit;
  border: none;
  border-radius: 0.2cm;
}

.respec-save-button:link:hover {
  color: white;
  background: rgb(42, 90, 168);
  padding: 0;
  margin: 0;
  border: 0;
  padding-top: 16px;
}


#respec-ui button:focus,
#respec-pill:focus,
.respec-option:focus {
  outline: 0;
  outline-style: none;
}

#respec-pill-error {
  background-color: red;
  color: white;
}

#respec-pill-warning {
  background-color: orange;
  color: white;
}

.respec-warning-list,
.respec-error-list {
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: sans-serif;
  background-color: rgb(255, 251, 230);
  font-size: .85em;
}

.respec-warning-list>li,
.respec-error-list>li {
  padding: 0.4em 0.7em;
}

.respec-warning-list>li::before {
  content: "⚠️";
  padding-right: .5em;
}
.respec-warning-list p,
.respec-error-list p {
  padding: 0;
  margin: 0;
}

.respec-warning-list li {
  color: rgb(92, 59, 0);
  border-bottom: thin solid rgb(255, 245, 194);
}


.respec-error-list,
.respec-error-list li {
  background-color: rgb(255, 240, 240);
}

.respec-error-list li::before {
  content: "💥";
  padding-right: .5em;
}

.respec-error-list li {
  padding: 0.4em 0.7em;
  color: rgb(92, 59, 0);
  border-bottom: thin solid rgb(255, 215, 215);
}

.respec-error-list li>p {
  margin: 0;
  padding: 0;
  display: inline-block;
}

#respec-overlay {
  display: block;
  opacity: 0;
  position: fixed;
  z-index: 10000;
  top: 0px;
  left: 0px;
  height: 100%;
  width: 100%;
  background: #000;
}

.respec-modal {
  display: block;
  position: fixed;
  opacity: 0;
  z-index: 11000;
  margin: auto;
  top: 10%;
  background: #fff;
  border: 5px solid #666;
  min-width: 20%;
  width: 79%;
  padding: 0;
  max-height: 80%;
  overflow-y: auto;
  margin: 0 -.5cm
}

@media screen and (min-width: 78em) {
  .respec-modal {
    width: 62%;
  }
}

.respec-modal h3 {
  margin: 0;
  padding: .2em;
  text-align: center;
  color: black;
  background: linear-gradient(to bottom, rgba(238, 238, 238, 1) 0%, rgba(238, 238, 238, 1) 50%, rgba(204, 204, 204, 1) 100%);
  font-size: 1em;
}

.respec-modal .inside div p {
  padding-left: 1cm;
}

#respec-menu button.respec-option {
  background: white;
  padding: 0 .2cm;
  border: none;
  width: 100%;
  text-align: left;
  font-size: inherit;
  padding: 1.2em 1.2em;
}

#respec-menu button.respec-option:hover,
#respec-menu button:focus {
  background-color: #eeeeee;
}

.respec-cmd-icon {
  padding-right: .5em;
}

#respec-ui button.respec-option:last-child {
  border: none;
  border-radius: inherit;
}

.respec-offending-element {
  display: inline-block;
  position: relative;
  background: url(data:image/gif;base64,R0lGODdhBAADAPEAANv///8AAP///wAAACwAAAAABAADAEACBZQjmIAFADs=) bottom repeat-x;
}

@supports (text-decoration-style: wavy) {
  .respec-offending-element {
    background: none;
    text-decoration-line: underline;
    text-decoration-style: wavy;
    text-decoration-color: red;
  }
}

.respec-button-copy-paste {
  position: absolute;
  display: block;
  padding: 0px 8px;
  height: 28px;
  width: 40px;
  color: #333;
  white-space: nowrap;
  vertical-align: middle;
  cursor: pointer;
  background-color: #eee;
  background-image: linear-gradient(#fcfcfc, #eee);
  border: 1px solid rgb(144,184,222);
  border-radius: 0px 0px 3px 0;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-appearance: none;
  margin: 0px 127px;
  border-left: 0;
}

p + .respec-button-copy-paste {
  margin: 1px 127px;
}

#specref-ui {
  margin: 0 2%;
  margin-bottom: .5cm;
}

#specref-ui header {
  font-size: .7em;
  background-color: #eee;
  text-align: center;
  padding: .2cm;
  margin-bottom: .5cm;
  border-radius: 0 0 .2cm .2cm;
}

#specref-ui header h1 {
  padding: 0;
  margin: 0;
  color: black;
}

#specref-ui p {
  padding: 0;
  margin: 0;
  font-size: .8em;
  text-align: center;
}

#specref-ui p.state {
  margin: 1cm;
}

#specref-ui .searchcomponent {
  font-size: 16px;
  display: grid;
  grid-template-columns: auto 2cm;
}
#specref-ui .searchcomponent:focus {

}

#specref-ui input,
#specref-ui button {
  border: 0;
  padding: 6px 12px;
}

#specref-ui label {
  font-size: 0.6em;
  grid-column-end: 3;
  text-align: right;
  grid-column-start: 1;
}

#specref-ui input[type=search] {
  -webkit-appearance: none;
  font-size: 16px;
  border-radius: .1cm  0 0 .1cm;
  border: 1px solid rgb(204,204,204);
}

#specref-ui button[type=submit]{
  color: white;
  border-radius: 0 .1cm .1cm 0;
  background-color: rgb(51,122,183);
}

#specref-ui button[type=submit]:hover {
  background-color: #286090;
  border-color: #204d74;
}

#specref-ui .result-stats {
  margin: 0;
  padding: 0;
  color: rgb(128,128,128);
  font-size: .7em;
  font-weight: bold;
}

#specref-ui .specref-results {
  font-size: .8em;
}

#specref-ui .specref-results dd + dt {
  margin-top: .51cm;
}

#specref-ui .specref-results a {
  text-transform: capitalize;
}
#specref-ui .specref-results .authors {
  display: block;
  color: #006621;
}

@media print {
  #respec-ui {
    display: none; 
  }
}
</style><style id="respec-mainstyle">/*****************************************************************
 * ReSpec 3 CSS
 * Robin Berjon - http://berjon.com/
 *****************************************************************/

/* Override code highlighter background */
.hljs {
  background: transparent !important;
}

/* --- INLINES --- */

em.rfc2119 {
  text-transform: lowercase;
  font-style: normal;
  color: #900;
}

h1 abbr,
h2 abbr,
h3 abbr,
h4 abbr,
h5 abbr,
h6 abbr,
a abbr {
  border: none;
}

dfn {
  font-weight: bold;
}

a.internalDFN {
  color: inherit;
  border-bottom: 1px solid #99c;
  text-decoration: none;
}

a.externalDFN {
  color: inherit;
  border-bottom: 1px dotted #ccc;
  text-decoration: none;
}

a.bibref {
  text-decoration: none;
}

cite .bibref {
  font-style: normal;
}

code {
  color: #c83500;
}

th code {
  color: inherit;
}

/* --- TOC --- */

.toc a,
.tof a {
  text-decoration: none;
}

a .secno,
a .figno {
  color: #000;
}

ul.tof,
ol.tof {
  list-style: none outside none;
}

.caption {
  margin-top: 0.5em;
  font-style: italic;
}

/* --- TABLE --- */

table.simple {
  border-spacing: 0;
  border-collapse: collapse;
  border-bottom: 3px solid #005a9c;
}

.simple th {
  background: #005a9c;
  color: #fff;
  padding: 3px 5px;
  text-align: left;
}

.simple th[scope="row"] {
  background: inherit;
  color: inherit;
  border-top: 1px solid #ddd;
}

.simple td {
  padding: 3px 10px;
  border-top: 1px solid #ddd;
}

.simple tr:nth-child(even) {
  background: #f0f6ff;
}

/* --- DL --- */

.section dd > p:first-child {
  margin-top: 0;
}

.section dd > p:last-child {
  margin-bottom: 0;
}

.section dd {
  margin-bottom: 1em;
}

.section dl.attrs dd,
.section dl.eldef dd {
  margin-bottom: 0;
}

#issue-summary > ul,
.respec-dfn-list {
  column-count: 2;
}

#issue-summary li,
.respec-dfn-list li {
  list-style: none;
}

details.respec-tests-details {
  margin-left: 1em;
  display: inline-block;
  vertical-align: top;
}

details.respec-tests-details > * {
  padding-right: 2em;
}

details.respec-tests-details[open] {
  z-index: 999999;
  position: absolute;
  border: thin solid #cad3e2;
  border-radius: .3em;
  background-color: white;
  padding-bottom: .5em;
}

details.respec-tests-details[open] > summary {
  border-bottom: thin solid #cad3e2;
  padding-left: 1em;
  margin-bottom: 1em;
  line-height: 2em;
}

details.respec-tests-details > ul {
  width: 100%;
  margin-top: -0.3em;
}

details.respec-tests-details > li {
  padding-left: 1em;
}

@media print {
  .removeOnSave {
    display: none;
  }
}
</style><link rel="dns-prefetch" crossorigin="anonymous" href="https://specref.herokuapp.com" class="removeOnSave">
    </head>
    <body hidden="">
        <section id="abstract">
            <p>This specification defines a packaging format for combining the resources of a Web Publication [[!WPUB]] into a single
                portable file.</p>
            <p class="note">
                At this point, this is just a skeleton for the specification-to-be. At the moment, the focus of the Working Group is on the Web Publications document.
            </p>
        </section>
        <section id="sotd"></section>
        <section id="introduction">
            <h2>Introduction</h2>
            <p>...</p>
        </section>
        <section id="conformance"></section>
        <section id="terminology">
            <h2>Terminology</h2>

            <dl>
                <dt><dfn>Packaged Web Publication</dfn></dt>
                <dd><p>...</p></dd>
            </dl>
        </section>
        <section id="ack" data-include="common/html/acknowledgements.html" data-include-replace="true"></section>


</body></html>

The errors in the console are:

null "Script error."
(anonymous) @ respec-w3c-common:1

respec-w3c-common:1 Uncaught ReferenceError: respecConfig is not defined
    at Object.<anonymous> (respec-w3c-common:1)
    at Object.execCb (respec-w3c-common:1)
    at y.check (respec-w3c-common:1)
    at y.enable (respec-w3c-common:1)
    at Object.enable (respec-w3c-common:1)
    at y.<anonymous> (respec-w3c-common:1)
    at respec-w3c-common:1
    at each (respec-w3c-common:1)
    at y.enable (respec-w3c-common:1)
    at Object.enable (respec-w3c-common:1)
respec-w3c-common:1 Uncaught TypeError: Cannot set property 'hidden' of null
    at respec-w3c-common:1

Uncaught TypeError: Cannot set property 'hidden' of null
    at respec-w3c-common:1
tobie picture tobie on 3 Aug 2017

(Bringing this to your attention @marcoscaceres, because it seems to break pr-preview for a number of people using ReSpec.)

tobie picture tobie on 3 Aug 2017

@tobie, I think the spec generator might be out of date (I fixed the above bug a few days ago). I'll ask them to update ReSpec.

marcoscaceres picture marcoscaceres on 5 Aug 2017

@deniak ^^^ actually, given that you are already tagged. Can you make sure the spec generator is using at least 15.7.4?

marcoscaceres picture marcoscaceres on 5 Aug 2017

@marcoscaceres that's already the case. I updated respec thinking it'll solve the issue after @tobie ping me

deniak picture deniak on 7 Aug 2017

@deniak ok, thanks for confirming. I will yank out the code that causing this problem. It was a hack anyway.

marcoscaceres picture marcoscaceres on 7 Aug 2017

The problem is still there; I am not sure whether the latest merge was meant to solve the issue.

Here is the PR:

https://github.com/w3c/wpub/pull/33

The file works properly when rawgit is used manually:

https://rawgit.com/w3c/wpub/6f47335caf1c02fb97b4be100f2f5fd366bf3c70/index.html

But the preview does not appear.

(I am just the user, no idea what is happening inside, but @tobie asked me to reopen the issue.)

iherman picture iherman on 15 Aug 2017

This seems to be the same race conditions as before.

I can repro the issue on first load, but on the second load, it seems to run normally.

tobie picture tobie on 15 Aug 2017

Thanks, will have another look🕵️

marcoscaceres picture marcoscaceres on 15 Aug 2017

I am not sure it is related, but it might. Several of us have experienced a problem on Firefox when displaying, eg, https://w3c.github.io/wpub/, that the processing does not happen and one has to reload the page. It may be a race condition, and it may be related.

iherman picture iherman on 19 Aug 2017
👍1

Will try to take a look tomorrow. If you can capture any console errors or steps to reproduce, that's hugely helpful.

marcoscaceres picture marcoscaceres on 19 Aug 2017

I've been having the problem in Chrome, with the result of only a partial load. Here's what I've been getting in the console:

domReady.js:57 null "Script error."
    ErrorEvent
    bubbles: false
    cancelBubble: false
    cancelable: true
    colno: 0
    composed: false
    currentTarget: Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
    defaultPrevented: false
    error: null
    eventPhase: 0
    filename: ""
    isTrusted: true
    lineno: 0
    message: "Script error."
    path: [Window]
    returnValue: true
    srcElement: Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
    target: Window {stop: ƒ, open: ƒ, alert: ƒ, confirm: ƒ, prompt: ƒ, …}
    timeStamp: 1195.2350000000001
    type: "error"
    __proto__: ErrorEvent
(anonymous) @ domReady.js:57
domReady.js:57 Uncaught ReferenceError: respecConfig is not defined
    at Object.<anonymous> (domReady.js:57)
    at Object.execCb (require.js:1705)
    at y.check (require.js:889)
    at y.enable (require.js:1180)
    at Object.enable (require.js:1567)
    at y.<anonymous> (require.js:1167)
    at require.js:139
    at each (require.js:70)
    at y.enable (require.js:1113)
    at Object.enable (require.js:1567)
w3c.github.io/:1 The resource https://www.w3.org/scripts/TR/2016/fixup.js was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
w3c.github.io/:1 The resource https://www.w3.org/StyleSheets/TR/2016/logos/W3C was preloaded using link preload but not used within a few seconds from the window's load event. Please make sure it wasn't preloaded for nothing.
mattgarrish picture mattgarrish on 19 Aug 2017

Sent a PR to run ReSpec sync. That should hopefully put things in the right order.

I'll look around ReSpec's code base for other race conditions.

About Firefox - I'm not sure what it might be... it could be a you are hitting an IndexedDB bug in Firefox 55 (that is fixed in 56, but won't be out for about 5 weeks) that sometimes shows up. I'll see if I can get Firefox to break and add any error recovery code.

marcoscaceres picture marcoscaceres on 20 Aug 2017

did a couple of thousand runs of ReSpec's test suite randomizing async/defer/sync on tests across Safari, Chrome, and Firefox (cache enabled and disabled), but was still unable to get it to crash or throw any errors :(

marcoscaceres picture marcoscaceres on 20 Aug 2017

Can you reproduce the issue described in https://github.com/w3c/respec/issues/1345#issuecomment-319966645, however?

tobie picture tobie on 20 Aug 2017

@marcoscaceres

Sent a PR to run ReSpec sync. That should hopefully put things in the right order.

That PR did not make the FF problem disappear. Your other advice (in the comment) to use defer instead of async did, though.

iherman picture iherman on 20 Aug 2017

Can you reproduce the issue described in #1345 (comment), however?

No :( But I at least I'm pretty sure of where it's happening (in core/base-runner, as it's the only place where respecConfig is accessed directly):

ReferenceError: respecConfig is not defined

I can only think what is happening is that somehow ReSpec is running before the script that declares respecConfig is run.

marcoscaceres picture marcoscaceres on 20 Aug 2017

If this comes up again for any URLs, please let me know. I'll keep this bug open for a few weeks.

On a positive note, it gave me an opportunity to rewrite some aspects of ReSpec and fixed some smaller bugs along the way.

marcoscaceres picture marcoscaceres on 20 Aug 2017
👍1

There was a new pull request[1] yesterday. This time both the master branch _and_ the branch to be merged use the defer attribute. And... it works! :-)

[1] https://github.com/w3c/wpub/pull/43

iherman picture iherman on 21 Aug 2017
❤1 🎉1 👍1

closing, as it hasn't come up again 🤞.

marcoscaceres picture marcoscaceres on 24 Oct 2017
🎉1
Was this page helpful?
0 / 5 - 0 ratings

Related issues

saschanaz picture saschanaz  ·  5Comments
greenkeeper[bot] picture greenkeeper[bot]  ·  4Comments
jnurthen picture jnurthen  ·  6Comments
deniak picture deniak  ·  5Comments
marcoscaceres picture marcoscaceres  ·  4Comments