{"commit":{"revision":"cf73de9459e48282e5c76be2f9a0a25260dfba5a","authorName":"Keyan Zhang","authorEmail":"root@keyanzhang.com","authoredAt":"2016-06-04T14:43:56-07:00","shortRevision":"cf73de9459","subject":"[Docs] Error Decoder Page (#6946)"},"files":[{"path":"docs\/Rakefile","status":"M"},{"path":"docs\/_js\/ErrorDecoderComponent.js","status":"A"},{"path":"docs\/docs\/error-decoder.md","status":"A"}],"parents":["3c3c30a19a25fd542861e97f197d22b8f4c586de"],"patch":"diff --git a\/docs\/Rakefile b\/docs\/Rakefile\nindex 546f7dba12..d50dc5b102 100644\n--- a\/docs\/Rakefile\n+++ b\/docs\/Rakefile\n@@ -61,8 +61,15 @@ task :update_acknowledgements do\n File.open('_data\/acknowledgements.yml', 'w+') { |f| f.write(cols.to_yaml) }\n end\n \n+desc \"copy error codes to docs\"\n+task :copy_error_codes do\n+ codes_json = File.read('..\/scripts\/error-codes\/codes.json')\n+ codes_js = \"var errorMap = #{codes_json.chomp};\\n\"\n+ File.write('js\/errorMap.js', codes_js)\n+end\n+\n desc \"build into ..\/..\/react-gh-pages\"\n-task :release => [:update_version, :js, :fetch_remotes] do\n+task :release => [:update_version, :js, :fetch_remotes, :copy_error_codes] do\n system \"jekyll build -d ..\/..\/react-gh-pages\"\n end\n \ndiff --git a\/docs\/_js\/ErrorDecoderComponent.js b\/docs\/_js\/ErrorDecoderComponent.js\nnew file mode 100644\nindex 0000000000..7ac945228e\n--- \/dev\/null\n+++ b\/docs\/_js\/ErrorDecoderComponent.js\n@@ -0,0 +1,111 @@\n+\/**\n+ * Copyright (c) 2013-present, Facebook, Inc.\n+ * All rights reserved.\n+ *\n+ * This source code is licensed under the BSD-style license found in the\n+ * LICENSE file in the root directory of this source tree. An additional grant\n+ * of patent rights can be found in the PATENTS file in the same directory.\n+ *\/\n+\/* global React ReactDOM errorMap:true *\/\n+'use strict';\n+\n+function replaceArgs(msg, argList) {\n+ let argIdx = 0;\n+ return msg.replace(\/%s\/g, function() {\n+ const arg = argList[argIdx++];\n+ return arg === undefined ? '[missing argument]' : arg;\n+ });\n+}\n+\n+function urlify(str) {\n+ const urlRegex = \/(https:\\\/\\\/fb\\.me\\\/[a-z\\-]+)\/g;\n+\n+ const segments = str.split(urlRegex);\n+\n+ for (let i = 0; i < segments.length; i++) {\n+ if (i % 2 === 1) {\n+ segments[i] = ({segments[i]}<\/a>);\n+ }\n+ }\n+\n+ return segments;\n+}\n+\n+\/\/ ?invariant=123&args[]=foo&args[]=bar\n+function parseQueryString() {\n+ const rawQueryString = window.location.search.substring(1);\n+ if (!rawQueryString) {\n+ return null;\n+ }\n+\n+ let code = '';\n+ let args = [];\n+\n+ const queries = rawQueryString.split('&');\n+ for (let i = 0; i < queries.length; i++) {\n+ const query = decodeURIComponent(queries[i]);\n+ if (query.indexOf('invariant=') === 0) {\n+ code = query.slice(10);\n+ } else if (query.indexOf('args[]=') === 0) {\n+ args.push(query.slice(7));\n+ }\n+ }\n+\n+ return [code, args];\n+}\n+\n+function ErrorResult(props) {\n+ const code = props.code;\n+ const errorMsg = props.msg;\n+\n+ if (!code) {\n+ return (\n+

When you encounter an error, you'll receive a link to this page for that specific error and we'll show you the full error text.<\/p>\n+ );\n+ }\n+\n+ return (\n+

The full text of the error you just encountered is:<\/p>\n+ {urlify(errorMsg)}<\/code>\n+ <\/div>\n+ );\n+}\n+\n+class ErrorDecoder extends React.Component {\n+ constructor(...args) {\n+ super(...args);\n+\n+ this.state = {\n+ code: null,\n+ errorMsg: '',\n+ };\n+ }\n+\n+ componentWillMount() {\n+ const parseResult = parseQueryString();\n+ if (parseResult != null) {\n+ const [code, args] = parseResult;\n+ if (errorMap[code]) {\n+ this.setState({\n+ code: code,\n+ errorMsg: replaceArgs(errorMap[code], args),\n+ });\n+ }\n+ }\n+ }\n+\n+ render() {\n+ return (\n+ \n+ );\n+ }\n+}\n+\n+ReactDOM.render(\n+ ,\n+ document.querySelector('.error-decoder-container')\n+);\ndiff --git a\/docs\/docs\/error-decoder.md b\/docs\/docs\/error-decoder.md\nnew file mode 100644\nindex 0000000000..76d13b39b2\n--- \/dev\/null\n+++ b\/docs\/docs\/error-decoder.md\n@@ -0,0 +1,13 @@\n+---\n+id: error-decoder\n+title: Error Decoder\n+permalink: error-decoder.html\n+---\n+\n+In the minified production build of React, we avoid sending down full error messages in order to reduce the number of bytes sent over the wire.\n+\n+We highly recommend using the development build locally when debugging your app since it tracks additional debug info and provides helpful warnings about potential problems in your apps, but if you encounter an exception while using the production build, this page will reassemble the original text of the error.\n+\n+

dillon1000/react

Files changed