Added "Advanced Guides" page about cross-origin Errros by bvaughn · Pull Request #10457 · facebook/react

bvaughn · 2017-08-14T18:25:13Z

Follow-up for #10447; resolves #10441.

Follow-up items

Cherry-pick this commit into the 15-stable branch to update the current docs site.
Setup the fb.me/react-crossorigin-error redirect to facebook.github.io/react/docs/cross-origin-errors.html.

Preview in the new docs site

gaearon · 2017-08-14T19:36:00Z

docs/_data/nav_docs.yml

      title: Integrating with Other Libraries
    - id: accessibility
      title: Accessibility
+    - id: cross-origin-errors


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.

Great question. I was on the fence about this. I'll remove it for now. 😄

gaearon · 2017-08-14T19:36:47Z

docs/docs/cross-origin-errors.md

+
+### 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.


I offered another way to phrase this in Quip, feel free to use that or combine. :-)

Thanks! That must have come in after I posted this. I'll use that wording.

bvaughn · 2017-08-14T19:50:43Z

Suggested change was made!

sophiebits · 2017-08-14T19:58:26Z

docs/docs/cross-origin-errors.md

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


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?

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.

sophiebits · 2017-08-14T19:59:02Z

docs/docs/cross-origin-errors.md

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


Is this a Chrome bug? Or intentional behavior?

Uncertain. Chrome was the only browser I tested that demonstrated this behavior- but it's also the most commonly-used browser.

gaearon · 2017-08-14T20:11:04Z

docs/docs/cross-origin-errors.md

+
+### 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).


Does it? My impression is that by default Webpack won't either generate source maps nor use evals.

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.

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 · 2017-08-14T20:42:59Z

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.

facebook-github-bot added the CLA Signed label Aug 14, 2017

bvaughn mentioned this pull request Aug 14, 2017

Better messaging for componentDidCatch cross-origin errors #10447

Merged

bvaughn requested a review from flarnie August 14, 2017 18:25

gaearon reviewed Aug 14, 2017

View reviewed changes

bvaughn force-pushed the cross-origin-error-docs branch 2 times, most recently from 40adf03 to e188b47 Compare August 14, 2017 19:49

sophiebits approved these changes Aug 14, 2017

View reviewed changes

Added "Advanced Guides" page about cross-origin Errors

3165363

bvaughn force-pushed the cross-origin-error-docs branch from e188b47 to 3165363 Compare August 14, 2017 20:03

gaearon reviewed Aug 14, 2017

View reviewed changes

Tweaked cross-origin error wording based on Dan's and Ben's feedback

ad1cb4d

bvaughn force-pushed the cross-origin-error-docs branch from 80b28cf to ad1cb4d Compare August 14, 2017 20:23

bvaughn merged commit b4a3e3b into facebook:master Aug 14, 2017

bvaughn deleted the cross-origin-error-docs branch August 14, 2017 20:43

bvaughn added a commit that referenced this pull request Aug 14, 2017

Added "Advanced Guides" page about cross-origin Errros (#10457)

e6f5375


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


		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.


		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. No newline at end of file

Conversation

bvaughn commented Aug 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Follow-up items

Preview in the new docs site

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bvaughn commented Aug 14, 2017

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bvaughn Aug 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bvaughn Aug 14, 2017 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Choose a reason for hiding this comment

Uh oh!

Choose a reason for hiding this comment

Uh oh!

bvaughn commented Aug 14, 2017

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

4 participants

bvaughn commented Aug 14, 2017 •

edited

Loading

bvaughn Aug 14, 2017 •

edited

Loading

bvaughn Aug 14, 2017 •

edited

Loading