@callingmedic911 triage bot assigned to you — I just wanted to make sure someone helped get this to next steps.

@dthyresson was it you that had some ideas about next steps here (even if group discussion)?

@dthyresson

Per Discussion with Core Team:

• want to do this; prioritizing for v1
• will explore opening to community contributor as lead

@orta and @thedavidprice progress!

I'll pick this up tomorrow and try out a few other error cases (like cell query errors) -- and the real test is a production deploy to ensure the dev error page is not in.

Note: This is a candidate for a codemod to update an existing app's FatalErrorPage

@orta are the request-response and response css styles missing from DevFatalErrorPage ?

Yeah, I could believe they are missing, here's my full uptodate CSS:

  body {
    background-color: rgb(253, 248, 246);
    font-family: "Open Sans", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  }
  .panic-overlay {
    background-color: white;
    padding: 0 2.5em;
  }
  .panic-overlay strong {
    font-weight: bold;
  }

  nav {
    display: flex;
    flex-direction: row;
    align: center;
    justify-content: space-between;
    padding: 1em 2.5em;
  }

  nav h1 {
    color: black;
    margin: 0;
    padding: 0;
    font-size: 1.2em;
    font-weight: 400;
    opacity: 1;
    color: rgb(191, 71, 34);
  }

  nav h1 a {
    color: black;
    text-decoration: underline;
  }

  nav svg {
    width: 24px;
    height: 24px;
    display: inline-block;
    fill: rgb(191, 71, 34);
  }

  nav svg.discourse {
    height: 20px;
    width: 20px;
  }

  nav svg:hover {
    fill: rgb(200, 32, 32);
  }

  nav div {
    line-height: 2sem;
  }

  .panic-overlay .error {
    padding: 3em 0;
  }
  .panic-overlay .error-title {
    display: flex;
    align-items: stretch;
  }

  .panic-overlay .error-type {
    min-height: 2.8em;
    display: flex !important;
    align-items: center;
    padding: 0 1em;
    background: rgb(195, 74, 37);
    color: white;
    margin-right: 2em;
    white-space: nowrap;
    text-align: center;
  }
  .panic-overlay .error-counter {
    color: white;
    opacity: 0.3;
    position: absolute;
    left: 0.8em;
  }
  .panic-overlay .error-message {
    display: flex !important;
    align-items: center;
    font-weight: 300;
    line-height: 1.1em;
    font-size: 2.8em;
    word-break: break-all;
    white-space: pre-wrap;
  }
  .panic-overlay .error-stack {
    margin-top: 2em;
    white-space: pre;
    padding-left: var(--left-pad);
  }

  .panic-overlay .stack-entry.clickable {
    cursor: pointer;
  }

  .panic-overlay .stack-entry {
    margin-left: 2.5em;
  }

  .panic-overlay .stack-entry .file {
    font-weight: light;
    color: rgb(195, 74, 37, 0.8);
  }

  .panic-overlay .stack-entry.first .file {
    font-weight: bold;
    color: rgb(200, 47, 47);
  }

  .panic-overlay .file strong {
    font-weight: normal;

    text-decoration: underline;
  }
  .panic-overlay .file:before,
  .panic-overlay .more:before {
    content: "@ ";
    opacity: 0.5;
    margin-left: -1.25em;
  }
  .panic-overlay .more:before {
    content: "▷ ";
    opacity: 0.5;
  }
  .panic-overlay .more {
    opacity: 0.25;
    color: black;
    font-size: 0.835em;
    cursor: pointer;
    text-align: center;
    display: none;
  }
  .panic-overlay .more em {
    font-style: normal;
    font-weight: normal;
    border-bottom: 1px dashed black;
  }
  .panic-overlay .collapsed .panic-overlay .more {
    display: block;
  }
  .panic-overlay .lines, .request-response code {
    color: rgb(187, 165, 165);
    font-size: 0.835em;
    margin-bottom: 2.5em;
    font-family: Menlo, Monaco, "Courier New", Courier, monospace;
  }
  .panic-overlay .lines:not(.panic-overlay .no-fade) {
    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0));
  }
  .panic-overlay .line-number {
    padding-right: 1.5em;
    opacity: 0.5;
  }
  .panic-overlay .line-hili {
    background: rgb(253, 248, 246);
    color: #5f4545;
  }
  .panic-overlay .stack-entry:first-child .panic-overlay .line-hili strong {
    text-decoration: underline wavy #ff0040;
  }
  .panic-overlay .line-hili em {
    font-style: italic;
    color: rgb(195, 74, 37);
    font-size: 0.75em;
    margin-left: 2em;
    opacity: 0.25;
    position: relative;
    top: -0.115em;
    white-space: nowrap;
  }
  .panic-overlay .line-hili em:before {
    content: "← ";
  }
  .panic-overlay .no-source {
    font-style: italic;
  }

  .panic-overlay .request-response {
    margin-top: 2rem;
    display: flex;
    flex-direction: row;
  }

  .panic-overlay .request-response > div {
    flex: 1;
  }

  .panic-overlay .request-response .response {
    margin-left: 2rem;
  }

  .panic-overlay .request-response h3 {
    background-color: rgb(195, 74, 37);
    color: white;
    font-size: 2rem;
    padding: 0.2rem 1rem;
  }

  .panic-overlay .request-response > div > div {
    margin: 1rem 1rem;
  }

  .panic-overlay .request-response pre {
    background-color: rgb(253, 248, 246);
    padding: 0.3rem 1rem;
    color: black;
  }

  .panic-overlay .request-response pre.open {
    max-height: auto;
  }

  .panic-overlay .request-response pre.preview {
    max-height: 13.5rem;
    overflow-y: auto;

    -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0));
    mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 1) 75%, rgba(0, 0, 0, 0));
  }

  @media only screen and (max-width: 640px) {
    .panic-overlay {
      font-size: 15px;
    }

    .panic-overlay h1 {
      margin: 40px 0;
    }
  }
  @media only screen and (max-width: 500px) {
    .panic-overlay {
      font-size: 14px;
    }

    .panic-overlay h1 {
      margin: 30px 0;
    }
  }

Have restored styles, and the last link in the chain for Apollo has to be the http link

https://www.apollographql.com/docs/react/api/link/introduction/

But, for some reason, if no error occurs, then updateDataApolloLink is called and can see log.

But, when an error has happened, none of the links in the chain are invoked.

Which makes no senses since the flow is meant to be link, link, link (forwarded each time) and the graphql response then back up the chain it came so you can process and even modify the response.

But .... oh may it is the type of error I am simulating and testing with.

But .... oh may it is the type of error I am simulating and testing with.

AHA!

It was the wrong type of error!

Looking better!

And VS code links and social link go to there because they want to go to there.

@dthyresson great work on the progress here! My layout, styling comments below:

Header

Menu and h1

The IA here is throwing me off a bit.

• shouldn't "a fatal error ocurred..." be more like an h1? Here it reads like a menu item that isn't connected to the h1 below
• what happens if I click on Spot.tsx?

Overall, I get why we're making the Error type and message prominent, but I don't think we should visually separate (using the area that's typically a menu) that h1 content from the main point --> A fatal runtime error occurred.

I could even imagine "A fatal runtime..." being place between the current h1 and the current section that follows including path and code.

Wish I had better ideas. Need to think on it.

Help

• we should make this a more prominent call to action, i.e. a button
• I don't think giving them two options, which are just links to either Discord or Forums, is ideal. Which should I choose? What happens once I'm on the home screens... What should I do?

@KrisCoulson @dthyresson I think this is a great chance for a decision about the question, "How do we want people to go about getting support? In an accessible way that can scale?"

For Example:

• "Get Help" Button with link to a forum post
• Greet and invite to get support
• Walk through steps: 1) search forums 2) can't find? What type of Issue --> do this next... here's when to open an issue... etc 3) Lastly, found a fix? Pay it forward! Create a quick post of the problem and the solution for others to find in the future!

People that know how to find help won't use this anyway. This will be most clicked (I hypothesize) by people new to the community who are more likely to either not ask for help because of emotional resistance (e.g. my question is dumb or I don't know the social norms) or they will ask for help but not necessarily in a way that scales.

fwiw

Path and Code Section

The light font color of the code snippet seems like a poor accessibility choice due to

• low contrast with background color
• small font size

Tried my CSS fixes on MacOS as well, and I think it looks good 👍

And here the highlighting is on the right line in the first snippet. But it's like four lines wrong in the second. @dthyresson How do you want to handle the highlighting?

We also need to document REDWOOD_ENV_EDITOR

Tried my CSS fixes on MacOS as well, and I think it looks good 👍

And here the highlighting is on the right line in the first snippet. But it's like four lines wrong in the second. @dthyresson How do you want to handle the highlighting?

@Tobbe i think the highlight in the second second is “technically” right — it’s highlighting the enclosing element (component so to speak) that threw the error since it is the parent of what calls the formatter.

it shows me where formatTitle was used … the link element.

So, I am ok with it if you are.

Another thing... Saw this comment and code

// RWJS_SRC_ROOT is defined and defaulted in webpack to the base path
// Chop of the first slash character (maybe be OSX/Linux only?)
const appRoot = (process.env.RWJS_SRC_ROOT || '').substring(1)

So I looked on Windows:

RWJS_SRC_ROOT C:\Users\tobbe\dev\err_page_2
appRoot :\Users\tobbe\dev\err_page_2

So you're right in your comment. This needs fixing on Windows.

@Tobbe i think the highlight in the second second is “technically” right — it’s highlighting the enclosing element (component so to speak) that threw the error since it is the parent of what calls the formatter.

I don't understand how it works. Look at these two top code listings

In the last one it's highlighting the exact line the eror's on. But in the first screenshot the highlighting is on the enclosing type. What's the logic here?

Both screenshots are topmost for two different errors. (I tried to make that clear by including part of the heading shown above the filename, but I should have been more explicit about it. Sorry)

I'm sorry. I feel like I'm being too difficult and annoying. I'm fine with just getting this in, and then iterating from there. Sounds good?

What do you think about the "Code scanning results" thing that's failing?

I'm sorry. I feel like I'm being too difficult and annoying. I'm fine with just getting this in,

Not at all. Having a 2nd and 3rd eyes on something so many devs are going to see and to make sure that the info makes sense is key. So many thanks!

and then iterating from there.

Definitely. I know DP wants the call to action perhaps to change with the buttons; we'll get there,

Sounds good?

Yup!

What do you think about the "Code scanning results" thing that's failing?

I think that these always fail on a new envar that uses process and we can allow these (ie, add to the list of allowed codes.)

I'll set those now.

Oh, I had seen prior security warnings in the last PR but didn't see:

prev[`process.env.${next}`] = JSON.stringify(process.env[next])

But I imagine it is the same. I'll do a little research, but I think it is ok to allow.

Oh, I had seen prior security warnings in the last PR but didn't see:

prev[`process.env.${next}`] = JSON.stringify(process.env[next])

But I imagine it is the same. I'll do a little research, but I think it is ok to allow.

The code here:

const getEnvVars = () => {
  const redwoodEnvPrefix = 'REDWOOD_ENV_'
  const includeEnvKeys = redwoodConfig.web.includeEnvironmentVariables
  const redwoodEnvKeys = Object.keys(process.env).reduce((prev, next) => {
    if (
      next.startsWith(redwoodEnvPrefix) ||
      (includeEnvKeys && includeEnvKeys.includes(next))
    ) {
      prev[`process.env.${next}`] = JSON.stringify(process.env[next])
    }
    return prev
  }, {})

  return redwoodEnvKeys
}

Is auto including and envars that have the RWJS prefix which has been in for a long time -- I think code scanning picked it up again because process.env.RWJS_SRC_ROOT was added.

All set. I saw the merge.

And document the new envars and behavior (ie, say in the docs that dev has an error page and the won't be seen in prod).

Congrats folks!

Works well:

But I think some of the work to get windows support might have removed newlines in the query:

Oops. Ok the nice thing about merging the PR is now we can write up issues. 😀 I’ll write one up shortly as I did see newlines being rendered correctly earlier in my testing .

( It could be that my personal request/response pipeline could be to blame also, as its a different implementation, but I think it's unlikely after a quick read of the code )

@dthyresson we're going to forget about improving the styling, aren't we? 😢