Added "Advanced Guides" page about cross-origin Errros #10457
Conversation
docs/_data/nav_docs.yml
Outdated
| @@ -54,6 +54,8 @@ | |||
| title: Integrating with Other Libraries | |||
| - id: accessibility | |||
| title: Accessibility | |||
| - id: cross-origin-errors | |||
There was a problem hiding this comment.
Does it need to be in the table of contents? Normally we don't add items for warnings. Those who have them will read this by following a link, those who don't probably don't need to know this. Every item in TOC adds some extra mental overhead for people learning React.
There was a problem hiding this comment.
Great question. I was on the fence about this. I'll remove it for now. 😄
docs/docs/cross-origin-errors.md
Outdated
|
|
||
| ### Webpack | ||
|
|
||
| Certain [Webpack `devtool` settings](https://webpack.js.org/configuration/devtool/) can cause cross-origin errors. We recommend using the `cheap-module-source-map` setting to avoid this problem. |
There was a problem hiding this comment.
I offered another way to phrase this in Quip, feel free to use that or combine. :-)
There was a problem hiding this comment.
Thanks! That must have come in after I posted this. I'll use that wording.
bvaughn
force-pushed
the
cross-origin-error-docs
branch
2 times, most recently
from
40adf03
to
e188b47
Compare
|
Suggested change was made! |
docs/docs/cross-origin-errors.md
Outdated
|
|
||
| If an error is thrown from a [different origin](https://developer.mozilla.org/en-US/docs/Web/Security/Same-origin_policy) the browser will mask its details and React will not be able to log the original error message. This is a security precaution taken by browsers to avoid leaking sensitive information. | ||
|
|
||
| If you trust the scripts you're running you can ask the browser to bypass the same-origin policy in a secure way. Doing this can help simplify the development/debugging process. Below are a some common causes of cross-origin errors and ways to address them. |
There was a problem hiding this comment.
Sorry, missed this before you put up the PR: You should always trust the scripts you're running. :) This isn't actually the relevant characteristic here I think. (More strictly, it's "if the scripts you're running trust you" but I don't think that's clearer.)
Can this be "If your server is set up to deliver scripts with the proper headers" or something like that?
There was a problem hiding this comment.
Proper headers are listed below as 1 of the 2 possible causes.
Maybe something like this?
You can simplify the development/debugging process by ensuring that errors are thrown with a same-origin policy. Below are some common causes of cross-origin errors and ways to address them.
We can also always tweak this wording later.
docs/docs/cross-origin-errors.md
Outdated
|
|
||
| Some JavaScript bundlers may wrap the application code with `eval` statements in development. For example Webpack will do so if the [`devtool` setting](https://webpack.js.org/configuration/devtool/) is any of the options containing the word "eval" (which includes the default setting). | ||
|
|
||
| If you use Webpack, we recommend using the `cheap-module-source-map` setting in development instead to avoid this problem. |
There was a problem hiding this comment.
Is this a Chrome bug? Or intentional behavior?
There was a problem hiding this comment.
Uncertain. Chrome was the only browser I tested that demonstrated this behavior- but it's also the most commonly-used browser.
bvaughn
force-pushed
the
cross-origin-error-docs
branch
from
e188b47
to
3165363
Compare
docs/docs/cross-origin-errors.md
Outdated
|
|
||
| ### Webpack | ||
|
|
||
| Some JavaScript bundlers may wrap the application code with `eval` statements in development. For example Webpack will do so if the [`devtool` setting](https://webpack.js.org/configuration/devtool/) is any of the options containing the word "eval" (which includes the default setting). |
There was a problem hiding this comment.
Does it? My impression is that by default Webpack won't either generate source maps nor use evals.
There was a problem hiding this comment.
I believe I saw this behavior when I removed the devtool setting entirely. I also saw reference online about it defaulting to "eval" but looking at where I think it's set in their code, that doesn't seem to be the default.
I will confirm now.
Edit 1: It looks like if debug is on, they may default to eval-cheap-module-source-map. (I'm not at all familiar with this codebase so I'm not sure how these pieces fit together really.)
Edit 2: I'll just back down the wording here (for now) to be a little less broad. We can tweak it later as we learn more about it.
There was a problem hiding this comment.
Oh, I see. I think most people won't have the debug field set (in my experience it's not commonly known, and I also can't find docs for it).
bvaughn
force-pushed
the
cross-origin-error-docs
branch
from
80b28cf
to
ad1cb4d
Compare
|
Thanks for the suggestions! 😁 I'm going to merge this and setup the fb.me link (since both are RC-blockers). We'll improve the wording over time. |
Follow-up for #10447; resolves #10441.
Follow-up items
15-stablebranch to update the current docs site.fb.me/react-crossorigin-errorredirect to facebook.github.io/react/docs/cross-origin-errors.html.Preview in the new docs site