Make links in LogBox tappable

Summary:
changelog:
[General][Add] LogBox now makes URL links tappable.

Logbox messages may contain URLs with more information about the given error. Right now, they are not tappable or copyable. So engineers need to resort to manually retype the link to browser. This diff tries to address that.

Example of StrictMode error that has link in it.

{F798509909}

Reviewed By: yungsters

Differential Revision: D41305784

fbshipit-source-id: 456a9faf34f8b9e443759dd6903ba67d0b9de73c

Libraries/LogBox/UI/LogBoxMessage.js

@@ -11,6 +11,8 @@
 import type {TextStyleProp} from '../../StyleSheet/StyleSheet';
 import type {Message} from '../Data/parseLogBoxLog';
 
+import Linking from '../../Linking/Linking';
+import StyleSheet from '../../StyleSheet/StyleSheet';
 import Text from '../../Text/Text';
 import * as React from 'react';
 
@@ -22,6 +24,81 @@ type Props = {
   ...
 };
 
+type Range = {
+  lowerBound: number,
+  upperBound: number,
+};
+
+function getLinkRanges(string: string): $ReadOnlyArray<Range> {
+  const regex = /https?:\/\/[^\s$.?#].[^\s]*/gi;
+  const matches = [];
+
+  let regexResult: RegExp$matchResult | null;
+  while ((regexResult = regex.exec(string)) !== null) {
+    if (regexResult != null) {
+      matches.push({
+        lowerBound: regexResult.index,
+        upperBound: regex.lastIndex,
+      });
+    }
+  }
+
+  return matches;
+}
+
+function TappableLinks(props: {
+  content: string,
+  style: void | TextStyleProp,
+}): React.Node {
+  const matches = getLinkRanges(props.content);
+
+  if (matches.length === 0) {
+    // No URLs detected. Just return the content.
+    return <Text style={props.style}>{props.content}</Text>;
+  }
+
+  // URLs were detected. Construct array of Text nodes.
+
+  let fragments: Array<React.Node> = [];
+  let indexCounter = 0;
+  let startIndex = 0;
+
+  for (const linkRange of matches) {
+    if (startIndex < linkRange.lowerBound) {
+      const text = props.content.substring(startIndex, linkRange.lowerBound);
+      fragments.push(<Text key={++indexCounter}>{text}</Text>);
+    }
+
+    const link = props.content.substring(
+      linkRange.lowerBound,
+      linkRange.upperBound,
+    );
+    fragments.push(
+      <Text
+        onPress={() => {
+          Linking.openURL(link);
+        }}
+        key={++indexCounter}
+        style={styles.linkText}>
+        {link}
+      </Text>,
+    );
+
+    startIndex = linkRange.upperBound;
+  }
+
+  if (startIndex < props.content.length) {
+    const text = props.content.substring(startIndex);
+    fragments.push(
+      <Text key={++indexCounter} style={props.style}>
+        {text}
+      </Text>,
+    );
+  }
+
+  return <Text style={props.style}>{fragments}</Text>;
+}
+
 const cleanContent = (content: string) =>
   content.replace(/^(TransformError |Warning: (Warning: )?|Error: )/g, '');
 
@@ -49,9 +126,7 @@ function LogBoxMessage(props: Props): React.Node {
 
     if (length < maxLength) {
       elements.push(
-        <Text key={key} style={style}>
-          {cleanMessage}
-        </Text>,
+        <TappableLinks content={cleanMessage} key={key} style={style} />,
       );
     }
 
@@ -87,4 +162,10 @@ function LogBoxMessage(props: Props): React.Node {
   return <>{elements}</>;
 }
 
+const styles = StyleSheet.create({
+  linkText: {
+    textDecorationLine: 'underline',
+  },
+});
+
 export default LogBoxMessage;

Libraries/LogBox/UI/__tests__/LogBoxMessage-test.js

@@ -17,7 +17,7 @@ const React = require('react');
 
 describe('LogBoxMessage', () => {
   it('should render message', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -31,7 +31,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message truncated to 6 chars', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={5}
@@ -47,7 +47,7 @@ describe('LogBoxMessage', () => {
 
   it('should render the whole message when maxLength = message length', () => {
     const message = 'Some kind of message';
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={message.length}
@@ -62,7 +62,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -76,7 +76,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution, truncating the first word 3 letters in', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={3}
@@ -91,7 +91,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution, truncating the second word 6 letters in', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={13}
@@ -106,7 +106,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render message with substitution, truncating the third word 2 letters in', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={22}
@@ -122,7 +122,7 @@ describe('LogBoxMessage', () => {
 
   it('should render the whole message with substitutions when maxLength = message length', () => {
     const message = 'normal substitution normal';
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         maxLength={message.length}
@@ -137,7 +137,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render a plaintext message with no substitutions', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         plaintext
         style={{}}
@@ -152,7 +152,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('should render a plaintext message and clean the content', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         plaintext
         style={{}}
@@ -167,7 +167,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('Should strip "TransformError " without breaking substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -181,7 +181,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('Should strip "Warning: " without breaking substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -195,7 +195,7 @@ describe('LogBoxMessage', () => {
   });
 
   it('Should strip "Warning: Warning: " without breaking substitution', () => {
-    const output = render.shallowRender(
+    const output = render.create(
       <LogBoxMessage
         style={{}}
         message={{
@@ -207,4 +207,47 @@ describe('LogBoxMessage', () => {
 
     expect(output).toMatchSnapshot();
   });
+
+  it('Should make links tappable', () => {
+    const output = render.create(
+      <LogBoxMessage
+        style={{}}
+        message={{
+          content: 'http://reactnative.dev',
+          substitutions: [],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('Should handle multiple links', () => {
+    const output = render.create(
+      <LogBoxMessage
+        style={{}}
+        message={{
+          content: 'http://reactnative.dev and http://reactjs.org',
+          substitutions: [],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
+
+  it('Should handle truncated links', () => {
+    const output = render.create(
+      <LogBoxMessage
+        style={{}}
+        maxLength={35}
+        message={{
+          content: 'http://reactnative.dev and http://reactjs.org',
+          substitutions: [],
+        }}
+      />,
+    );
+
+    expect(output).toMatchSnapshot();
+  });
 });